tencent cloud

PrevNext

文档反馈

请输入关键字

Recent Pages

文档
腾讯云小程序平台
    文档
    Download PDF

    动画

    最后更新时间：2024-03-05 14:52:08
    下载PDF

      createAnimation

      该 API 使用方法为 wx.createAnimation(Object object)
      功能说明：创建一个动画实例 animation。调用实例的方法来描述动画。最后通动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
      参数及说明：Object object。
      属性
      类型
      默认值
      必填
      说明
      duration
      number
      400
      否
      动画持续时间，单位：ms
      timingFunction
      string
      'linear'
      否
      动画的效果
      delay
      number
      0
      否
      动画延迟时间，单位：ms
      transformOrigin
      string
      '50% 50% 0'
      否
      -
      timingFunction 的合法值
      值
      说明
      'linear'
      动画从头到尾的速度是相同的
      'ease'
      动画以低速开始，然后加快，在结束前变慢
      'ease-in'
      动画以低速开始
      'ease-in-out'
      动画以低速开始和结束
      'ease-out'
      动画以低速结束
      'step-start'
      动画第一帧就跳至结束状态直到结束
      'step-end'
      动画一直保持开始状态，最后一帧跳到结束状态
      返回值：Animation。

      Animation

      动画对象

      示例代码

      对应的 WXML 文件
      <view
        animation="{{animationData}}"
        style="background:red;height:100rpx;width:100rpx"
      ></view>
      对应的 js 文件
      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() {
          // 旋转同时放大
          this.animation.rotate(45).scale(2, 2).step()
          this.setData({
            animationData: this.animation.export()
          })
        },
        rotateThenScale() {
          // 先旋转后放大
          this.animation.rotate(45).step()
          this.animation.scale(2, 2).step()
          this.setData({
            animationData: this.animation.export()
          })
        },
        rotateAndScaleThenTranslate() {
          // 先旋转同时放大，然后平移
          this.animation.rotate(45).scale(2, 2).step()
          this.animation.translate(100, 100).step({duration: 1000})
          this.setData({
            animationData: this.animation.export()
          })
        }
      })

      .backgroundColor

      该 方法 使用方式为 Animation Animation.backgroundColor(string value)
      功能说明：设置背景色。
      参数及说明：string value，颜色值。
      返回值：Animation。

      .bottom

      该 方法 使用方式为 Animation Animation.bottom(number|string value)
      功能说明：设置 bottom 值。
      参数及说明：number|string value，长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值。
      返回值：Animation。

      .export

      该 API 方法的使用方法为 Object Animation.export()
      功能说明：导出动画队列。export 方法每次调用后会清掉之前的动画操作。
      返回值：Object，animationData。
      属性
      类型
      actions
      Array.<Object>

      .height

      该 方法 使用方式为 Animation Animation.height(number|string value)
      功能说明：设置高度。
      参数及说明：number|string value，长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值。
      返回值：Animation。

      .left

      该 方法 使用方式为 Animation Animation.left(number|string value)
      功能说明：设置 left 值。
      参数及说明：number|string value，长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值。
      返回值：Animation。

      .matrix

      该 API 使用方法为 Animation Animation.matrix()
      功能说明：同 transform-function matrix一致。
      返回值：Animation。

      .matrix3d

      该 API 使用方法为 Animation Animation.matrix3d()
      功能说明：同 transform-function matrix一致。
      返回值：Animation。

      .opacity

      该 方法 使用方式为 Animation Animation.opacity(number value)
      功能说明：设置透明度。
      参数及说明：number value，透明度，范围 0-1。
      返回值：Animation。
      该 方法 使用方式为 Animation Animation.right(number|string value)
      功能说明：设置 right 值。
      参数及说明：number|string value，长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值。
      返回值：Animation。

      .rotate

      该 API 使用方法为
      功能说明：从原点顺时针旋转一个角度，使用方法为 Animation Animation.rotate(number angle)。
      参数及说明：number angle，旋转的角度。范围 [-180, 180]。
      返回值：Animation。

      .rotate3d

      该 API 使用方法为 Animation Animation.rotate3d(number x, number y, number z, number angle)
      功能说明：从固定轴顺时针旋转一个角度。
      参数及说明：number x，旋转轴的 x 坐标；number y，旋转轴的 y 坐标；number z，旋转轴的 z 坐标；number angle，旋转的角度。范围 [-180, 180]。
      返回值：Animation。

      .rotateX

      该 API 使用方法为 Animation Animation.rotateX(number angle)
      功能说明：从 X 轴顺时针旋转一个角度。
      参数及说明：number angle，旋转的角度。范围 [-180, 180]。
      返回值：Animation。

      .rotateY

      该 方法 使用方式为 Animation Animation.rotateY(number angle)
      功能说明：从 Y 轴顺时针旋转一个角度。
      参数及说明：number angle，旋转的角度。范围 [-180, 180]。
      返回值：Animation。

      .rotateZ

      该 方法 使用方式为 Animation Animation.rotateZ(number angle)
      功能说明：从 Z 轴顺时针旋转一个角度。
      参数及说明：number angle，旋转的角度。范围 [-180, 180]。
      返回值：Animation。

      .scale

      该 方法 使用方式为 Animation Animation.scale(number sx, number sy)
      功能说明：缩放。
      参数及说明：number sx，当仅有 sx 参数时，表示在 X 轴、Y 轴同时缩放sx倍数；number sy，在 Y 轴缩放 sy 倍数。
      返回值：Animation。

      .scale3d

      该 方法 使用方式为 Animation Animation.scale3d(number sx, number sy, number sz)
      功能说明：缩放。
      参数及说明：number sx，当仅有 sx 参数时，表示在 X 轴、Y 轴同时缩放sx倍数；number sy，在 Y 轴缩放 sy 倍数。
      返回值：Animation。

      .scaleX

      该 方法 使用方式为 Animation Animation.scaleX(number scale)
      功能说明：缩放 X 轴。
      参数及说明：number scale，X 轴的缩放倍数。
      返回值：Animation。

      scaleY

      该 方法 使用方式为 Animation Animation.scaleY(number scale)
      功能说明：缩放 Y 轴。
      参数及说明：number scale，Y 轴的缩放倍数。
      返回值：Animation。

      .scaleZ

      该 方法 使用方式为 Animation Animation.scaleZ(number scale)
      功能说明：缩放 Z 轴。
      参数及说明：number scale，Z 轴的缩放倍数。
      返回值：Animation。

      .skew

      该 方法 使用方式为 Animation Animation.skew(number ax, number ay)
      功能说明：对 X、Y 轴坐标进行倾斜。
      参数及说明：number sx，当仅有 sx 参数时，表示在 X 轴、Y 轴同时缩放sx倍数；number sy，在 Y 轴缩放 sy 倍数。
      返回值：

      .skewX

      该 方法 使用方式为 Animation Animation.skewX(number angle)
      功能说明：对 X 轴坐标进行倾斜。
      参数及说明：number scale，X 轴的缩放倍数。
      返回值：Animation。

      .skewY

      该 方法 使用方式为 Animation Animation.skewY(number angle)
      功能说明：对 Y 轴坐标进行倾斜。
      参数及说明：number scale，Y 轴的缩放倍数。
      返回值：Animation。

      .step

      该 API 使用方法为 Animation Animation.step(Object object)
      功能说明：表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。
      参数及说明：Object object。
      属性
      类型
      默认值
      必填
      说明
      duration
      number
      400
      否
      动画持续时间，单位 ms
      timingFunction
      string
      'linear'
      否
      动画的效果
      delay
      number
      0
      否
      动画延迟时间，单位 ms
      transformOrigin
      string
      '50% 50% 0'
      否
      -
      timingFunction 的合法值
      值
      说明
      'linear'
      动画从头到尾的速度是相同的
      'ease'
      动画以低速开始，然后加快，在结束前变慢
      'ease-in'
      动画以低速开始
      'ease-in-out'
      动画以低速开始和结束
      'ease-out'
      动画以低速结束
      'step-start'
      动画第一帧就跳至结束状态直到结束
      'step-end'
      动画一直保持开始状态，最后一帧跳到结束状态
      返回值：Animation。

      .top

      该 方法 使用方式为 Animation Animation.top(number|string value)
      功能说明：设置 top 值。
      参数及说明：number|string value，长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值。
      返回值：Animation。

      .translate

      该 方法 使用方式为 Animation Animation.translate(number tx, number ty)
      功能说明：平移变换。
      参数及说明：number tx，当仅有该参数时表示在 X 轴偏移 tx，单位 px；number ty，在 Y 轴平移的距离，单位为 px。
      返回值：Animation。

      .translate3d

      该 方法 使用方式为 Animation Animation.translate3d(number tx, number ty, number tz)
      功能说明：对 xyz 坐标进行平移变换。
      参数及说明：number tx，当仅有该参数时表示在 X 轴偏移 tx，单位 px；number ty，在 Y 轴平移的距离，单位为 px。
      返回值：Animation。

      .translateX

      该 方法 使用方式为 Animation Animation.translateX(number translation)
      功能说明：对 X 轴平移。
      参数及说明：number translation，在 X 轴平移的距离，单位为 px。
      返回值：Animation。

      .translateY

      该 方法 使用方式为 Animation Animation.translateY(number translation)
      功能说明：对 Y 轴平移。
      参数及说明：number translation，在 Y 轴平移的距离，单位为 px。
      返回值：Animation。

      .translateZ

      该 方法 使用方式为 Animation Animation.translateZ(number translation)
      功能说明：对 Z 轴平移。
      参数及说明：number translation，在 Z 轴平移的距离，单位为 px。
      返回值：Animation。

      .width

      该 方法 使用方式为 Animation Animation.width(number|string value)
      功能说明：设置宽度，使用方法为。
      参数及说明：number|string value，长度值，如果传入 number 则默认使用 px，可传入其他自定义单位的长度值。
      返回值：Animation。
      联系我们

      联系我们，为您的业务提供专属服务。

      联系我们
      技术支持

      如果你想寻求进一步的帮助，通过工单与我们进行联络。我们提供7x24的工单服务。

      提交工单
      7x24 电话支持
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      隐私条款服务条款缓存条款