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
Daily Recommendation