📌个人主页:个人主页
🧀 推荐专栏:小程序开发成神之路
📝作者简介:一个读研中创业、打工中学习的能搞全栈、也搞算法、目前在搞大数据的奋斗者。
⭐️您的小小关注是我持续输出的动力!⭐️
小程序拆红包动画在微信内部的拆红包效果的设计之上,加入了更多的动效,使得拆的效果更加的丝滑。
拆红包组件抽取成子组件,然后可以在聊天、营销、商场、娱乐方向的应用集成运用。关于微信支付方面的更多内容,请关注栏目:小程序开发成神之路
uniappvue 2、html、css3相对定位,通过top值的改变从而实现元宝的位移。然后再通过CSS中的动画样式,引入动画的ease-in-out效果,从而实现元素移动的减速效果,具体代码如下:{
position: absolute;
background-image: url(https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%BA%A2%E5%8C%85/%E9%87%91%E5%85%83%E5%AE%9D.png?sign=c8f943e…&t=1605162336);
visibility: visible;
transition-property: top;
transition-duration: 1s;
transition-timing-function: ease-in-out;
top: 0;
}
拆红包按钮的点击事件,即可实现红包展开效果。<template>
<view class="red-packet">
<view class="red-packet-layout" :class="open ? 'red-packet-open' : '' ">
<view class="red-packet-up" />
<view class="red-packet-middle" />
<view class="red-packet-content">
<view class="red-packet-tip">
<view class="receive-success">
<view>恭喜您获得了view>
<view>
<text>{{money}}text>元
view>
view>
view>
view>
<view class="red-packet-top">
<image style="width: 100rpx;height: 100rpx;left: 50rpx;top: 100rpx;position: relative;" src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%BA%A2%E5%8C%85/%E5%B7%A6%E5%80%BE%E6%96%9C%E7%BA%A2%E5%8C%85.png?sign=d7bbddd39ef9243ace2567b1b592ba09&t=1605162895" mode="">image>
<image style="width: 100rpx;height: 100rpx;left: 250rpx;top: 20rpx;position: relative;" src="https://6e69-niew6-1302638010.tcb.qcloud.la/%E7%BA%A2%E5%8C%85/%E5%8F%B3%E5%80%BE%E6%96%9C%E7%BA%A2%E5%8C%85.png?sign=68f4e0e572ea25ed65d4f803633ecf32&t=1605162906" mode="">image>
view>
<view v-if="!open" class="open-btn" @click="openClick">開view>
<view class="red-packet-bottom" />
<view class="red-packet-left" />
<view class="red-packet-right" />
<view class="red-money red-money-left1" />
<view class="red-money red-money-left2" />
<view class="red-money red-money-left3" />
<view class="red-money red-money-left4" />
<view class="red-money red-money-middle1" />
<view class="red-money red-money-middle2" />
<view class="red-money red-money-middle3" />
<view class="red-money red-money-middle4" />
<view class="red-money red-money-right1" />
<view class="red-money red-money-right2" />
<view class="red-money red-money-right3" />
<view class="red-money red-money-right4" />
view>
view>
template>
<script>
export default {
data() {
return {
open: false, //状态
money: (Math.random() * 10000000).toFixed(2), //金额
};
},
methods: {
//打开红包
openClick() {
this.open = true
}
}
}
</script>