百度智能小程序 創(chuàng)建animation

swan.createAnimation

解釋：創(chuàng)建一個(gè)動(dòng)畫實(shí)例 animation

方法參數(shù)

Object object

返回值

Animation

object參數(shù)說明

timingFunction 有效值

示例

代碼示例 1: 

在開發(fā)者工具中打開

<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">展示動(dòng)畫</view>
        <scroll-view scroll-y class="scroll">
            <button type="primary" bindtap="rotate">旋轉(zhuǎn)</button>   
            <button type="primary" bindtap="scale">縮放</button>       
            <button type="primary" bindtap="translate">移動(dòng)</button>       
            <button type="primary" bindtap="skew">傾斜</button>       
            <button type="primary" bindtap="rotateAndScale">旋轉(zhuǎn)并縮放</button>       
            <button type="primary" bindtap="rotateThenScale">旋轉(zhuǎn)后縮放</button>      
            <button type="primary" bindtap="all">同時(shí)展示全部動(dòng)作</button>      
            <button type="primary" bindtap="allInQueue">順序展示全部動(dòng)作</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 => {
                // 針對(duì)適配某一機(jī)型和模擬器
                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: 參數(shù)默認(rèn)值 

在開發(fā)者工具中打開

<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 

在開發(fā)者工具中打開

<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);
    }
});