百度智能小程序 Animation

Animation

解釋：動畫實例可以調用以下方法來描述動畫，調用結束后會返回自身，支持鏈式調用的寫法。

屬性說明

示例

圖片示例

代碼示例 1: 動畫隊列 

在開發(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: 動畫樣式設置 

在開發(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: 動畫寬高設置 

在開發(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: 底部彈窗自定義動畫（css 控制） 

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

<button bindtap="showshadow" type="primary">點擊顯示底部彈框</button>

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

Page({
    data: {
        click: false, // 是否顯示彈窗內容
        option: false, // 是否顯示彈窗或關閉彈窗的操作動畫
        list: ['列表一','列表二','列表三','列表四']
    },
    showshadow() {
        if (!this.data.click) {
            this.setData({
                click: true,
            })
        }
        if (this.data.option) {
            this.setData({
                option: false,
            })
            // 關閉顯示彈窗動畫的內容，若不設則點擊任何地方，都會出現彈窗
            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;
}

/* 顯示或關閉內容時動畫 */
.open {
    animation: slideContentUp 0.5s ease-in both;
}

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

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

    to {
        height: 800rpx;
    }
}

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

    to {
        height: 0;
    }
}

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

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

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

    <!-- 遮罩層 -->
    <view class="shadow" s-if="{{chooseSize}}" bindtap="hideModal"></view>
    <!-- 上滑高度 -->
    <view class="choosen" s-if="{{chooseSize}}" animation="{{animationData}}">
    <!-- 內容 -->
    <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)建一個動畫實例
        let animation = swan.createAnimation({
            transformOrigin: "50% 50%",
            duration: 1000,
            timingFunction: "ease",
            delay: 0
        });

        animation.translateY(1000).step();
        this.setData({
            animationData: animation.export(),
            chooseSize: true
        })
        // 設置setTimeout來改變y軸偏移量，實現有感覺的滑動 滑動時間
        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: 彈出菜單特效的實現 

在開發(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;
}