swan.createAnimation

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

方法参数

Object object

返回值

Animation

object参数说明

属性名类型必填默认值说明
durationNumber400动画持续时间,单位 ms 。
timingFunctionString‘linear’定义动画的效果
delayNumber0动画延迟时间,单位 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. });