yihuo/pages/red_envelope_rain/rain_line.vue

<template>
    <image :src="imageName" class="rain" :style="{left: left + 'px'}" :animation='animationData'></image>
</template>

<script>
import resource from '@/utils/resource'
export default {
    props: {
        delay: Number
    },
    data() {
        return {
            left: 38,
            imageName: null,
            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
        })

        const themes = [resource.red_rain_1, resource.red_rain_2, resource.red_rain_3, resource.red_rain_4]
        let index2 = Math.floor(Math.random() * 4)
        this.imageName = themes[index2]
    },
    mounted() {
        this.height = this.$store.state.systemInfo.screenHeight + 151
        this.startAnimal()
    },
    beforeDestroy() {
        this.animation = null
        this.animationData = null
    },
    methods: {
        startAnimal() {
            // this.animation.translateY('-151px').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)
        }
    }
}
</script>

<style lang="scss" scoped>
.rain {
    position: fixed;
    top: -151px;
    width: 2px;
    height: 51px;
}
</style>