This is the fourth day of my participation in Gwen Challenge
There are two ways to send red packets to users on the small program. One is to send information to users in the form of subscription message, and users can get red packets by clicking on it. One is to achieve the effect of getting red packets by themselves, and automatically pay the amount to the user’s wechat account after receiving it.
Results the preview
The recording effect is not very good, in fact, it is not that stuck, shot from the bottom is very smooth;
Enter the animation
Effects to be achieved:
- Out of the bottom. – Slow in and slow out
- The red envelope size goes from 0 to 1
- The transparency goes from 0 to 1
Difficulty: How to put the red envelope in the designated position and arrange it in an orderly way for different models?
My method is that the red envelopes are already centered, but I move the red envelopes to the center of the screen, where they are not visible. When I click to open the red envelopes, set the X and Y axes of the red envelope translate to 0 to achieve the image above.
<view
:style="[initPosition( index )]"
v-for="( item, index ) in 5" :key="index"> <span> Hongbao main <span> </view> computed:{initPosition() {
return index= > {
let style = {};
let _action = {
'packet_0': _= > {
style.transform = `translate(The ${this.handleDistance( index ) }) scale(0)`;
style.opacity = 0;
},
'packet_1': _= > {
style.transform = `translate(The ${this.handleDistance( index ) }) scale(0)`;
style.opacity = 0;
},
'packet_2': _= > {
style.transform = `translate(The ${this.handleDistance( index ) }) scale(0)`;
style.opacity = 0;
},
'packet_3': _= > {
style.transform = `translate(The ${this.handleDistance( index ) }) scale(0)`;
style.opacity = 0;
},
'packet_4': _= > {
style.transform = `translate(The ${this.handleDistance( index ) }) scale(0)`;
style.opacity = 0;
},
'default': _= > ' '
};
const branch = _action[`packet_${index}`] || _action['default'];
branch.call(this);
returnstyle; }}},handleDistance( index ) {
const _action = {
'hobbies_1_0': _= > '0rpx,1400rpx'.'hobbies_2_0': _= > '180rpx,1450rpx'.'hobbies_2_1': _= > '-165rpx,1450rpx'.'hobbies_3_0': _= > '0, 1250rpx'.'hobbies_3_1': _= > '50%, 800rpx'.'hobbies_3_2': _= > '-157rpx, 800rpx'.'hobbies_4_0': _= > '180rpx, 1450rpx'.'hobbies_4_1': _= > '-165rpx, 1450rpx'.'hobbies_4_2': _= > '180rpx, 800rpx'.'hobbies_4_3': _= > '-175rpx, 800rpx'.'hobbies_5_0': _= > '235rpx, 1450rpx'.'hobbies_5_1': _= > '0rpx, 1450rpx'.'hobbies_5_2': _= > '-230rpx, 1450rpx'.'hobbies_5_3': _= > '165rpx, 950rpx'.'hobbies_5_4': _= > '-165rpx, 950rpx'
}
const branch = _action[`hobbies_The ${this.prize.length}_${index}`] || _action['default'];
const res = branch.call(this);
return res;
},
Copy the code- The above code can be seen setting the default style
scale(0)It corresponds to the size from zero to one,opacity = 0This corresponds to transparency going from 0 to 1; handleDistanceFunction of thehobbies_x_xFrom 1 to 4, you don’t need to look at the actual business of different red packets corresponding to different forms, but we only look at the case of 5 red packets, that is, fromhobbies_5_0So let’s see, let’s say the 5_0 combination is triggered, and the result of the return reception is going to betranslate(235rpx,1450rpx) scale(0);
Open a red envelope
When clicking to open the red envelope, quickly set translate(0,0) to quickly return to the location;
handlePosition() {
return index= > {
let style = ' ';
let _action = {
'packet_0': _= > {
style = 'r-show-repacket-0'
},
'packet_1': _= > {
style = 'r-show-repacket-1';
},
'packet_2': _= > {
style = 'r-show-repacket-2';
},
'packet_3': _= > {
style = 'r-show-repacket-3';
},
'packet_4': _= > {
style = 'r-show-repacket-4';
},
'default': _= > ' '
};
const branch = _action[`packet_${index}`] || _action['default'];
this.show && branch.call(this);
returnstyle; }},/ / sample
.r-show-repacket-0 {
transform: translate( 0.0 ) scale(1) !important;
opacity: 1! important; }Copy the codeInstead of firing five at a time from the bottom, there are intervals, so the transition delay from the second packet can be set. , so that it can achieve the sequence of injection return to the original position;
Flip open the red envelope animation
The effect needed to be achieved
- Buttons have a press and hold effect
- The whole red envelope is surrounded by golden light and flipped. The red envelope clicked at the moment is flipped successfully and the golden light flashes to the upper right corner. The remaining red envelope automatically flips and the clicked red envelope flashes a second light.
Hold down effect
.PressDown {
transition: all .6s;
animation: btndown .4s both ease-in-out;
}
@keyframes btndown {
0% {
transform: scale(0.9);
opacity:.6;
}
60% {
transform: scale(1);
opacity: 1;
}
100% {
opacity: 0; }}Copy the codeFrame animation is used to make the user produce the effect of pressing down. In fact, the size of the zoom button is matched with the transition to form the feeling of pressing down.
A red envelope to flip
The flip of the red envelope actually uses preset-3D to set the 3D effect, which must be set with the Perspective attribute to take effect. This value determines that the smaller the intensity of the 3D effect, the stronger the feeling.
rollback {
transition: transform 2s;
transform-style: preserve-3d;
animation: PacketRollback .5s .5s both linear;
}
@keyframes PacketRollback {
60% {
transform: rotateY(140deg) scale(1.2);
}
80% {
transform: rotateY(160deg) scale(1.1);
}
to {
transform: rotateY(180deg) scale(1); }}Copy the codeFrom opening the red envelope to the end of the flip, we need to pay attention to the execution time of each animation. Use delay Settings to execute the corresponding animation at each time.
Fireworks explode animation
In the preview above, fireworks are an image, just zoom in and change the opacity;
.Onefry {
animation: leftScalePack .5s .4s both cubic-bezier(2...01.4..1);
}
@keyframes leftScalePack {
20% {
opacity: 1;
}
to {
transform: scale(4);
opacity: 0; }}Copy the codeconclusion
This article introduces the effect of self-realization of the red envelope ideas, interested partners can understand. Please forgive me for my bad writing.