Animation()

Requires:
Base Library≥2.21.8

Description

Animation instance used to create and describe animation effects. Call instance methods to define the animation, then export the animation data with the export method and pass it to the component's animation property

Parameters

None

Return Value

Type: Animation
Animation instance

Methods

MethodDescription
exportExport the animation queue. Each call to export clears previous animation operations
stepMarks completion of a group of animations. You can call any number of animation methods within a group; all animations in a group start simultaneously, and the next group runs only after the current one completes
matrixSame as CSS transform matrix
matrix3dSame as CSS transform matrix3d
rotateRotate by an angle, range -180~180
rotate3dRotate clockwise by an angle around a fixed axis
rotateXRotate by an angle around the X axis
rotateYRotate by an angle around the Y axis
rotateZRotate by an angle around the Z axis
scaleScale
scale3d3D scaling
scaleXScale the X axis
scaleYScale the Y axis
scaleZScale the Z axis
skewSkew along the X and Y axes
skewXSkew along the X axis
skewYSkew along the Y axis
translateTranslation
translate3d3D translation
translateXTranslate along the X axis
translateYTranslate along the Y axis
translateZTranslate along the Z axis
opacitySet opacity
backgroundColorSet background color
widthSet width
heightSet height
leftSet left value
rightSet right value
topSet top value
bottomSet bottom value

Examples

Basic usage

Page({
  data: {
    animationData: {},
  },
  onReady() {
    this.animation = ty.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    });
  },
  handleTap() {
    this.animation.scale(2, 2).rotate(45).step();
    this.setData({ animationData: this.animation.export() });
  },
});