Question origin

Punch duck applet animation effect

advantages

Fireworks modelling animation, its animation effect is random generation. According to UI designers, this is to encourage users to like more.

Existing problems

Symptom: After more than 50 likes in the mini-program’s punch list, it may become impossible to like any more.

I guess the reason is to create more than 50 Canvas Canvas, each Canvas loaded 10 pictures, resulting in poor performance of the small program, appear stuck.

Complete source code

For the full source code, check out SoureMap at the Creek blog link.

Draw () based on the small program Canvas ctx.draw() to achieve, thanks to Taro H5 has the corresponding draw code to show.

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 image position
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 }
}
Copy the code

Excellent articles in the industry

  • Small program Canvas performance optimization combat
  • Optimization of MDN Canvas

Industry solutions

Studio animation

Search in the nuggets to like animation, most of the studio animation, the principle of drawing pictures on Canvas, of course, there are also the use of CSS animation. Specific can refer to “H5 live crazy like animation is how to achieve? (attached complete source code)”.

  • With CSS3 Animation, you need to create more Animation elements and add different Animation delays.
  • To use Canvas, you need to create a Canvas and load multiple graphic resources, suitable for use in a single scene (such as live broadcast)

Twitter animation

On Medium, I found “How Did They Do That? The Twitter” Like “Animation.” It was based on Sprite.

  • The advantage is that it can be done in a single element.
  • The difficulties are as follows: There are many animation details in Sprite images, most of which are defined by designers. Developers cannot configure details by themselves, such as animation delay time and execution time

And in CodePen search to animation for SVG implementation, the effect is very good. But you can’t animate SVG directly in small programs, you can only use it as a background.

Like the animation idea

Thanks to “XboxYan” “CSS to implement a particle motion button”. I learned from its multiple circular gradients and changed the principle of background-size and background-position of its pictures.

I achieved the effect

Effect of circular

  • The thumbs-up pattern is circular
  • Thumbs-up animations are made by changingbackground-size 和 background-positionTo complete the

.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.25 s, background-position .35s ease-in-out, background-size .5s ease-in-out;
}
Copy the code

Effect of heart

  • Thumbs-up pattern changed from round to heart
  • The animated icon has a toggle zoom effect with a little flexibility

/ * heart * /
#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 the elastic effect of the icon */
.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.5 s cubic-bezier(.97.01.76.4);
}
Copy the code

Heart animation tuning

In the actual like animation, there will be “❤ like →❤1”, “❤9→❤10”.

  • Overall left, animation is ideal
  • Overall center or right, heart position changes as text changes, need to add some animation delay

/ * heart * /
#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.25 s, background-position .35s ease-in-out, background-size .5s ease-in-out;
  transition-delay: 0.2 s;
}

/* Like the elastic effect of the icon */
.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.5 s cubic-bezier(.97.01.76.4);
  transition-delay: 0.2 s;
}
Copy the code

conclusion

CSS3 Animation or Canvas is great for live studio Animation, but requires more Animation elements. I wanted to use one or two DOM elements with CSS for lighter animation.

Next possible challenge

Josh’s likes are great, and I’d like to challenge myself to do a similar one next time.

Preview site: Building a Modern-day Hit Counter

Thank you

  • Thanks to Li Bo and Xiao Gu for the complete thumb-up animation
  • Thanks to Shuaishuai and Lao Wu for the animation modification suggestions
  • Thank you for your support