harmony 鸿蒙Animation Styles

  • 2023-06-24
  • 浏览 (451)

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  赞