Mobile Platform as a Service:Animation

Transition

Transition 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

Transform example

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

3D animation example

The following code provides a complete 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 two layers. This means that a parent node and a child node can have animations at the same time. If a parent node, a child node, and a grandchild node all have 3D animations, the animation of the grandchild node may not render as expected.

• Due to platform limitations, a View cannot be split on Android clients. This means a View can only be fully displayed or completely covered by another element. The following figure shows an example. On Android, face2 completely covers face1.

  The following figure shows the expected effect on CSS and iOS.

Animation

Animation 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 animations

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

<script>
          const animation = requireModule("animation"); // Get 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

You can define the @on-animationEnd event for a node. When the animation ends, a callback is triggered and passes the parameter {"status":"finish/interrupt"} to the corresponding method. The value `finish` indicates that the animation completed normally. The value `interrupt` indicates that the animation was interrupted or canceled.

Example:

<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 finished.");
      } else if (param.status == "interrupt") {
         console.info("Animation interrupted or canceled.");
      }
    },
  },
};
</script>

<style>
  ...
</style>

Notes

Note the following when you use animation properties:

• The root node does not support animations.

• Entity widgets and external widgets, such as input and slider, do not support animations.

• The skew animation is not supported. You can use the matrix property to achieve a similar effect.

• Applying a CSS animation while a keyframe animation is running has no effect.

• On iOS, gestures are not supported during an animation. The system responds to gestures only after the animation is complete.