my.createAnimation

2023-03-28 12:11

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

//.json
{
    "defaultTitle": "Animation"
}

copy

<!-- .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>

copy

//.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

.animation-element {
  width: 200rpx;
  height: 200rpx;
  background-color: #108ee9;
  transform: scaleX(1) scaleY(1);
}

Parameters

Object type with the following attributes:

Property	Type	Required	Description
duration	Integer	No	Animation duration, in ms, 400 by default.
timeFunction	String	No	Define animation effect, linear by default, effective values including linear, ease, ease-in, ease-in-out, ease-out, step-start and step-end .
delay	Integer	No	Animation delay, in ms, 0 by default.
transformOrigin	String	No	Set 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

Method	Parameters	Description
opacity	value	Transparency, range 0~1.
backgroundColor	color	Color value.
width	length	Set the width:length values, in px, such as 300 px.
height	length	Set the height:length values, in px, such as 300 px.
top	length	Set the top:length values, in px, such as 300 px.
left	length	Set the left:length values, in px, such as 300 px.
bottom	length	Set the bottom:length values, in px, such as 300 px.
right	length	Set the right:length values, in px, such as 300 px.

Rotation

Method	Parameters	Description
rotate	deg	Deg range -180 ~ 180, rotate by deg degrees clockwise from origin.
rotateX	deg	Deg range -180 ~ 180, rotate by deg degrees on X axis.
rotateY	deg	Deg range -180 ~ 180, rotate by deg degrees on Y axis.
rotateZ	deg	Deg range -180 ~ 180, rotate by deg degrees on Z axis.
rotate3d	(x, y , z, deg)	Same as transform-function rotate3d.

Scale

Method	Parameters	Description
scale	sx,[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.
scaleX	sx	Scale sx times on X axis.
scaleY	sy	Scale sy times on Y axis.
scaleZ	sz	Scale 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

Method	Parameters	Description
translate	tx,[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.
translateX	tx	Translate by tx on X axis, in px.
translateY	ty	Translate by ty on Y axis, in px.
translateZ	tz	Translate 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

Method	Parameters	Description
skew	ax,[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.
skewX	ax	Range -180~180 Y stays unchanged and X skews by ax degrees clockwise. Degree.
skewY	ay	Range -180~180 X stays unchanged and Y skews by ay degrees clockwise.

Matrix transformation

Method	Parameters	Description
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.