百度智能小程序 创建animation

swan.createAnimation

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

方法参数

Object object

返回值

Animation

object参数说明

timingFunction 有效值

示例

代码示例 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);
    }
});