my.createAnimation

Create an animation instance. Call the instance method to describe animation, and then use the export method of animation instance to export the animation data and transfer to the component animation attribute.

Note: After the export method is called, the previous animation operation will be cleared.

Sample Code

copy
    // API-DEMO page/API/animation/animation.json
    {
        "defaultTitle": "Animation"
    }undefined
copy
    <!-- API-DEMO page/API/animation/animation.axml-->
    <view class="page">
      <view class="page-description">Animation API</view>
      <view class="page-section">
        <view class="page-section-title">my.createAnimation</view>
        <view class="page-section-demo">
          <view class="animation-element" animation="{{animation}}"></view>
        </view>
        <view class="page-section-btns">
          <view type="primary" onTap="rotate">Rotate</view>
          <view type="primary" onTap="scale"> Scale</view>
          <view type="primary" onTap="translate">Translate</view>
        </view>
        <view class="page-section-btns">
          <view type="primary" onTap="skew">Skew</view>
          <view type="primary" onTap="rotateAndScale">Rotate and scale</view>
          <view type="primary" onTap="rotateThenScale">Rotate and then scale</view>
        </view>
        <view class="page-section-btns">
          <view type="primary" onTap="all">Expand all simultaneously </view>
          <view type="primary" onTap="allInQueue">Expand all in order</view>
          <view type="primary" onTap="reset">Reset</view>
        </view>
      </view>
    </view>undefined
copy
    // API-DEMO page/API/animation/animation.js
    Page({
      onReady() {
        this.animation = my.createAnimation()
      },
      rotate() {
        this.animation.rotate(Math.random() * 720 - 360).step()
        this.setData({ animation: this.animation.export() })
      },
      scale() {
        this.animation.scale(Math.random() * 2).step()
        this.setData({ animation: this.animation.export() })
      },
      translate() {
        this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
        this.setData({ animation: this.animation.export() })
      },
      skew() {
        this.animation.skew(Math.random() * 90, Math.random() * 90).step()
        this.setData({ animation: this.animation.export() })
      },
      rotateAndScale() {
        this.animation.rotate(Math.random() * 720 - 360)
          .scale(Math.random() * 2)
          .step()
        this.setData({ animation: this.animation.export() })
      },
      rotateThenScale() {
        this.animation.rotate(Math.random() * 720 - 360).step()
          .scale(Math.random() * 2).step()
        this.setData({ animation: this.animation.export() })
      },
      all() {
        this.animation.rotate(Math.random() * 720 - 360)
          .scale(Math.random() * 2)
          .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
          .skew(Math.random() * 90, Math.random() * 90)
          .step()
        this.setData({ animation: this.animation.export() })
      },
      allInQueue() {
        this.animation.rotate(Math.random() * 720 - 360).step()
          .scale(Math.random() * 2).step()
          .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
          .skew(Math.random() * 90, Math.random() * 90).step()
        this.setData({ animation: this.animation.export() })
      },
      reset() {
        this.animation.rotate3d(0, 0, 0, 0)
          .rotateX(0)
          .rotateY(0)
          .rotateZ(0)
          .scale(1)
          .translate(0, 0)
          .skew(0, 0)
          .step({ duration: 0 })
        this.setData({ animation: this.animation.export() })
      }
    })
copy
    /* API-DEMO page/API/animation/animation.acss */
    .animation-element {
      width: 200rpx;
      height: 200rpx;
      background-color: #108ee9;
      transform: scaleX(1) scaleY(1);
    }

Parameters

Object type with the following attributes:

ParametersTypeMandatoryDescription
durationIntegerNoAnimation duration, in ms, 400 by default
timeFunctionStringNoDefine animation effect, linear by default, effective values including linear, ease, ease-in, ease-in-out, ease-out, step-start and step-end
delayIntegerNoAnimation delay, in ms, 0 by default
transformOriginStringNoSet transform-origin, 50% 50% 0 by default

Sample Code

copy
    //.js
    const animation = my.createAnimation({
      transformOrigin: "top right",
      duration: 3000,
      timeFunction: "ease-in-out",
      delay: 100,
    })

Animation

The animation instance may call the following method to describe the animation. At the end of the call, the instance itself is returned. The chain call style is supported. When the view animation attribute is initialized as {}, error may appears on basic library 1.11.0 (not including 1.11.0) and lower version. It is recommended to initialize as null.

Style

MethodParametersDescription
opacityvalueTransparency, range 0~1
backgroundColorcolorColor value
widthlengthSet the width:length values, in px, such as 300 px
heightlengthSet the height:length values, in px, such as 300 px
toplengthSet the top:length values, in px, such as 300 px
leftlengthSet the left:length values, in px, such as 300 px
bottomlengthSet the bottom:length values, in px, such as 300 px
rightlengthSet the right:length values, in px, such as 300 px

Rotation

MethodParametersDescription
rotatedegdeg range -180 ~ 180, rotate by deg degrees clockwise from origin
rotateXdegdeg range -180 ~ 180, rotate by deg degrees on X axis
rotateYdegdeg range -180 ~ 180, rotate by deg degrees on Y axis
rotateZdegdeg range -180 ~ 180, rotate by deg degrees on Z axis
rotate3d(x, y , z, deg)Same as transform-function rotate3d

Scale

MethodParametersDescription
scalesx,[sy]When there is only one parameter, it indicates scaling sx times on X and Y axises at the same time.

When there are two parameters, it indicates scaling sx times on X axis and sy times on Y axis

scaleXsxScale sx times on X axis
scaleYsyScale sy times on Y axis
scaleZszScale sz times on Z axis
scale3d(sx,sy,sz)Scale sx times on X axis, sy times on Y axis and sz times on Z axis

Translate

MethodParametersDescription
translatetx,[ty]When there is only one parameter, it indicates translating by tx on X axis. When there are two parameters, it indicates translating by tx on X axis and ty on Y axis.
translateXtxTranslate by tx on X axis, in px
translateYtyTranslate by ty on Y axis, in px
translateZtzTranslate by tz on Z axis, in px
translate3d(tx,ty,tz)Translate by tx on X axis, ty on Y axis and tz on Z axis, in px

Skew

MethodParametersDescription
skewax,[ay]Range -180~180 When there is only one parameter, Y stays unchanged and X skews by ax degrees clockwise. When there are two parameters, X skews by ax degrees and Y skews by ay degrees.
skewXaxRange -180~180 Y stays unchanged and X skews by ax degrees clockwise. Degree
skewYayRange -180~180 X stays unchanged and Y skews by ay degrees clockwise.

Matrix transformation

MethodParametersDescription
matrix(a,b,c,d,tx,ty)Same as transform-function
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)Same as transform-function matrix3d

Animation Queue

• When the animation operation method is called, it is required to call step() to indicates the completion of a group of animations. Within a group of animation, it is possible to call any number of animation methods. All animations in the group start at the same time. It does not enter into the next group until the current animation group ends.
• The step() can transfer a configuration parameter that is the same as my.createAnimation(), which is used to specify the configuration of the current animation group.