小程序API能力集成指南——界面动画、滚动API汇总

动画API

Animation

动画对象

方法

Object Animation.export()

导出动画队列。export 方法每次调用后会清掉之前的动画操作。
参数： string value；颜色值
返回值：Object

animationData

属性	类型	说明
actions	`Array<object>`

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

Animation Animation.matrix()

同 transform-function matrix

设置背景色
参数： string value；颜色值
返回值：Animation

Animation Animation.matrix3d()

同 transform-function matrix3d
返回值：Animation

Animation Animation.rotate(number angle)

从原点顺时针旋转一个角度
参数： number angle；旋转的角度。范围 [-180, 180]
返回值：Animation

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

Animation Animation.rotateX(number angle)

从 X 轴顺时针旋转一个角度
参数： number angle；旋转的角度。范围 [-180, 180]
返回值：Animation

Animation Animation.rotateY(number angle)

从 Y 轴顺时针旋转一个角度
参数： number angle；旋转的角度。范围 [-180, 180]
返回值：Animation

Animation Animation.rotateZ(number angle)

从 Z 轴顺时针旋转一个角度
参数： number angle；旋转的角度。范围 [-180, 180]
返回值：Animation

Animation Animation.scale(number sx, number sy)

缩放

设置背景色
参数： string value；颜色值
返回值：Animation

Animation Animation.scale3d(number sx, number sy, number sz)

缩放
参数：
- number sx； x 轴的缩放倍数
- number sy； y 轴的缩放倍数
- number sz； z 轴的缩放倍数
返回值：Animation

Animation Animation.scaleX(number scale)

缩放 X 轴
参数： number scale； X 轴的缩放倍数
返回值：Animation

Animation Animation.scaleY(number scale)

缩放 Y 轴
参数： number scale； Y 轴的缩放倍数
返回值：Animation

Animation Animation.scaleZ(number scale)

缩放 Z 轴
参数： number scale； Z 轴的缩放倍数
返回值：Animation

Animation Animation.skew(number ax, number ay)

对 X、Y 轴坐标进行倾斜
参数：
- number ax ；对 X 轴坐标倾斜的角度，范围 [-180, 180]
- number ay ；对 Y 轴坐标倾斜的角度，范围 [-180, 180]
返回值：Animation

Animation Animation.skewX(number angle)

对 X 轴坐标进行倾斜
参数： number angle；倾斜的角度，范围 [-180, 180]
返回值：Animation

Animation Animation.skewY(number angle)

对 Y 轴坐标进行倾斜
参数： number angle；倾斜的角度，范围 [-180, 180]
返回值：Animation

Animation Animation.translate(number tx, number ty)

平移变换
参数：
- number tx; 当仅有该参数时表示在 X 轴偏移 tx，单位 px
- number ty; 在 Y 轴平移的距离，单位为 px
返回值：Animation

Animation Animation.translate3d(number tx, number ty, number tz)

对 xyz 坐标进行平移变换
参数：
- number tx; 在 X 轴平移的距离，单位为 px
- number ty; 在 Y 轴平移的距离，单位为 px
- number tz; 在 Z 轴平移的距离，单位为 px
返回值：Animation

Animation Animation.translateX(number translation)

对 X 轴平移
参数： number translation；在 X 轴平移的距离，单位为 px
返回值：Animation

Animation Animation.translateY(number translation)

对 Y 轴平移
参数： number translation；在 Y 轴平移的距离，单位为 px
返回值：Animation

Animation Animation.translateZ(number translation)

对 Z 轴平移
参数： number translation；在 Z 轴平移的距离，单位为 px
返回值：Animation

Animation Animation.opacity(number value)

设置透明度
参数： number value；透明度，范围 0-1
返回值：Animation

Animation Animation.backgroundColor(string value)

设置背景色
参数： string value；颜色值
返回值：Animation

Animation Animation.width(number value)

设置宽度
参数： number value；长度值
返回值：Animation

Animation Animation.height(number value)

设置高度
参数： number value；长度值
返回值：Animation

Animation Animation.left(number value)

设置 left 值
参数： number value；长度值
返回值：Animation

Animation Animation.right(number value)

设置 right 值
参数： number value；长度值
返回值：Animation

Animation Animation.top(number value)

设置 top 值
参数： number value；长度值
返回值：Animation

Animation Animation.bottom(number value)

设置 bottom 值
参数： number value；长度值
返回值：Animation

示例代码

<view animation="{{animationData}}" style="background:red;height:100px;width:100px"></view>

Page({
  data: {
    animationData: {},
  },
  onShow: function () {
    var animation = ty.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: function () {
    // 旋转同时放大
    this.animation.rotate(45).scale(2, 2).step();
    this.setData({
      animationData: this.animation.export(),
    });
  },
  rotateThenScale: function () {
    // 先旋转后放大
    this.animation.rotate(45).step();
    this.animation.scale(2, 2).step();
    this.setData({
      animationData: this.animation.export(),
    });
  },
  rotateAndScaleThenTranslate: function () {
    // 先旋转同时放大，然后平移
    this.animation.rotate(45).scale(2, 2).step();
    this.animation.translate(100, 100).step({ duration: 1000 });
    this.setData({
      animationData: this.animation.export(),
    });
  },
});

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);
  },
});

👉 立即开发。

滚动API

ty.pageScrollTo

将页面滚动到目标位置，支持选择器和滚动距离两种方式定位

参数

Object object

属性	类型	默认值	必填	说明
scrollTop	number		否	滚动到页面的目标位置，单位 px
duration	number	300	否	滚动动画的时长，单位 ms
selector	string		否	选择器
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）