The introduction

Before Lottie, front-end pair animations tended to be hand-written by CSS. With the increasing complexity of animation effects, some animation effects have compatibility problems, and some are too complex to be realized. Front-end ER needs to spend a long time on dynamic effect coding.

The emergence of Lottie – Web liberates the front-end productivity in dynamic effects. However, because for Lottie-Web, the key information of the animation, such as icon, font, content, effect, location, and so on, resides in the Lottie JSON file. Therefore, in Lottie schemes, most of the dynamic effects themselves are not interactive, or the content is constant. However, for animation with interactive animation and text content on animation that needs to change with state, json file hierarchy is deep, and it is not convenient to operate and change JSON content.

So what is the way to implement interactive animated Lottie? The animation scenes and specific animation schemes encountered in this activity will be introduced in detail below.

I. Introduction to the activity

This activity [turning over cards and getting cash] is one of the growing businesses of Kaola overseas Shopping users. The cash stimulation that draws 50 yuan and 150 yuan through pay treasure, make user fission activity, achieve pull new purpose.

In order to increase the user’s sense of participation and game, this activity has high requirements for dynamic effect and interaction. For the front end, this kind of cool dynamic effect is difficult to achieve with pure CSS, so consider using Lottie solution, which is described below. The main screenshots of this activity are given first.

Second, animation scheme

The animation effect is shown below:

For users can turn the cards into a group, gradually play the licensing, shaking **** waiting to turn, turn the animation. This series of animations is relatively complex. By analyzing the coherence of animations and whether there are interactive parts, the whole animation is divided into four stages, which are shown as follows:

  • The first stage: first in the middle of the page to present a pile of cards (7) stack effect, after the card by card action. The page tiled from top to bottom and left to right.
  • The second stage: after the deal, all the cards present a water ripple shaking, waiting for the user to turn over the card.
  • Stage 3: after the user clicks a card, all the cards return to their position and no longer fluctuate. The card to flip the first dynamic effect, and show the amount of the flip, after a period of time, other cards also perform the flip effect, display the amount of information of other cards.
  • The fourth stage: the user turns the card while enlarging and moves to the center of the page, the transition effect of other cards moves down and disappears.

Considering the specific animation effects (such as the base of the card, the water ripple of the card flip, flip, etc.) through CSS may be compatible or difficult to achieve the reason, so the overall plan to use Lottie to achieve. Lottie itself is not described in this article, but can be viewed here.

In the above animation, because the amount information of the card face of the flip card is delivered by the back-end calculation, and the cards that the user turns are unknown and random, it is impossible to achieve this through a simple Lottie that contains all stages 1-4. Therefore, the plan is to implement phased multiple Lotties.

Using a multi-stage Lottie scheme, the four stages can be broken down as follows:

  • In the first and second phases, there is no interaction, so a Lottie that deals is used to play the animation.

  • First initialize the Lottie that deals

Cards = Lottie. LoadAnimation ({path: 'http://xxxxxxx.json',container: this.$refs.card, // Dom renderer: 'svg', loop: true, autoplay: false });Copy the code
Copy

  • After initialization, play deal and wave action
this.cards.addEventListener('data_ready', () => { this.cards.playSegments([0, 45], true); }); this.cards.onLoopComplete = () => { this.cards.playSegments([45, 104], true); // 45, 104 is the number of frames of water ripple};Copy the code
Copy

  • After the completion of the second stage, a single-card Lottie is superposed on each of the 7 wave cards that have been dealt through positioning (only the clickable hot zone is drawn, and the animation of the single card is not shown in the view), and the single card is initialized and waiting for the flip.

    this.amounts.forEach((card, index) => { this.card[index] = lottie.loadAnimation({ path: 'http://xxxxxxx.json', container: this.getref (index), // 7 cards dom renderer: 'SVG ', loop: false, autoplay: false}); });Copy the code
    Copy

  • The third stage, the moment the card is clicked, performs the following events:

1, network request, get 7 cards turned over the amount of information

2. Hide the Lottie of the first and second stages

3. Display the 7 single-card Lotties initialized in the previous step

4, all the cards back (that is, the card stopped the water wave floating, waiting for the flip state).

5. Through lottieAPI, make the clicked card play the flip effect.

6, through the timer, at a specific time, the implementation of playing other cards flip effect.

  • Click, network request, get the amount of the flop.
  • // All cards are in place 
this.cards.goToAndStop(155, true); // 155 is the number of frames in which the card is repositionedCopy the code
Copy

  • Perform the turn effect of cards.
// this.card[I]. PlaySegments ([200, 210], true); // 200-210 is the number of animation frames to perform the flipCopy the code
Copy

  • Through the timer, let the other cards also perform the flip card dynamic effect
setTimeout(() => {
  this.card[i].playSegments([200, 210], true);
}, 200);
Copy the code
Copy

  • In the fourth stage, cSS3 animation is used for transition and gradient. Complete the rest of the kinetic effects.

conclusion

For this complex animation effect with interaction, Lottie + timer + CSS3 animation is considered.

The whole idea is to analyze the animation effect, split the animation stage, distinguish interactive animation and pure display animation. For the parts that need interaction, hide them and overlay them on top of the pure display animation Lottie and leave a hot area for interactive clicking. Then, through lottieAPI, keyframes are played during interaction and the display of pure display animation is controlled. Finally, the CSS section is used to improve the parts that Lottie cannot achieve.

This project adopts this scheme to achieve, the overall effect is good, to achieve visual expectations. To provide a way of thinking for your reference.