原生小程序开发 API｜界面动画 API 汇总（二）

ty.createAnimation

创建一个动画实例 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

示例代码

<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="animation-element-wrapper">
        <view class="animation-element" animation="{{animation}}"></view>
      </view>
      <view class="animation-buttons" scroll-y="true">
        <button class="animation-button" bind:tap="rotate">旋转</button>
        <button class="animation-button" bind:tap="scale">缩放</button>
        <button class="animation-button" bind:tap="translate">移动</button>
        <button class="animation-button" bind:tap="skew">倾斜</button>
        <button class="animation-button" bind:tap="rotateAndScale">旋转并缩放</button>
        <button class="animation-button" bind:tap="rotateThenScale">旋转后缩放</button>
        <button class="animation-button" bind:tap="all">同时展示全部</button>
        <button class="animation-button" bind:tap="allInQueue">顺序展示全部</button>
        <button class="animation-button animation-button-reset" bind:tap="reset">还原</button>
      </view>
    </view>
  </view>
</view>

Page({
  data: {
    animation: [],
  },
  onReady: function () {
    this.animation = ty.createAnimation();
  },
  rotate: function () {
    this.animation.rotate(Math.random() * 720 - 360).step();
    let anim = this.animation.export();
    this.setData({ animation: anim });
    console.log(anim);
  },
  scale: function () {
    this.animation.scale(Math.random() * 2).step();
    let anim = this.animation.export();
    this.setData({ animation: anim });
    console.log(anim);
  },
  translate: function () {
    this.animation
      .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
      .step();
    let anim = this.animation.export();
    this.setData({ animation: anim });
    console.log(anim);
  },
  skew: function () {
    this.animation.skew(Math.random() * 90, Math.random() * 90).step();
    let anim = this.animation.export();
    this.setData({ animation: anim });
    console.log(anim);
  },
  rotateAndScale: function () {
    this.animation
      .rotate(Math.random() * 720 - 360)
      .scale(Math.random() * 2)
      .step();
    let anim = this.animation.export();
    this.setData({ animation: anim });
    console.log(anim);
  },
  rotateThenScale: function () {
    this.animation
      .rotate(Math.random() * 720 - 360)
      .step()
      .scale(Math.random() * 2)
      .step();
    let anim = this.animation.export();
    this.setData({ animation: anim });
    console.log(anim);
  },
  all: function () {
    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();
    let anim = this.animation.export();
    this.setData({ animation: anim });
    console.log(anim);
  },
  allInQueue: function () {
    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();
    let anim = this.animation.export();
    this.setData({ animation: anim });
    console.log(anim);
  },
  reset: function () {
    this.animation
      .rotate(0, 0)
      .scale(1)
      .translate(0, 0)
      .skew(0, 0)
      .step({ duration: 0 });
    let anim = this.animation.export();
    this.setData({ animation: anim });
    console.log(anim);
  },
});

 👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。