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

# 示例

# 扫码体验

请使用百度APP扫码

# 代码示例1 - 参数默认值

在开发者工具中预览效果

    <view class="wrap">
        <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
    </view>
    
    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

    在开发者工具中预览效果

      <view class="wrap">
          <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
      </view>
      
      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

      在开发者工具中预览效果

        <view class="wrap">
            <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
        </view>
        
        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

        在开发者工具中预览效果

          <view class="wrap">
              <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
          </view>
          
          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

          在开发者工具中预览效果

            <view class="wrap">
                <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
            </view>
            
            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

            在开发者工具中预览效果

              <view class="wrap">
                  <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
              </view>
              
              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

              在开发者工具中预览效果

                <view class="wrap">
                    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
                </view>
                
                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);
                    }
                });