HarmonyOS Update and modification instructions of application development documents : Component method supplement sample code and sample renderings , It is convenient for developers to master the usage of component methods

When components pass id After attribute identification , You can use the id Get the component object and call the related component method .

name

parameter

Required

Default value

describe

focus

Object

The format is :{ focus: true | false }

no

{ focus: true }

Component requests or unfocuses .focus by true Time , Indicates the focus of the request ,focus by false Time , Indicates unfocused , The method parameters can be default , Default request focus by default .

explain

support focusable This method is supported by the component of the .

rotation

Object

The format is :{ focus: true | false }

no

{ focus: true }

The component requests or cancels the rotation of the crown focus .focus Set to true Time , Represents the event focus of the request crown ,focus Set to false Time , Indicates to cancel the focus of the crown event , The method parameters can be default , By default, rotation of crown focus is requested .

explain

Components only picker-view,list,slider,swiper This method is supported .

animate

* Object: keyframes, Used to describe animation keyframe parameters
* Object: options, Used to describe animation parameters
yes

-

Shortcut to create and run animation on components . Enter the information needed for the animation keyframes and options, return animation Object instance .

this.$element('id').focus(Object)

<>

support focusable Properties are supported focus method .

* Examples this.$element('id').focus();
this.$element('id').rotation(Object)

<>

Components only picker-view,list,slider,swiper support rotation method .

* Examples this.$element('id').rotation();
this.$element('id').animate(Object, Object)

<>

adopt animate(keyframes,
options) Method to obtain animation object . The object supports animation properties , Animation methods and animation events . Repeated calls animate Method time , use replace strategy , The parameters passed in take effect on the last call

* keyframes

parameter

type

explain

frames

Array<Style>

List of objects used to set animation style properties .Style See table for type description 1 Style Type description .
<> <> surface 1 Style Type description

parameter

type

Default value

explain

width

number

-

The width value set to the component during animation execution .

height

number

-

The height value set to the component during animation execution .

backgroundColor

<color>

none

The background color set to the component during animation execution .

opacity

number

1

Set transparency to components ( be situated between 0 reach 1 between ).

backgroundPosition

string

-

The format is "x y", The unit is percent sign or px.

The first value is the horizontal position , The second value is the vertical position .

If only one value is specified , The other value is 50%.

transformOrigin

string

'center center'

Transform the center point of the object .

The first parameter represents x The value of the axis , Can be set to left,center,right, Length value or percentage value .

The second parameter represents y The value of the axis , Can be set to top,center,bottom, Length value or percentage value .

transform

Transform

-

The type set to the transform object .

offset

number

-

* offset value ( If provided ) Must be in 0.0 reach 1.0( contain ) between , And in ascending order .
* If only two frames , You can leave it blank offset.
* If more than two frames ,offset Required . <> <> surface 2 Transform

parameter

type

explain

translate/translateX/translateY

<length> | <percent>

Translation element .

Examples :

translate: "250" X Axis translation 250px

translate: "100px 80%" X Axis translation 100px,Y Axis translation 80% Component height

translateX: "-200px" X Axis translation -200px

translateY: "50%" Y Axis translation 50% Component height

scale/scaleX/scaleY

number

Scale in or out elements .

Examples :

scale: "0.5" X Axis and Y The axis shrinks to its original size 0.5 times

scale: "1.5 1.2" X Axis magnification 1.5 times ,Y Axis magnification 1.2 times

scaleX: "2.0" X Zoom in to the original axis 2 times

scaleY: "0" Y Shaft length reduced to 0

rotate/rotateX/rotateY

<deg> | <rad>

Specifies the angle at which the element will be rotated .

Examples :

rotate: "180deg" Winding Z Axis rotation 180 degree

rotateX: "3.14rad" Winding X Axis rotation 3.14 radian

rotateY: "-100" Winding Y Axis rotation -100 degree

* options

parameter

type

Default value

explain

duration

number

0

Specifies the run time of the current animation ( Unit millisecond ).

easing

string

linear

Describe the time curve of the animation , The support types are shown in the table 3 easing Effective value description .

delay

number

0

Set the delay time for animation execution ( The default value is no delay ).

iterations

number | string

1

Sets the number of times the animation is executed .number Indicates a fixed number of times ,Infinity Enumeration indicates unlimited playback times .

fill

none | forwards

none

Specifies the state of the animation at the end of execution .

* none: Return to initial state .
* forwards: Keep the state at the end of the animation ( Defined in the last keyframe ). <> <> surface 3 easing Effective value description

value

describe

linear

Linear change of animation .

ease-in

Animation speed first slow then fast ,cubic-bezier(0.42, 0.0, 1.0, 1.0).

ease-out

Animation speed first fast then slow ,cubic-bezier(0.0, 0.0, 0.58, 1.0).

ease-in-out

The animation accelerates first and then decelerates ,cubic-bezier(0.42, 0.0, 0.58, 1.0).

friction

Damping curve ,cubic-bezier(0.2, 0.0, 0.2, 1.0).

extreme-deceleration

Steepness and slowness curve ,cubic-bezier(0.0, 0.0, 0.0, 1.0).

sharp

Sharp curve ,cubic-bezier(0.33, 0.0, 0.67, 1.0).

rhythm

Rhythm curve ,cubic-bezier(0.7, 0.0, 0.2, 1.0).

smooth

Smooth curve ,cubic-bezier(0.4, 0.0, 0.4, 1.0).

cubic-bezier(x1, y1, x2, y2)

Define animation change process in cubic Bessel function , Parametric x and y Value must be in 0-1 between .

steps(number, step-position)

Step curve .

number Must be set , Supported types are int.

step-position Optional parameters , Support settings start or end, The default value is end.

* Return value
<>animation Object supported properties :

attribute

type

explain

finished

boolean

read-only , Used to indicate whether the current animation has been played .

pending

boolean

read-only , Used to indicate whether the current animation is waiting for other asynchronous operations to complete ( For example, start a delayed animation ).

playState

string

Readable and writable , Execution state of animation :

* idle: Unexecuted status , Include closed or not started .
* running: Animation is running .
* paused: Animation pause .
* finished: Animation playback complete .

startTime

number

Readable and writable , The scheduled time when the animation starts playing , Uses similar to options In parameter delay.

animation Object supported methods :

method

parameter

explain

play

-

Component play animation .

finish

-

Component complete animation .

pause

-

Component pause animation .

cancel

-

Component cancel animation .

reverse

-

Component rewind animation .

animation Object supported events :

event

explain

cancel

The animation was forcibly cancelled .

finish

Animation playback complete .

* Sample code : // xxx.js import prompt from '@system.prompt'; export default { data
: { animation:'', }, onInit() { }, onShow() { var options = { duration: 3000,
easing: 'friction', delay: 500, fill: 'forwards', iterations: 1, }; var frames
= [ {transform: {translate: '-120px -0px'}, opacity: 0.1, offset: 0.0},
{transform: {translate: '120px 0px'}, opacity: 1.0, offset: 1.0} ];
this.animation = this.$element('idName').animate(frames, options); // handle
finish event this.animation.onfinish = function() { prompt.showToast({ message:
"The animation is finished." }); }; // handle cancel event
this.animation.oncancel = function() { prompt.showToast({ message: "The
animation is canceled." }); }; }, start() { this.animation.play(); }, cancel()
{ this.animation.cancel(); } }

 

 

Technology
©2019-2020 Toolsou All rights reserved,
python3 Of tkinter Design of login interface +mysql Import data of database A magic lossless compression experiment to shake “ information theory ”!!!【Java Details of knowledge points 3】 Serializable and Deserialize What is polymorphism ? What is the mechanism to achieve polymorphism ?【 Le Bo TestPro】 Force button 416. Dividing equal sum subsets knapsack problem 【 Data structure and algorithm 13】 Binary tree Smart screen and smart wearable development : Component method Model 2 Addition, subtraction, multiplication and division of operations C++ realization 《 Labyrinth 》 Games 【 Data structure and algorithm 8】 The maze problem of recursion