title: swan.createAnimation header: develop nav: api sidebar: createanimation_swan-createAnimation

webUrl: https://qft12m.smartapps.cn/swan-api/createAnimation/createAnimation

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

方法参数

Object object

返回值

Animation

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 动画一直保持开始状态，最后一帧跳到结束状态。

示例

扫码体验

webUrl: https://qft12m.smartapps.cn/swan-api/createAnimation/createAnimation - 图1 请使用百度APP扫码

代码示例1 - 参数默认值

在开发者工具中预览效果

:::codeTab

  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

在开发者工具中预览效果

:::codeTab

  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

在开发者工具中预览效果

:::codeTab

  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

在开发者工具中预览效果

:::codeTab

  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

在开发者工具中预览效果

:::codeTab

  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

在开发者工具中预览效果

:::codeTab

  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

在开发者工具中预览效果

:::codeTab

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

:::