uniapp 让一个“猫”跑起来（uni.createAnima

image.png

cart.vue

<template>
    <view class="search-content">
        <view class="search-header" style="font-size: 30px; padding-bottom: 20px;font-weight: bold;display: flex;justify-content: space-around;flex-direction: row;">
            <view class="all">
                <text @click="backAnimation()">出去</text>
            </view>
            <view class="all">
                <text @click="goAnimation()">回来</text>
            </view>
            <view class="all">
                <text @click="rotateAnimation()">打滚</text>
            </view>
        </view>
        <view class="search-header">
            <view class="collapse-item" :animation="animationData" style="font-size: 40px;">
                奶牛猫
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                animationData: {},
            }
        },
        onLoad(option) {
            this.animation = uni.createAnimation()
        },
        methods: {
            goAnimation() {
                this.animation.translateX(200).step()
                    .translateY(200).step()
                    .translateX(0).step()
                    .translateY(0).step()
                this.animationData = this.animation.export()
            },
            backAnimation() {
                this.animation.translateX(0).step()
                    .translateY(0).step()
                    .translateX(200).step()
                    .translateY(200).step()
                this.animationData = this.animation.export()
            },
            rotateAnimation() {
                this.animation.rotateX(0).step()
                    .rotateX(90).step()
                    .rotateX(180).step()
                    .rotateX(90).step()
                    .rotateX(0).step()
                this.animationData = this.animation.export()
            }
        }
    }
</script>