支付宝小程序API 动画·Animation

2020-09-14 14:04 更新

my.createAnimation

简介

my.createAnimation 是用于创建动画实例 animation 的 API。调用实例的方法来描述动画,最后通过动画实例的 export 方法将动画数据导出并传递给组件的 animation 属性。

使用限制

调用 export 方法后,之前的动画操作将会被清除。

扫码体验

动画.jpeg

示例代码

// API-DEMO page/API/animation/animation.json
{
    "defaultTitle": "Animation"
}
<!-- API-DEMO page/API/animation/animation.axml-->
<view class="page">
  <view class="page-description">动画 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">旋转</view>
      <view type="primary" onTap="scale"> 缩放</view>
      <view type="primary" onTap="translate">移动</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="skew">倾斜</view>
      <view type="primary" onTap="rotateAndScale">旋转并缩放</view>
      <view type="primary" onTap="rotateThenScale">旋转后缩放</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="all">同时展示全部</view>
      <view type="primary" onTap="allInQueue">顺序展示全部</view>
      <view type="primary" onTap="reset">还原</view>
    </view>
  </view>
</view>
// 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() })
  }
})
/* API-DEMO page/API/animation/animation.acss */
.animation-element {
  width: 200rpx;
  height: 200rpx;
  background-color: #108ee9;
  transform: scaleX(1) scaleY(1);
}

入参

Object 类型,属性如下:

属性 类型 必填 描述
duration Integer 动画的持续时间,单位 ms,默认值 400。
timeFunction String 定义动画的效果,默认值“linear”,有效值:linear、ease、ease-in、ease-in-out、ease-out、step-start、step-end。
delay Integer 动画延迟时间,单位 ms,默认值 0。
transformOrigin String 设置 transform-origin,默认值“50% 50% 0”。

示例代码

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

animation

动画实例可以调用以下方法来描述动画,调用结束后会返回实例本身,支持链式调用的写法。view 的 animation 属性初始化为 {} 时,在基础库 1.11.0(不包含 1.11.0)及以下版本会报错,建议初始化为 null

样式
方法 参数 说明
opacity value 透明度,参数范围 0~1。
backgroundColor color 颜色值。
width length 设置宽度:长度值,单位为 px,例如:300 px。
height length 设置高度:长度值,单位为 px,例如:300 px。
top length 设置 top 值:长度值,单位为 px,例如:300 px。
left length 设置 left 值:长度值,单位为 px,例如:300 px。
bottom length 设置 bottom 值:长度值,单位为 px,例如:300 px。
right length 设置 right 值:长度值,单位为 px,例如:300 px。

旋转
方法 参数 说明
rotate deg deg 范围 -180 ~ 180,从原点顺时针旋转一个 deg 角度。
rotateX deg deg 范围 -180 ~ 180,在 X 轴旋转一个 deg 角度。
rotateY deg deg 范围 -180 ~ 180,在 Y 轴旋转一个 deg 角度。
rotateZ deg deg 范围 -180 ~ 180,在 Z 轴旋转一个 deg 角度。
rotate3d (x, y , z, deg) 同 transform-function rotate3d。

缩放
方法 参数 说明
scale sx,[sy] 只有一个参数时,表示在 X 轴、Y 轴同时缩放 sx 倍;两个参数时表示在 X 轴缩放 sx 倍,在 Y 轴缩放 sy 倍。
scaleX sx 在 X 轴缩放 sx 倍。
scaleY sy 在 Y 轴缩放 sy 倍。
scaleZ sz 在 Z 轴缩放 sy 倍。
scale3d (sx,sy,sz) 在 X 轴缩放 sx 倍,在 Y 轴缩放 sy 倍,在 Z 轴缩放 sz 倍。

偏移
方法 参数 说明
translate tx,[ty] 只有一个参数时,表示在 X 轴偏移 tx;两个参数时,表示在 X 轴偏移 tx,在 Y 轴偏移 ty,单位均为 px。
translateX tx 在 X 轴偏移 tx,单位 px。
translateY ty 在 Y 轴偏移 tx,单位 px。
translateZ tz 在 Z 轴偏移 tx,单位 px。
translate3d (tx,ty,tz) 在 X 轴偏移 tx,在 Y 轴偏移 ty,在 Z 轴偏移 tz,单位 px。

倾斜
方法 参数 说明
skew ax,[ay] 参数范围 -180 ~ 180。只有一个参数时,Y 轴坐标不变,X 轴坐标延顺时针倾斜 ax 度;两个参数时,分别在 X 轴倾斜 ax 度,在 Y 轴倾斜 ay 度。
skewX ax 参数范围 -180 ~ 180。Y 轴坐标不变,X 轴坐标延顺时针倾斜 ax 度。
skewY ay 参数范围 -180~180。X 轴坐标不变,Y 轴坐标延顺时针倾斜 ay 度。

矩阵变形
方法 参数 说明
matrix (a,b,c,d,tx,ty) 同 transform-function
matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) 同 transform-function matrix3d

动画队列

  • 调用动画操作方法后,需调用 step() 用于表示一组动画完成,在一组动画中可以调用任意多个动画方法,一组动画中的所有动画会同时开始,当一组动画完成后才会进行下一组动画。
  • step() 可以传入一个跟 my.createAnimation() 一样的配置参数用于指定当前组动画的配置。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号