harmony 鸿蒙Animation Styles

2023-06-24
浏览 (466)

Animation Styles

Components support dynamic rotation, translation, and scaling effects. These effects can be set in the style attribute or .css files.

Name	Type	Default Value	Description
transform	string	-	Translation, rotation, and scaling attributes. For details, see Table 1.
animation-name	string	-	\@keyframes rule. For details, see Table 2.
animation-delay	<time>	0	Delay for playing the animation, in ms or s, for example, 1000 ms or 1s. \|The default unit is ms.
animation-duration	<time>	0	Animation duration, in ms or s, for example, 1000 ms or 1s. \|The default unit is ms. NOTE animation-duration must be specified. Otherwise, the duration is 0, which means the animation will not be played.
animation-iteration-count	number \|infinite	1	Number of times that an animation is played. The animation is played once by default. You can set the value to infinite to play the animation infinitely.
animation-timing-function	string	linear	Speed curve of an animation, which makes the animation more fluent. Available values are as follows: - linear: The animation speed keeps unchanged. - ease-in: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used - ease-out: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. - ease-in-out: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.
animation-fill-mode	string	none	Start and end styles of the animation. - none: No style is applied to the target before or after the animation is executed. - forwards: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.

Table 1 transform

Name	Type	Description
translateX	<length>	Moves an element along the x-axis.
translateY	<length>	Moves an element along the y-axis.
rotate	<deg> \|<rad>	Rotates an element.

NOTE

Only images of the original size can be rotated on lite wearables.

Table 2 \@keyframes

Name	Type	Default Value	Description
background-color	<color>	-	Background color applied to the component after the animation is played.
width	<length>	-	Width value applied to the component after the animation is played.
height	<length>	-	Height value applied to the component after the animation is played.
transform	string	-	Transformation type applied to a component. For details, see Table 1.

If there is no default value for when an animation will start or end, use from and to to specify the start and end of the display. The following is an example:

@keyframes Go
{
   from {
     background-color: #f76160;
   }
   to {
     background-color: #09ba07;
   }
}

animation-demo1

NOTE

The \@keyframes rule with from and to defined cannot be dynamically bound to an element.

你可能感兴趣的鸿蒙文章

harmony 鸿蒙JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite)

harmony 鸿蒙Universal Attributes

harmony 鸿蒙Universal Events

harmony 鸿蒙Universal Styles

harmony 鸿蒙chart

harmony 鸿蒙image-animator

harmony 鸿蒙image

harmony 鸿蒙input

harmony 鸿蒙marquee

harmony 鸿蒙picker-view

0 赞

所属分类： 后端技术
本文标签：
版权声明： 原创文章如转载，请注明本文链接: https://www.seaxiang.com/blog/4d3df256f4a24703bdcb269c1a1a5be8

harmony 鸿蒙Animation Styles

Animation Styles

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录