快捷導(dǎo)航

uniapp實現(xiàn)紅包動畫效果代碼實例(vue3)

更新時間：2024年01月22日 15:37:35 作者：X_JinCheng

uniapp作為一種基于Vue.js的前端框架,實現(xiàn)了一套代碼多端運行的理念,成為了眾多開發(fā)者的首選,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)紅包動畫效果的相關(guān)資料,需要的朋友可以參考下

效果演示

首先安裝CSS動畫庫animate.css依賴

yarn add animate.css

打開main.ts文件引入

import 'animate.css'

這兩張圖片放入static文件夾下

用到的圖片red1.png

用到的圖片red2.png

紅包整體主要分三部分紅包頭部中部底部

<template>
    <view>
        <button @tap="red = true">顯示紅包</button>
    </view>
    <!-- 紅包特效遮罩層 -->
    <view v-show="red" class="cover">
        <!-- 紅包整體 -->
        <view class="redBig animate__animated animate__bounceIn" :key="redIndex">
            <!-- 頭部 -->
            <view :animation="redHead" class="redBigHead">
                <image @tap="redHeadAnimation" class="" src="/static/red1.png" mode=""></image>
            </view>
            <!-- 中間 -->
            <view :animation="redMid" class="redBigMid">
                <view class="text1">
                    恭喜您獲得了
                </view>
                <view class="text2">
                    100.00
                </view>
                <view class="text3">
                    紅包余額可去錢包查詢
                </view>
            </view>
            <!-- 底部 -->
            <view class="redBigBottom">
                <!-- 打開紅包后展示 -->
                <view @tap="redBagAnimationRenew" v-show="redBottom" class="button animate__animated animate__bounceIn">
                    開心收下
                </view>
            </view>
        </view>
    </view>
</template>

使用uni.createAnimation()創(chuàng)建動畫實例并進行相關(guān)操作具體查看官方文檔

<script setup lang="ts">
    import {
        ref,
        getCurrentInstance
    } from 'vue'
    import {
        onShow
    } from '@dcloudio/uni-app'
    const {
        proxy
    } = getCurrentInstance() as any
    //紅包動畫
    let red = ref(false) //紅包顯示 
    let redIndex = ref(0) //紅包組件刷新
    onShow(() => {
        let animation = uni.createAnimation()
        proxy.animation = animation
    })


    //頭部動畫
    let redHead = ref({})

    function redHeadAnimation() {
        proxy.animation.translateY(-300).opacity(0).step({
            duration: 500,
            timingFunction: 'ease-in-out',
        })
        redHead.value = proxy.animation.export()
        redBottom.value = true
        setTimeout(() => {
            redMidAnimation()
        }, 300)
    }
    //中部動畫
    let redMid = ref({})

    function redMidAnimation() {
        proxy.animation.translateY(-120).opacity(1).step({
            duration: 500,
            timingFunction: 'ease-in-out',
        })
        redMid.value = proxy.animation.export()
    }
    //紅包底部按鈕顯示
    let redBottom = ref(false)
    //重置紅包
    function redBagAnimationRenew() {
        red.value = false
        redBottom.value = false
        redHead.value = {}
        redMid.value = {}
        redIndex.value++
    }
</script>

除了紅包底部頭部和中部需要定位

<style lang="scss">
    .cover {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(000, 000, 000, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .redBig {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .redBigHead {
        position: absolute;
        z-index: 2;

        image {
            width: 550rpx;
            height: 440rpx;
        }
    }

    .redBigMid {
        width: 508rpx;
        height: 350rpx;
        background-color: #fff;
        border-radius: 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #FF4545;
        position: absolute;
        z-index: 0;
        margin-top: 260rpx;
        opacity: 0;

        .text1 {
            margin-top: 20rpx;
            font-size: 32rpx;
        }

        .text2 {
            margin-top: 30rpx;
            font-size: 70rpx;
        }

        .text3 {
            margin-top: 30rpx;
        }
    }

    .redBigBottom {
        width: 550rpx;
        height: 331rpx;
        background-image: url('../../static/red2.png');
        background-size: 100% 100%;
        margin-top: 280rpx;
        z-index: 1;

        .button {
            background: linear-gradient(to bottom, #FEE3AD 50%, #FEB05C);
            color: #BC0D0D;
            margin-left: 84rpx;
            margin-right: 84rpx;
            padding-top: 30rpx;
            padding-bottom: 30rpx;
            border-radius: 100rpx;
            text-align: center;
            margin-top: 150rpx;
        }
    }
</style>

總結(jié)

到此這篇關(guān)于uniapp實現(xiàn)紅包動畫效果的文章就介紹到這了,更多相關(guān)uniapp紅包動畫效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: