Origin of the problem

Click like animation effect in punch duck app

advantage

Fireworks animation , Its animation effect is produced randomly . According to the UI In terms of designers , It can promote users to like more .

The problem is

The phenomenon ： In the punch list of the applet , give the thumbs-up 50 After more than one time , Maybe you can't continue to like it .

I guess the reason is to create 50 The canvas above Canvas, Every canvas loads 10 A picture , This leads to insufficient performance of applets , Stuck .

Complete source code

Complete source code , Please blog this link in the stream （ Click to see the original ） View in SoureMap To obtain a .

Small program fireworks like animation description ： Based on small programs Canvas Of ctx.draw() To achieve , Thanks to the Taro H5 There are corresponding draw It's the code that shows .

Part of the source code is as follows

const ctx = Taro.createCanvasContext('like-animation')

let _rw = canvasWidth / 300
let _rh = canvasHeight / 150

likeTimer = setInterval(() => {

  likeList = likeList.filter(_l => _l.d >= -30).map(_l => {
    _l = nextXY(_l)
    if (_l.d <= 0) {
      ctx.save()
      ctx.scale(_rw, _rh)
      ctx.beginPath()
      if (-_l.d > 20) {
        let _ga = (_l.d + 30) / 10
        ctx.globalAlpha = _ga > 0.2 ? _ga : 0
      }
      ctx.drawImage(_l.img, _l.x, _l.y, 18, 18)
      ctx.fill()
      ctx.restore()
    }
    return _l
  })

  if (likeList.length === 0) {
    clear(options)
  }

  ctx.draw()
}, 30)

//  Calculate the position of the picture 
function nextXY({ a, x, y, h, k, s, d, img }) {
  if (d <= 0) {
    x = x + s
    y = (a * Math.pow(x - h, 2)) + k
  }
  d = d - 3
  return { a, x, y, h, k, s, d, img }
}

Excellent articles in the industry

• Applet Canvas Performance optimization practice
• MDN canvas The optimization of the

Industry solutions

Live studio animation

Like animation found on Nuggets , Most of them are live studio animations , The realization principle is Canvas Draw pictures on , Of course, it can also be used CSS The animation . For details, please refer to 《H5 How to realize the live crazy like animation ？( Complete source code attached )》.

• Use CSS3 Animation, You need to create more animation elements , Add different animation delays .
• Use Canvas, You need to create a canvas , And load multiple graphics resources , Suitable for a single scene （ Such as live room ）

Twitter animation

stay Medium I found 《How Did They Do That? The Twitter “Like” Animation.》 It's based on sprite maps .

• The advantage is , It's done with a single element .
• The difficulties are ： Sprite has many animation details , More for designers , Developers can't configure the details themselves , Such as animation delay time and execution time

And in the CodePen Most of the animations found are SVG Realized , The effect is very good . But it can't be used directly in small programs SVG Animators , It can only be used as a background image to show .

Like the idea of animation

First of all, thank you "XboxYan" 《CSS It's a button that works with particles 》. I learned from its many circular gradients , Change the image of background-size and background-position Principle .

The effect I achieved

Round effect

• The like figure is a circle
• Like animation is by changing background-size and background-position To complete

.like-icon:before {
  background-size: 10px 10px, 20px 20px, 15px 15px, 20px 20px, 18px 18px, 10px 10px, 15px 15px, 10px 10px, 18px 18px, 15px 15px, 20px 20px, 18px 18px, 20px 20px, 15px 15px, 10px 10px, 20px 20px;
  background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
}
#checkbox:checked + label .like-icon:before {
  opacity: 1;
  background-size: 0px 0px;
  background-position: 5% 65%, 1% 44%, 8% 25%, 20% 12%, 40% 2%, 52% 0%, 65% 5%, 78% 15%, 95% 30%, 100% 55%, 8% 85%, 23% 100%, 42% 105%, 60% 99%, 75% 90%, 92% 84%;
  transition: opacity 0.25s, background-position .35s ease-in-out, background-size .5s ease-in-out;
}

The heart effect

• Like graphics changed from circle to heart
• Animation icon added the effect of switching zoom , With a little bit of elasticity

/*  heart-shaped  */
#checkbox:checked + label .like-icon:before {
  background-position: 5% 65%, 1% 44%, 8% 25%, 20% 12%, 40% 22%, 52% 40%, 65% 25%, 78% 15%, 95% 30%, 100% 55%, 8% 85%, 23% 100%, 42% 105%, 60% 99%, 75% 90%, 92% 84%;
}

/*  Like icon elastic effect  */
.like-icon {
  background: url('/images/posts/like-css3-animation/like-blue.png'), url('/images/posts/like-css3-animation/like-gray.png');
  background-size: 0px, 18px;
}
#checkbox:checked + label .like-icon {
  background-size: 18px, 0;
  transform: scale(1.05);
  transition: background-size .4s ease-in-out, transform 0.5s cubic-bezier(.97,.01,.76,4);
}

Heart animation tuning

In the actual digital change of like animation , There will be “ give the thumbs-up →1”、“9→10” The situation of .

• Overall left , The animation effect is ideal
• The whole is in the middle or on the right , When there is a change in the text , The position of the heart changes , At this point, you need to add some animation delay

/*  heart-shaped  */
#checkbox:checked + label .like-icon:before {
  opacity: 1;
  background-size: 0px 0px;
  background-position: 5% 65%, 1% 44%, 8% 25%, 20% 12%, 40% 22%, 52% 40%, 65% 25%, 78% 15%, 95% 30%, 100% 55%, 8% 85%, 23% 100%, 42% 105%, 60% 99%, 75% 90%, 92% 84%;
  transition: opacity 0.25s, background-position .35s ease-in-out, background-size .5s ease-in-out;
  transition-delay: 0.2s;
}

/*  Like icon elastic effect  */
.like-icon {
  background: url('/images/posts/like-css3-animation/like-blue.png'), url('/images/posts/like-css3-animation/like-gray.png');
  background-size: 0px, 18px;
}
#checkbox:checked + label .like-icon {
  background-size: 18px, 0;
  transform: scale(1.05);
  transition: background-size .4s ease-in-out, transform 0.5s cubic-bezier(.97,.01,.76,4);
  transition-delay: 0.2s;
}

summary

The animation in the studio , Use CSS3 Animation or Canvas It's going to be great , It just needs more animation elements . And I want to use One or two DOM Element coordination CSS Achieve more lightweight animation .

The next possible challenge

Josh God's praise animation is great , Next time I want to challenge to do a similar .

Preview URL ：Building a Modern-Day Hit Counter

thank

• Thank you, Li Bo 、 Xiaogu students before the realization of the complete point like animation
• Thanks Shuai 、 The animation modification suggestions provided by Lao Wu
• Thanks for my family's support