swan.createAnimation

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

方法参数

Object object

返回值

Animation

object参数说明

timingFunction 有效值

示例

扫码体验

请使用百度APP扫码

代码示例1 - 参数默认值

在开发者工具中预览效果

  1. <view class="wrap">    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view></view>
  1. Page({    data: {        animationData: {}    },    startToAnimate() {        const animation = swan.createAnimation();        animation.rotate(90).translateY(10).step();        animation.rotate(-90).translateY(-10).step();        this.setData({            animationData: animation.export()        });        console.log('createAnimation', animation);    }});

代码示例2 - timingFunction 为 ease

在开发者工具中预览效果

  1. <view class="wrap">    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view></view>
  1. Page({    data: {        animationData: {}    },    startToAnimate() {        const animation = swan.createAnimation({            transformOrigin: "50% 50%",            duration: 1000,            timingFunction: "ease",            delay: 0        });        animation.rotate(90).translateY(10).step();        this.setData({            animationData: animation.export()        });        console.log('createAnimation', animation);    }});

代码示例3 - timingFunction 为 ease-in

在开发者工具中预览效果

  1. <view class="wrap">    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view></view>
  1. Page({    data: {        animationData: {}    },    startToAnimate() {        const animation = swan.createAnimation({            transformOrigin: "50% 50%",            duration: 1000,            timingFunction: "ease-in",            delay: 0        });        animation.rotate(90).translateY(10).step();        animation.rotate(-90).translateY(-10).step();        this.setData({            animationData: animation.export()        });        console.log('createAnimation', animation);    }});

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

在开发者工具中预览效果

  1. <view class="wrap">    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view></view>
  1. Page({    data: {        animationData: {}    },    startToAnimate() {        const animation = swan.createAnimation({            transformOrigin: "50% 50%",            duration: 1000,            timingFunction: "ease-in-out",            delay: 0        });        animation.rotate(90).translateY(10).step();        animation.rotate(-90).translateY(-10).step();        this.setData({            animationData: animation.export()        });        console.log('createAnimation', animation);    }});

代码示例5 - timingFunction 为 ease-out

在开发者工具中预览效果

  1. <view class="wrap">    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view></view>
  1. Page({    data: {        animationData: {}    },    startToAnimate() {        const animation = swan.createAnimation({            transformOrigin: "50% 50%",            duration: 1000,            timingFunction: "ease-out",            delay: 0        });        animation.rotate(90).translateY(10).step();        animation.rotate(-90).translateY(-10).step();        this.setData({            animationData: animation.export()        });        console.log('createAnimation', animation);    }});

代码示例6 - timingFunction 为 step-start

在开发者工具中预览效果

  1. <view class="wrap">    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view></view>
  1. Page({    data: {        animationData: {}    },    startToAnimate() {        const animation = swan.createAnimation({            transformOrigin: "50% 50%",            duration: 1000,            timingFunction: "step-start",            delay: 0        });        animation.rotate(90).translateY(10).step();        animation.rotate(-90).translateY(-10).step();        this.setData({            animationData: animation.export()        });        console.log('createAnimation', animation);    }});

代码示例7 - timingFunction 为 step-end

在开发者工具中预览效果

  1. <view class="wrap">    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view></view>
  1. Page({    data: {        animationData: {}    },    startToAnimate() {        const animation = swan.createAnimation({            transformOrigin: "50% 50%",            duration: 1000,            timingFunction: "step-end",            delay: 0        });        animation.rotate(90).translateY(10).step();        animation.rotate(-90).translateY(-10).step();        this.setData({            animationData: animation.export()        });        console.log('createAnimation', animation);    }});