百度智能小程序 Animation

Animation

解釋：動(dòng)畫實(shí)例可以調(diào)用以下方法來描述動(dòng)畫，調(diào)用結(jié)束后會(huì)返回自身，支持鏈?zhǔn)秸{(diào)用的寫法。

屬性說明

示例

圖片示例

代碼示例 1: 動(dòng)畫隊(duì)列 

在開發(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();
        animation.rotate(-90).translateY(-10).step();
        this.setData({
            animationData: animation.export()
        });
    }
});

代碼示例 2: 動(dòng)畫樣式設(shè)置 

在開發(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: 'linear',
            delay: 0
        });
        animation.opacity(0.5);
        animation.backgroundColor('#DC143C');
        animation.rotate(90).translateY(10).step();
        animation.rotate(-90).translateY(-10).step();
        this.setData({
            animationData: animation.export()
        });
        console.log('createAnimation', animation);
    }
});

代碼示例 3: 動(dòng)畫寬高設(shè)置 

在開發(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: 'linear',
            delay: 0
        });
        animation.opacity(0.5);
        animation.backgroundColor('#DC143C');
        animation.width('20px');
        animation.height('70px');
        animation.top('40px');
        animation.left('90px');
        animation.bottom('60px');
        animation.right('80px');
        animation.rotate(90).translateY(10).step();
        animation.rotate(-90).translateY(-10).step();
        this.setData({
            animationData: animation.export()
        });
        console.log('createAnimation', animation);
    }
});

代碼示例 4: 底部彈窗自定義動(dòng)畫（css 控制） 

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

<button bindtap="showshadow" type="primary">點(diǎn)擊顯示底部彈框</button>

<view class="content {{click? 'showContent': 'hideContent'}} {{option? 'open': 'close'}}" hover-stop-propagation="true">
    <!-- 內(nèi)容 -->
    <view class="content-top" s-for="item in list">
      {{item}}
    </view>
</view>

Page({
    data: {
        click: false, // 是否顯示彈窗內(nèi)容
        option: false, // 是否顯示彈窗或關(guān)閉彈窗的操作動(dòng)畫
        list: ['列表一','列表二','列表三','列表四']
    },
    showshadow() {
        if (!this.data.click) {
            this.setData({
                click: true,
            })
        }
        if (this.data.option) {
            this.setData({
                option: false,
            })
            // 關(guān)閉顯示彈窗動(dòng)畫的內(nèi)容，若不設(shè)則點(diǎn)擊任何地方，都會(huì)出現(xiàn)彈窗
            setTimeout(() => {
                this.setData({
                    click: false,
                })
            }, 500)
        } else {
            this.setData({
                option: true
            })
        }
    }
});

.content {
    width: 100%;
    position: absolute;
    bottom: 0;
    box-shadow: 0 0 10rpx #333;
    height: 0;
    z-index: 999;
    font-size: 28.99rpx;
}

.showContent {
    display: block;
}

.hideContent {
    display: none;
}

/* 顯示或關(guān)閉內(nèi)容時(shí)動(dòng)畫 */
.open {
    animation: slideContentUp 0.5s ease-in both;
}

.close {
    animation: slideContentDown 0.5s ease-in both;
}

/* 彈出或關(guān)閉動(dòng)畫來動(dòng)態(tài)設(shè)置內(nèi)容高度 */
@keyframes slideContentUp {
    from {
        height: 0;
    }

    to {
        height: 800rpx;
    }
}

@keyframes slideContentDown {
    from {
        height: 800rpx;
    }

    to {
        height: 0;
    }
}

代碼示例 5: 底部彈窗自定義動(dòng)畫（API 控制） 

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

<view class="wrap">
    <button bindtap="showShadow" type="primary">點(diǎn)擊顯示底部彈框</button>

    <!-- 遮罩層 -->
    <view class="shadow" s-if="{{chooseSize}}" bindtap="hideModal"></view>
    <!-- 上滑高度 -->
    <view class="choosen" s-if="{{chooseSize}}" animation="{{animationData}}">
    <!-- 內(nèi)容 -->
    <view class="content-top" s-for="item in list">
        {{item}}
    </view>
</view>

Page({
    data:{
        chooseSize: false,
        list: ['列表一','列表二','列表三','列表四']
    },
    showShadow(e){
        this.data.chooseSize ? this.hideModal() : this.chooseSezi();
    },
    chooseSezi() {
        // 創(chuàng)建一個(gè)動(dòng)畫實(shí)例
        let animation = swan.createAnimation({
            transformOrigin: "50% 50%",
            duration: 1000,
            timingFunction: "ease",
            delay: 0
        });

        animation.translateY(1000).step();
        this.setData({
            animationData: animation.export(),
            chooseSize: true
        })
        // 設(shè)置setTimeout來改變y軸偏移量，實(shí)現(xiàn)有感覺的滑動(dòng) 滑動(dòng)時(shí)間
        setTimeout(() => {
            animation.translateY(0).step();
            this.setData({
                animationData: animation.export(),
                clearcart: false
            })
        }, 100);
    },
    // 隱藏
    hideModal(e) {
        let animation = swan.createAnimation({
            transformOrigin: "50% 50%",
            duration: 1000,
            timingFunction: "ease",
            delay: 0
        })

        animation.translateY(700).step();
        this.setData({
            animationData: animation.export()
        })
        setTimeout(() => {
            animation.translateY(0).step();
            this.setData({
                animationData: animation.export(),
                chooseSize: false
            })
        }, 500);
    }
});

代碼示例 6: 彈出菜單特效的實(shí)現(xiàn) 

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

<view>
    <image src="/images/ai.png" class="image" animation="{{animFavor}}"></image>
    <image src="/images/basecontent.png" class="image" animation="{{animShare}}"></image>
    <image src="/images/canvas.png" class="image" animation="{{animWrite}}"></image>
    <image src="/images/interface.png" class="image-plus" animation="{{animPlus}}" bindtap="isPopping"></image>
</view>

Page({
    data: {
        isPopping: false,
        animPlus: {},
        animFavor: {},
        animShare: {},
        animWrite: {},
    },
    isPopping () {
        if (this.data.isPopping) {
            this.pop();
            this.setData({
                isPopping: false
            })
        } else {
            this.popBack();
            this.setData({
                isPopping: true
            })
        }
    },
    pop() {
        let animationPlus = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animFavor = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animShare = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animWrite = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        animationPlus.rotateZ(180).step();
        animFavor.translate(-100, -100).rotateZ(180).opacity(1).step();
        animShare.translate(-140, 0).rotateZ(180).opacity(1).step();
        animWrite.translate(-100, 100).rotateZ(180).opacity(1).step();
        this.setData({
            animPlus: animationPlus.export(),
            animFavor: animFavor.export(),
            animShare: animShare.export(),
            animWrite: animWrite.export()
        })
    },
    popBack() {
        let animationPlus = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animFavor = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animShare = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        let animWrite = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        animationPlus.rotateZ(0).step();
        animFavor.translate(0, 0).rotateZ(0).opacity(0).step();
        animShare.translate(0, 0).rotateZ(0).opacity(0).step();
        animWrite.translate(0, 0).rotateZ(0).opacity(0).step();
        this.setData({
            animPlus: animationPlus.export(),
            animFavor: animFavor.export(),
            animShare: animShare.export(),
            animWrite: animWrite.export()
        })
    }
})

.image {
    height: 150rpx;
    width: 150rpx;
    position: absolute;
    bottom: 250rpx;
    right: 100rpx;
    opacity: 0;
}

.image-plus {
    height: 150rpx;
    width: 150rpx;
    position: absolute;
    bottom: 250rpx;
    right: 100rpx;
    z-index: 100;
}