tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Cloud Mini Program Platform
    Documentation
    Download PDF

    Animation

    Last updated: 2024-11-21 18:41:53
    Download PDF

      createAnimation

      This API is used via wx.createAnimation(Object object).
      Feature Description: Creates an animation instance animation and invokes the instance's methods to depict the animation, before ultimately exporting the animation data through the instance's export method and passing it to the component's animation attribute.
      Parameter and Description: Object.
      Attribute
      Type
      Default value
      Required
      Note
      duration
      number
      400
      No
      Animation duration, measured in milliseconds.
      timingFunction
      string
      'linear'
      No
      Animation effect
      delay
      number
      0
      No
      Animation delay duration, measured in milliseconds.
      transformOrigin
      string
      '50% 50% 0'
      No
      -
      Valid values of timingFunction
      Value
      Note
      'linear'
      The animation maintains a consistent speed from beginning to end.
      'ease'
      The animation starts at a slow pace, then accelerates, and finally decelerates before concluding.
      'ease-in'
      The animation starts at a slow pace.
      'ease-in-out'
      The animation starts and concludes at a slow pace.
      'ease-out'
      The animation concludes at a slow pace.
      'step-start'
      The animation leaps to its concluding state from the very first frame and maintains this until the end.
      'step-end'
      The animation consistently maintains its initial state, leaping to its concluding state only in the final frame.
      Return Value：Animation.

      Animation

      Animation object.

      Sample code

      Corresponding WXML file
      <view
        animation="{{animationData}}"
        style="background:red;height:100rpx;width:100rpx"
      ></view>
      Corresponding js file
      Page({
        data: {
          animationData: {}
        },
        onShow() {
          const animation = wx.createAnimation({
            duration: 1000,
            timingFunction: 'ease',
          })
      
          this.animation = animation
      
          animation.scale(2, 2).rotate(45).step()
      
          this.setData({
            animationData: animation.export()
          })
      
          setTimeout(function () {
            animation.translate(30).step()
            this.setData({
              animationData: animation.export()
            })
          }.bind(this), 1000)
        },
        rotateAndScale() {
          // Simultaneous rotation and enlargement
          this.animation.rotate(45).scale(2, 2).step()
          this.setData({
            animationData: this.animation.export()
          })
        },
        rotateThenScale() {
          // Rotate first, then enlarge.
          this.animation.rotate(45).step()
          this.animation.scale(2, 2).step()
          this.setData({
            animationData: this.animation.export()
          })
        },
        rotateAndScaleThenTranslate() {
          // Simultaneous rotation and enlargement before translation
          this.animation.rotate(45).scale(2, 2).step()
          this.animation.translate(100, 100).step({duration: 1000})
          this.setData({
            animationData: this.animation.export()
          })
        }
      })

      .backgroundColor

      The method is used via Animation.Animation.backgroundColor(string value).
      Feature Description: Sets the background color.
      Parameter and Description: string value, color value.
      Return Value：Animation.

      .bottom

      This method is used via Animation.Animation.bottom(number|string value).
      Feature Description: Sets the bottom value.
      Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
      Return Value：Animation.

      .export

      This API is used via Object Animation.export().
      Feature Description: Exports the animation queue. The export method will clear the previous animation operations each time it is called.
      Return Value: Object, animationData.
      Attribute
      Type
      actions
      Array.<Object>

      .height

      This method is used via Animation Animation.height(number|string value).
      Feature Description: Sets height.
      Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
      Return Value：Animation.

      .left

      This method is used via Animation Animation.left(number|string value).
      Feature Description: Sets the left value.
      Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
      Return Value：Animation.

      .matrix

      This API is used via Animation Animation.matrix().
      Feature Description: Consistent with transform-function matrix.
      Return Value：Animation.

      .matrix3d

      This API is used via Animation Animation.matrix3d()
      Feature Description: Consistent with transform-function matrix.
      Return Value：Animation.

      .opacity

      This method is used via Animation Animation.opacity(number value).
      Feature Description: Sets the opacity.
      Parameter and Description: number value, opacity, ranging from 0 to 1.
      Return Value：Animation.
      This method is used via Animation Animation.right(number|string value).
      Feature Description: Sets the right value.
      Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
      Return Value：Animation.

      .rotate

      This API is used via Animation Animation.rotate(number angle).
      Feature Description: Rotate one angle clockwise from the origin.
      Parameter and Description: number angle, the degree of rotation. Range [-180, 180].
      Return Value：Animation.

      .rotate3d

      This API is used via Animation Animation.rotate3d(number x, number y, number z, number angle).
      Feature Description: Rotates a degree clockwise from a fixed axis.
      Parameter and Description: number x, the x-coordinate of the rotation axis; number y, the y-coordinate of the rotation axis; number z, the z-coordinate of the rotation axis; number angle, the degree of rotation. Range [-180, 180].
      Return Value：Animation.

      .rotateX

      This API is used via Animation Animation.rotateX(number angle).
      Feature Description: Rotates a degree clockwise from the X-axis.
      Parameter and Description: number angle, the degree of rotation. Range [-180, 180].
      Return Value：Animation.

      .rotateY

      This method is used via Animation Animation.rotateY(number angle).
      Feature Description: Rotates a degree clockwise from the Y-axis.
      Parameter and Description: number angle, the degree of rotation. Range [-180, 180].
      Return Value：Animation.

      .rotateZ

      This Method is used via Animation Animation.rotateZ(number angle).
      Feature Description: Rotates a degree clockwise from the Z-axis.
      Parameter and Description: number angle, the degree of rotation. Range [-180, 180].
      Return Value：Animation.

      .scale

      This method is used via Animation Animation.scale(number sx, number sy).
      Feature Description: Scaling.
      Parameter and Description: number sx, when only sx parameter is present, it indicates scaling on the X and Y axes simultaneously by sx times; number sy, scaling on the Y axis by sy times.
      Return Value：Animation.

      .scale3d

      This method is used via Animation Animation.scale3d(number sx, number sy, number sz).
      Feature Description: Scaling.
      Parameter and Description: number sx, the scaling factor for the x-axis; number sy, the scaling factor for the y-axis; number sz, the scaling factor for the z-axis.
      Return Value：Animation.

      .scaleX

      This method is used via Animation Animation.scaleX(number scale).
      Feature Description: Scaling on the X-axis.
      Parameter and Description: number scale, the scaling factor on the X-axis.
      Return Value：Animation.

      scaleY

      This method is used via Animation Animation.scaleY(number scale).
      Feature Description: Scaling on the Y-axis.
      Parameter and Description: number scale, the scaling factor on the Y-axis.
      Return Value：Animation.

      .scaleZ

      This method is used via Animation Animation.scaleZ(number scale).
      Feature Description: Scaling on the Z-axis.
      Parameter and Description: number scale, the scaling factor on the Z-axis.
      Return Value：Animation.

      .skew

      This method is used via Animation Animation.skew(number ax, number ay).
      Feature Description: Skews the coordinates on the X and Y axes.
      Parameter and Description: number ax, tilt angle to X-axis coordinates, range [-180, 180]; number ay, tilt angle to Y-axis coordinates, range [-180, 180].
      Return Value：Animation.

      .skewX

      This Method is used via Animation Animation.skewX(number angle).
      Feature Description: Skews the coordinates on the X-axis.
      Parameter and Description: number angle, tilt angle, range [-180, 180].
      Return Value：Animation.

      .skewY

      This method is used via Animation Animation.skewY(number angle).
      Feature Description: Skews the coordinates on the Y-axis.
      Parameter and Description: number angle, tilt angle, range [-180, 180].
      Return Value：Animation.

      .step

      This API is used via Animation Animation.step(Object object).
      Feature Description: Indicates the completion of a set of animations. Any number of animation methods can be called within a set of animations. All animations in a set will start simultaneously, and the next set of animations will only proceed after the completion of the current set.
      Parameter and Description: Object.
      Attribute
      Type
      Default value
      Required
      Note
      duration
      number
      400
      No
      Animation duration, measured in milliseconds.
      timingFunction
      string
      'linear'
      No
      Animation effect
      delay
      number
      0
      No
      Animation delay duration, measured in milliseconds.
      transformOrigin
      string
      '50% 50% 0'
      No
      -
      Valid values of timingFunction
      Value
      Note
      'linear'
      The animation maintains a consistent speed from beginning to end.
      'ease'
      The animation starts at a slow pace, then accelerates, and finally decelerates before concluding.
      'ease-in'
      The animation starts at a slow pace.
      'ease-in-out'
      The animation starts and concludes at a slow pace.
      'ease-out'
      The animation concludes at a slow pace.
      'step-start'
      The animation leaps to its concluding state from the very first frame and maintains this until the end.
      'step-end'
      The animation consistently maintains its initial state, leaping to its concluding state only in the final frame.
      Return Value：Animation.

      .top

      This method is used via Animation Animation.top(number|string value).
      Feature Description: Sets the top value.
      Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
      Return Value：Animation.

      .translate

      This method is used via Animation Animation.translate(number tx, number ty).
      Feature Description: Translation and transformation.
      Parameter and Description: number tx, when this is the only parameter, it represents the offset on the X-axis by tx, measured in pixels; number ty, the distance of translation on the Y-axis, measured in pixels.
      Return Value：Animation.

      .translate3d

      This method is used via Animation Animation.translate3d(number tx, number ty, number tz).
      Feature Description: Performs a translation transformation on the xyz coordinates.
      Parameter and Description: number tx, when only this parameter is present, indicates an offset tx in the X-axis in px; number ty, the distance in the Y-axis in px; number tz, the distance in the Z-axis in px.
      Return Value：Animation.

      .translateX

      This method is used via Animation Animation.translateX(number translation).
      Feature Description: Performs a translation on the X-axis.
      Parameter and Description: number translation, the distance of translation on the X-axis, measured in pixels.
      Return Value：Animation.

      .translateY

      This method is used via Animation Animation.translateY(number translation).
      Feature Description: Performs a translation on the Y-axis.
      Parameter and Description: number translation, the distance of translation on the Y-axis, measured in pixels.
      Return Value：Animation.

      .translateZ

      This method is used via Animation Animation.translateZ(number translation).
      Feature Description: Performs a translation on the Z-axis.
      Parameter and Description: number translation, the distance of translation on the Z-axis, measured in pixels.
      Return Value：Animation.

      .width

      This method is used via Animation Animation.width(number|string value).
      Feature Description: Sets the width.
      Parameter and Description: number|string value, length value. If a number is passed in, px is used by default. Length values in other custom units can also be passed in.
      Return Value：Animation.
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy