Because there are sometimes no plug-ins available for applets, some functions need to be implemented yourself. For example, the new red envelope, pop-up red envelope bounce and after the additional aperture, this is good, familiar with CSS3 animation are easy to achieve. But a little more complicated is the effect of the amount of money in this article.

The instance should display four digits of 00.00, and be processed as a quick flip from 00:00 to 05:20 based on the amount of money returned in the background, such as $5.2. The processing should be lively, some faster and some slower, and the animation should be smooth.

Consider: digital flip animation style, 0-9 seems to be every number to write, fortunately, not many can be realized. To smooth the transition, the four arrays are padded with several groups of 0-9 digits, such as 0-9+0-9+0-9+1+2.. Plus 5. This is an array of the number 5. Note that 0-9+0-9+0-9+1+2 is the flip effect. +5 in reverse order, but it shows the amount at the beginning, hides everything down here, and we put another 0 on top. When running the animation, it switches to 0 at the bottom of the animation, which is also the position of 0% animation, and then moves from bottom to top to that lottery number. Implement the following program:

1. Four digit array container, well arranged, set beyond hiding.

2. Each group of numbers is arranged vertically, and the prize amount obtained is decomposed into four numbers, and the corresponding digital animation is called.

3. The four groups of digital animation need to set different delay start.

4. The unity of the class name, and the number association is better, easy to call.

Implementation steps:

Get the background data breakdown numbers:

              var cash = (res.data.data) ? Number(res.data.data) : 0;      
              cash = cash == NaN ? 0 : cash;
              var cashStr = "000"+Math.round(cash * 100); cashStr = cashStr.substr(-4.4);
              var cash4, cash1, cash2, cash3;
              cash1 = parseInt(cashStr.charAt(0));
              cash2 = parseInt(cashStr.charAt(1));
              cash3 = parseInt(cashStr.charAt(2));
              cash4 = parseInt(cashStr.charAt(3));

Copy the code

Prepare four arrays for numbers:

              var draw1, draw2, draw3, draw4;
              draw1 = [];
              for (var i = 0; i < 5; i++) {
                for (var j = 0; j <= 9; j++) {
                  draw1.unshift(j);
                }
              }
              draw2 = [...draw1];
              draw3 = [...draw1];
              draw4 = [...draw1];

Copy the code

After getting the numbers, continue to plug:

              for (let i = 0; i <= cash1; i++) {
                draw1.unshift(i);
              };
              for (let j = 0; j <= cash2; j++) {
                draw2.unshift(j);
              };
              for (let m = 0; m <= cash3; m++) {
                draw3.unshift(m);
              };
              for (let n = 0; n <= cash4; n++) {
                draw4.unshift(n);
              };
              draw1.unshift(0);             // the top edge is 0
              draw2.unshift(0);
              draw3.unshift(0);
              draw4.unshift(0);

Copy the code

Which of the four groups of numbers moves first, giving it some randomness:

        var d1,d2,d3,d4
        var dArr=[1.2.3.4]
        for(var i=0; i<4; i++){for(var j=3; j>i; j--){if(Math.round(Math.random())==0) {var temp=dArr[i]
                    dArr[i]=dArr[j]
                    dArr[j]=temp
                }
            }
        }
        d1=dArr[0]
        d2=dArr[1]
        d3=dArr[2]
        d4=dArr[3]
    
Copy the code

Delay and CSS:

.draw-num text{
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  top: 0;
  animation-duration:3.5 s;                        
  animation-timing-function:linear;
  animation-fill-mode: forwards;
}
.draw-num-1{
    animation-delay:0s;
}
.draw-num-2{
    animation-delay:0.1 s;
}
.draw-num-3{
    animation-delay:0.3 s;
}
.draw-num-4{
    animation-delay:0.4 s;
}
Copy the code

Animate CSS: just paste a number 0 here

.translatey-0{/ / number0animationtop: -4968rpx;
  animation-name: translatey0;
}
@keyframes translatey0{
  0%{
    transform: translateY(-4968rpx);
  }
  10%{
    transform: translateY(-4860rpx);
  }
  75%{
    transform: translateY(-324rpx);
  }
  100%{
     transform: translateY(-108rpx); }}Copy the code

Call animation:

vm.setData({
                drawNum1: draw1.join(' '),            // The page loads an array of numbers
                drawNum2: draw2.join(' '),
                drawNum3: draw3.join(' '),
                drawNum4: draw4.join(' '),
                translatey_1: 'translatey-' + cash1 +' draw-num-' + d1,     // Animation style
                translatey_2: 'translatey-' + cash2 +' draw-num-' + d2,
                translatey_3: 'translatey-' + cash3 +' draw-num-' + d3,
                translatey_4: 'translatey-' + cash4 +' draw-num-' + d4,
                shareCash:cash
              });
              var chanceNum = _this.data.chanceNum;
              var chanceTotal = _this.data.chanceTotal;
              var drawState = 2;
              if (chanceNum == chanceTotal) drawState = 3;
              setTimeout(() = > {
                vm.setData({
                  sd: 1.// Display a mask layer of winning amount after 4 seconds
                  drawState: drawState
                })
              }, 4000)

Copy the code