Animation

Ant Cube Card supports animated properties, including size, rotation, translation, and color, which can gradually change from one value to another.

Transition

Property Value	Data type	Default value	Valid value	Writing
transition-property	string	No default value	background-color,opacity, transform,all	transition-property: all;
				transition-property: background-color, opacity;
				transition-property: background-color, opacity, transform;
transition-duration	number	0		transition-duration: 200;
transition-delay	number	0		transition-delay: 200;

transition-timing-function	string	ease	ease,ease-in,ease-out,ease-in-out,linear,cubic-bezier(x1,y1,x2,y2)	transition-timing-function: ease-in;
				transition-timing-function: cubic-bezier(0.3, 0.3, 0.9, 0.9);

Transition usage example

.panel {
    margin: 10px;
    top:10px;
    align-items: center;
    justify-content: center;
    transition-property: background-color;
    transition-duration: 0.3s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  }

Transform

Property	Data type	Default value	Valid value	Remarks
transform	string		translateX({<length/percentage>}) \|translateY({<length/percentage>}) \|translateZ({<length>}) \|translate({<length/percentage>} {<length/percentage>}) \|translate3D({<length>},{<length>},{<length>}) {<length/percentage>}) \|scaleX(<number>) \|scaleY(<number>) \|scale(<number>) \|rotate(<angle/degree>) \|rotateX(<angle/degree>) \|rotateY(<angle/degree>) \|rotateZ(<angle/degree>) \|rotate3D(<angle/degree>, <number>, <number>,<number>) \|transform-origin (center) \|matrix(n,n,n,n,n,n)	translateX({<length/percentage>}): Translate in the X-axis direction. Unit: length or percentage. translateY({<length/percentage>}):Y-axis translation. Unit: length or percentage. translate({<length/percentage>} {<length/percentage>}): translates the data in both the X-axis and Y-axis directions. The translation is abbreviated as translateX + translateY. scaleX(<number>): scales in the X-axis direction. The value is a numeric value that indicates the scaling ratio. Percentage is not supported. scaleY(<number>): scales in the Y-axis direction. The value is a numeric value that indicates the scaling ratio. Percentage is not supported. scale(<number>): scales the data in both the X-axis and Y-axis directions. It is abbreviated as scaleX + scaleY. rotate(<degree>): A transform that rotates the element around a fixed point (specified by the transform-origin property) without deforming it. The specified angle defines the measure of rotation. If the angle is positive, it rotates clockwise, otherwise it rotates counterclockwise. transform-origin: specifies the origin of an element to be deformed. Only center is supported. matrix:2D transformation matrix translateZ and rotateZ take effect only when the transform-style value is preserve-3d. translateZ does not support the percent expression.
transform-origin	string	center	left, right, top, bottom, center, and numeric values
transform-style	string	flat	preserve-3d, flat
perspective	length	none	none \| <length>	must be positive, negative, or 0 is the same as none effect.
perspective-origin	string	center	left, right, top, bottom, center, and numeric values

Transform usage example

.transform {
    align-items: center;
    transform: translate(150px, 200px) rotate(20deg);
    transform-origin: 0 -250px;
    border-color:red;
    border-width:2px;
  }

3D animation example

Example:

.div {
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateZ(30deg) translateZ(-50px);
    perspective: 600px;
}

3D animation constraints

Animation nesting is limited to 2 layers (that is, the parent and child nodes have animation at the same time). If the parent, child, and grandchild nodes have 3D animation at the same time, the final effect may be limited.
For Android client effects, due to platform limitations, View cannot be divided, and View can only display all or be covered.
- The Android effect: A face2 completely covers face1.
- CSS, iOS can achieve the effect: face 1 and face 2 cross each other.

Property	Data type	Default value	Valid value	Writing
animation-name	string			animation-name: demo;
animation-duration	number	0		animation-duration: 100;
animation-delay	number	0		animation-delay: 200;
animation-timing-function	string	ease	ease,ease-in,ease-out,ease-in-out,linear,cubic-bezier(x1,y1,x2,y2)	animation-timing-function: ease-in;
animation-timing-function	string	ease		animation-timing-function: cubic-bezier(0.3, 0.3, 0.9, 0.9);
animation-iteration-count	number		Value ifinite (equivalent to 9999)	animation-iteration-count: infinite;
animation-iteration-count	number		Value ifinite (equivalent to 9999)	animation-iteration-count: 10;
animation-direction	enum	normal	normal,alternate	animation-direction: alternate;
animation-fill-mode	enum	forwards	forwards,backwards,both,none	animation-fill-mode: backwards;

Animation usage example

.moving-node01 {
  width: 200rpx;
  height: 100rpx;
  background-color: red;
  margin-top: 50rpx;
  animation-name: moving-horizontal;
  animation-duration: 5000ms;
  animation-delay: 2000ms;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
}

KeyFrame animation

<template>
  <div class="root">
    <div class="line">
      <div class="subline"></div>
    </div>
  </div>
</template>

<script>
          const animation=requireModule ("animation"); // Obtain the module.
    const keyframes = {
        'moving-horizontal': {
            "transform": [
                {
                    "p":0,
                    "v":"translateX(-200px)"
                },
                {
                    "p":0.5,
                    "v":"translateX(-100px)"
                },
                {
                    "p": 1.0,
                    "v": "translateX(0px)"
                }
            ]
        }
    };
    animation.loadKeyframes(keyframes); // Load the module.
</script>


<style>
    .root {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .line{
        width:200px;
        height:10px;
        overflow: hidden;    
        background-color:gray;
    }
    .subline{
        transform:translate(-200px,0px);
        width:200px;
        height:10px;
        background-color:red; 
        
        animation-name: moving-horizontal;
        animation-duration: 2000ms;
        animation-delay: 000ms;
        animation-timing-function: linear;
    }
</style>

Animation end callback

The node defines the event @ on-animationEnd. After the animation ends, the corresponding method is called back to pass in the parameter {"status":"finish/interrupt"}. finish indicates that the animation is finished. cancel indicates that the animation is interrupted or canceled.

Sample code:

<template>
  <div class="root">
    <div class="anim_node" @on-animationEnd="onAnimationEnd()"></div>
  </div>
</template>

 <script>
   ...
  methods: {
    onAnimationEnd(param){
      if(param.status == "finish") {
         console.info("Animation execution completed");
      } else if (param.status == "interrupt") {
         console.info("animation interrupted or canceled");
      }
    },
  },
};
</script>

<style>
  ...
</style>

Precautions

Note the following points when using animated properties:

The root node does not support animation.
Animation (input, slider, and so on) is not supported for entity components and add-ins.
Skew animation is not supported. The effect implementation can be replaced by matrix.
The CSS animation is not valid when submitted during the KeyFrame animation.
The iOS platform does not support gestures during the movement and can only respond after it is finished.

Example code

Click here detailTransitionAnimation.zip for the complete example code.