swan.createAnimation

解释：创建一个动画实例 animation

方法参数

Object object

返回值

Animation

object参数说明

属性名类型必填默认值说明
durationNumber否400动画持续时间，单位 ms 。
timingFunctionString否‘linear’定义动画的效果
delayNumber否0动画延迟时间，单位 ms 。
transformOriginString否‘50% 50% 0’动画

timingFunction 有效值

值说明
linear以相同速度开始至结束。
ease慢速开始，然后变快，然后慢速结束。
ease-in慢速开始的过渡效果。
ease-in-out动画以低速开始和结束。
ease-out动画以低速结束。
step-start动画第一帧就跳至结束状态直到结束。
step-end动画一直保持开始状态，最后一帧跳到结束状态。

示例

扫码体验

swan.createAnimation - 图1请使用百度APP扫码

代码示例1 - 参数默认值

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  3. </view>
  1. Page({
  2.     data: {
  3.         animationData: {}
  4.     },
  5.     startToAnimate() {
  6.         const animation = swan.createAnimation();
  7.         animation.rotate(90).translateY(10).step();
  8.         animation.rotate(-90).translateY(-10).step();
  9.         this.setData({
  10.             animationData: animation.export()
  11.         });
  12.         console.log('createAnimation', animation);
  13.     }
  14. });

代码示例2 - timingFunction 为 ease

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  3. </view>
  1. Page({
  2.     data: {
  3.         animationData: {}
  4.     },
  5.     startToAnimate() {
  6.         const animation = swan.createAnimation({
  7.             transformOrigin: "50% 50%",
  8.             duration: 1000,
  9.             timingFunction: "ease",
  10.             delay: 0
  11.         });
  12.         animation.rotate(90).translateY(10).step();
  13.         this.setData({
  14.             animationData: animation.export()
  15.         });
  16.         console.log('createAnimation', animation);
  17.     }
  18. });

代码示例3 - timingFunction 为 ease-in

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  3. </view>
  1. Page({
  2.     data: {
  3.         animationData: {}
  4.     },
  5.     startToAnimate() {
  6.         const animation = swan.createAnimation({
  7.             transformOrigin: "50% 50%",
  8.             duration: 1000,
  9.             timingFunction: "ease-in",
  10.             delay: 0
  11.         });
  12.         animation.rotate(90).translateY(10).step();
  13.         animation.rotate(-90).translateY(-10).step();
  14.         this.setData({
  15.             animationData: animation.export()
  16.         });
  17.         console.log('createAnimation', animation);
  18.     }
  19. });

代码示例4 - timingFunction 为 ease-in-out

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  3. </view>
  1. Page({
  2.     data: {
  3.         animationData: {}
  4.     },
  5.     startToAnimate() {
  6.         const animation = swan.createAnimation({
  7.             transformOrigin: "50% 50%",
  8.             duration: 1000,
  9.             timingFunction: "ease-in-out",
  10.             delay: 0
  11.         });
  12.         animation.rotate(90).translateY(10).step();
  13.         animation.rotate(-90).translateY(-10).step();
  14.         this.setData({
  15.             animationData: animation.export()
  16.         });
  17.         console.log('createAnimation', animation);
  18.     }
  19. });

代码示例5 - timingFunction 为 ease-out

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  3. </view>
  1. Page({
  2.     data: {
  3.         animationData: {}
  4.     },
  5.     startToAnimate() {
  6.         const animation = swan.createAnimation({
  7.             transformOrigin: "50% 50%",
  8.             duration: 1000,
  9.             timingFunction: "ease-out",
  10.             delay: 0
  11.         });
  12.         animation.rotate(90).translateY(10).step();
  13.         animation.rotate(-90).translateY(-10).step();
  14.         this.setData({
  15.             animationData: animation.export()
  16.         });
  17.         console.log('createAnimation', animation);
  18.     }
  19. });

代码示例6 - timingFunction 为 step-start

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  3. </view>
  1. Page({
  2.     data: {
  3.         animationData: {}
  4.     },
  5.     startToAnimate() {
  6.         const animation = swan.createAnimation({
  7.             transformOrigin: "50% 50%",
  8.             duration: 1000,
  9.             timingFunction: "step-start",
  10.             delay: 0
  11.         });
  12.         animation.rotate(90).translateY(10).step();
  13.         animation.rotate(-90).translateY(-10).step();
  14.         this.setData({
  15.             animationData: animation.export()
  16.         });
  17.         console.log('createAnimation', animation);
  18.     }
  19. });

代码示例7 - timingFunction 为 step-end

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  3. </view>
  1. Page({
  2.     data: {
  3.         animationData: {}
  4.     },
  5.     startToAnimate() {
  6.         const animation = swan.createAnimation({
  7.             transformOrigin: "50% 50%",
  8.             duration: 1000,
  9.             timingFunction: "step-end",
  10.             delay: 0
  11.         });
  12.         animation.rotate(90).translateY(10).step();
  13.         animation.rotate(-90).translateY(-10).step();
  14.         this.setData({
  15.             animationData: animation.export()
  16.         });
  17.         console.log('createAnimation', animation);
  18.     }
  19. });