yihuo/pages/red_envelope_rain/rain_item.vue

<template>
    <image :src="resource.red_envelope" class="red-package" :style="{left: left + 'px'}"
        :animation='animationData' @click="lottery"></image>
</template>

<script>
import resource from '@/utils/resource'
export default {
    props: {
        delay: Number
    },
    data() {
        return {
            resource,
            left: 38,
            animationData: null
        }
    },
    created() {
        const timingFunctions = ['linear', 'ease', 'ease-out', 'ease-in-out']
        let index = Math.floor(Math.random() * 4)
        this.left = Math.floor(Math.random() * 262 + 38)
        this.animation = wx.createAnimation({
            timingFunction: timingFunctions[index],
            delay: this.delay
        })
    },
    mounted() {
        this.height = this.$store.state.systemInfo.screenHeight + 189
        this.startAnimal()
    },
    beforeDestroy() {
        this.animation = null
        this.animationData = null
    },
    methods: {
        startAnimal() {
            // this.animation.translateY('-189px').step({
            //     duration: 0
            // })
            // this.animationData = this.animation.export()
            this.duration = Math.floor(Math.random() * 4 + 5) * 1000
            setTimeout(() => {
                this.animation.translateY(this.height + 'px').step({
                    duration: this.duration
                })
                this.animationData = this.animation.export()
            }, 50)
        },
        lottery() {
            this.$emit('lottery')
        }
    }
}
</script>

<style lang="scss" scoped>
.red-package {
    position: fixed;
    top: -189rpx;
    width: 32px;
    height: 89px;
}
</style>