HarmonyOS Update and modification instructions of application development documents : Animation style supplement sample code and sample renderings , It is convenient for developers to master the use of animation .

Components generally supported can be style or css Dynamic rotation set in , translation , Zoom effect .

name

type

Default value

describe

transform-origin

<position>

Control center

Transform the origin position of the object , support px And percentage ( Relative to animation target component ), The format is :50px 100px or 50% 50%.

transform

string

-

Supports simultaneous panning / rotate / Scaling properties

See table for details 1.

animation-name

string

-

appoint @keyframes, See table for details 2.

animation-delay

<time>

0

Defines the delay time for animation playback . The supported units are [s( second )|ms( millisecond ) ], The default unit is ms, The format is :1000ms or 1s.

animation-duration

<time>

0

Define an animation cycle . The supported units are [s( second )|ms( millisecond ) ], The default unit is ms, The format is :1000ms or 1s.

explain

animation-duration Style must be set , Otherwise, the duration is 0, The animation will not play .

animation-iteration-count

number | infinite

1

The number of times the animation is played , Play once by default , Can be set to infinite Unlimited playback .

animation-timing-function

string

ease

Describes the speed curve of animation execution , Used to make animation smoother .

The options are :

* linear: It means that the speed of the animation is the same from beginning to end .
* ease: Indicates that the animation starts at a low speed , Then speed up , Slow down before the end ,cubic-bezier(0.25, 0.1, 0.25, 1.0).
* ease-in: Indicates that the animation starts at a low speed ,cubic-bezier(0.42, 0.0, 1.0, 1.0).
* ease-out: Indicates that the animation ends at a low speed ,cubic-bezier(0.0, 0.0, 0.58, 1.0).
* ease-in-out: Indicates that the animation starts and ends at a low speed ,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: Define animation change process in cubic Bessel function , Parametric x and y Value must be in 0-1 between .

animation-fill-mode

string

none

Specifies the state of the animation at the end of execution . The options are :

* none: Return to initial state .
* forwards: Keep the state at the end of the animation ( Defined in the last keyframe ).
<> <>
surface 1 transform Operating instructions

name

type

describe

translate

<length>| <percent>

Pan animation properties , Support settings x Axis and y Translation parameters of two dimensions of axis

translateX

<length>| <percent>

X Axis translation animation attributes

translateY

<length>| <percent>

Y Axis translation animation attributes

scale

<number>

Scale animation properties , Support settings x Axis and y Scaling parameters for two dimensions of the axis

scaleX

<number>

X Axis direction scaling animation attributes

scaleY

<number>

Y Axis direction scaling animation attributes

rotate

<deg> | <rad>

Rotate animation properties , Support settings x Axis and y The selected parameters of the two dimensions of the axis

rotateX

<deg> | <rad>

X Axis rotation animation attributes

rotateY

<deg> | <rad>

Y Axis rotation animation attributes

<> <>
surface 2 @keyframes Property description

name

type

Default value

describe

background-color

<color>

-

The background color applied to the component after the animation is executed .

opacity

number

1

The opacity value applied to the component after the animation is executed , Is between 0 reach 1 Values between , Default to 1.

width

<length>

-

The width value applied to the component after the animation is executed .

height

<length>

-

The height value applied to the component after the animation is executed .

transform

string

-

Defines the type of transformation applied to the component , See table 1.

For cases where the default start or end values are not supported , Can pass from and to Displays the specified start and end . Examples :
@keyframes Go { from { background-color: #f76160; transform:translate(0px)
rotate(0deg) scale(1.0); } to { background-color: #09ba07;
transform:translate(100px) rotate(180deg) scale(2.0); } }
 

 

explain :

@keyframes Of from/to Dynamic binding is not supported .

Technology
©2019-2020 Toolsou All rights reserved,
C Review of basic language knowledge Go Language learning notes (GUI programming )Java Misunderstanding —— Method overloading is a manifestation of polymorphism ? How to achieve low cost and high stability for cloud native applications ?elementui Shuttle box el-transfer Display list content text too long C/C++ Memory model Element-Ui assembly Message Message prompt , alert Popup C# Making a simplified version of calculator Python In pycharm editor Interface style modification Tiktok refresh progress bar ( Two little balls turn ), The code is simple