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="animation-element-wrapper flexTop">
            <view class="animation-element" animation="{{animation}}"></view>
        </view>
        <view class="card-area flexBottom swan-security-padding-bottom" style="height:{{isIPhoneX ? 5.7 : 4.1}}rem">
            <view class="top-description border-bottom">展示动画</view>
            <scroll-view scroll-y class="scroll">
                <button type="primary" bindtap="rotate">旋转</button>   
                <button type="primary" bindtap="scale">缩放</button>       
                <button type="primary" bindtap="translate">移动</button>       
                <button type="primary" bindtap="skew">倾斜</button>       
                <button type="primary" bindtap="rotateAndScale">旋转并缩放</button>       
                <button type="primary" bindtap="rotateThenScale">旋转后缩放</button>      
                <button type="primary" bindtap="all">同时展示全部动作</button>      
                <button type="primary" bindtap="allInQueue">顺序展示全部动作</button>     
                <button bindtap="reset">还原</button> 
            </scroll-view>
        </view>
    </view>
    
    Page({
        data: {
            isIPhoneX: false,
            animation: {}
        },
        onLoad() {
            this.animation = swan.createAnimation({
                duration: 1000,
                timingFunction: 'ease',
                delay: 0,
                transformOrigin: '50% 50% 0'
            });
            swan.getSystemInfo({
                success: systemInfo => {
                    // 针对适配某一机型和模拟器
                    if (systemInfo.model
                        && (systemInfo.model.indexOf('iPhone X') > -1)
                        || (systemInfo.model === 'iPhone Simulator <x86-64>'
                        && systemInfo.screenWidth === 375)
                    ) {
                        this.setData({
                            isIPhoneX: true
                        });
                    }
                }
            });
        },
        rotate() {
            this.animation.rotate(Math.random() * 720 - 360).step();
            this.setData({
                animation: this.animation.export()
            });
        },
        scale() {
            this.animation.scale(Math.random() * 2).step();
            this.setData({
                animation: this.animation.export()
            });
        },
        translate() {
            this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step();
            this.setData({
                animation: this.animation.export()
            });
        },
        skew() {
            this.animation.skew(Math.random() * 90, Math.random() * 90).step();
            this.setData({
                animation: this.animation.export()
            });
        },
        rotateAndScale() {
            this.animation.rotate(Math.random() * 720 - 360)
                .scale(Math.random() * 2)
                .step();
            this.setData({
                animation: this.animation.export()
            });
        },
        rotateThenScale() {
            this.animation.rotate(Math.random() * 720 - 360).step()
                .scale(Math.random() * 2).step();
            this.setData({
                animation: this.animation.export()
            });
        },
        all() {
            this.animation.rotate(Math.random() * 720 - 360)
                .scale(Math.random() * 2)
                .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
                .skew(Math.random() * 90, Math.random() * 90)
                .step();
            this.setData({
                animation: this.animation.export()
            });
        },
        allInQueue() {
            this.animation.rotate(Math.random() * 720 - 360).step()
                .scale(Math.random() * 2).step()
                .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
                .step()
                .skew(Math.random() * 90, Math.random() * 90)
                .step();
            this.setData({
                animation: this.animation.export()
            });
        },
        reset() {
            this.animation.rotate(0, 0)
                .scale(1)
                .translate(0, 0)
                .skew(0, 0)
                .step({
                    duration: 0
                });
            this.setData({
                animation: this.animation.export()
            });
        }
    });
    
    .animation-element-wrapper {
        display: flex;
        overflow: hidden;
        height: 2.18rem;
        margin: .13rem .17rem;
        border-radius: 8px 8px;
        background-color: #fff;
    }
    
    .flexTop {
        position: fixed;
        height: 2.18rem;
        width: 3.88rem;
        height: 2.18rem;
    }
    
    .animation-element {
        width: .6rem;
        height: .6rem;
        margin-top: .7rem;
        margin-left: 1.6rem;
        background-color: #2b99ff;
    }
    
    .flexBottom {
        position: fixed;
        bottom: 0;
        width: 3.88rem;
    }
    
    .scroll {
        height: 3.5rem;
    }
    

    # 代码示例 2: 参数默认值

      <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();
              this.setData({
                  animationData: animation.export()
              });
              console.log('createAnimation', animation);
          }
      });
      

      # 代码示例 3: timingFunction

        <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,ease-in,ease-in-out,ease-out,step-start,step-end
                    timingFunction: 'linear',
                    delay: 0
                });
                animation.rotate(90).translateY(10).step();
                this.setData({
                    animationData: animation.export()
                });
                console.log('createAnimation', animation);
            }
        });