Canvas制作点赞送心动画

Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。

没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。

经常玩抖音、火山小视频的朋友都会发现在礼物按钮旁边经常会出现一些动画效果，本篇博客波波将以示例分享点赞小爱心的制作过程。先看演示效果：

Canvas制作点赞送心动画

实现原理：

1.动画中每颗心都有自己的透明度，位移，角度，缩放的变化动画，针对这些动画，可以分别调用canvas的相关API：

  1. ctx.translate(this.x, this.y);
  2. ctx.rotate(this.angle);
  3. ctx.scale(this.scale, this.scale);
  4. ctx.globalAlpha = this.opacity;

2、在有大于1颗心的情况时，针对每颗心，在实现角度，缩放时必须要保存上一次canvas的状态，改变完成之后在恢复：

  1. ctx.save();
  2. ctx.translate(this.x, this.y);
  3. ctx.rotate(this.angle);
  4. ctx.scale(this.scale, this.scale);
  5. ctx.globalAlpha = this.opacity;
  6. ctx.restore();

3.计算心位移路径(3次被塞尔曲线)：

Canvas制作点赞送心动画

转换成js代码计算心的x,y方向上的位移：

  1.      /**
  2.      * 获得贝塞尔曲线路径
  3.      * 一共4个点
  4.      */
  5.      function getBezierLine(heart){
  6.          var obj = heart.bezierPoint;
  7.          var p0 = obj.p0;
  8.          var p1 = obj.p1;
  9.          var p2 = obj.p2;
  10.          var p3 = obj.p3;
  11.          var t = heart.bezierDis;
  12.          var cx = 3 * (p1.x - p0.x),
  13.          bx = 3 * (p2.x - p1.x) - cx,
  14.          ax = p3.x - p0.x - cx - bx,
  16.     cy = 3 * (p1.y - p0.y),
  17.     by = 3 * (p2.y - p1.y) - cy,
  18.     ay = p3.y - p0.y - cy - by,
  20.     xt = ax * (t * t * t) + bx * (t * t) + cx * t + p0.x,
  21.     yt = ay * (t * t * t) + by * (t * t) + cy * t + p0.y;
  23.     heart.bezierDis += heart.speed;
  25.     return {
  26.     xt: xt,
  27.     yt: yt
  28.     }
  29. }

路径如图所示：

Canvas制作点赞送心动画

根据曲线路径方法可以实现心的运动轨迹：

根据曲线路径方法可以实现心的运动轨迹：

4.针对每一帧需要动态修改，心的位移，角度，和缩放：

  1. /**
  2. * 计算缩放角度的方法
  3. */
  4. function getFScale(heart){
  5.     let _scale = heart.scale;
  7.     // 随着距离起始点的距离增加，scale不断变大
  8.     let dis = heart.orignY - heart.y;
  9.     _scale = (dis / heart.scaleDis);
  11.     // 当大于设置的阈值时变成1
  12.     if (dis >= heart.scaleDis) {
  13.         _scale = 1;
  14.     }
  16.     return _scale;
  17. }

5.计算心角度变化:

  1. /**
  2. * 计算心左右摇摆的方法
  3. */
  4. function rangeAngle(heart) {
  5.     let _angle = heart.angle;
  6.     // 心介于[start, end]之间不断变化角度
  7.     if(_angle >= heart.angelEnd) {
  8.     // 角度不断变小，向左摇摆
  9.     heart.angleLeft = false;
  10.     } else if (_angle <= heart.angelBegin){
  11.     // 角度不断变大，向又摇摆
  12.     heart.angleLeft = true;
  13.     }
  14.     // 动态改变角度
  15.     if (heart.angleLeft) {
  16.     _angle = _angle + 1;
  17.     } else {
  18.     _angle = _angle - 1;
  19.     }
  20.     return _angle;
  21. }

组件化：

整个组件代码不超过200行，相较于使用css3实现更加轻便，dom少，性能更好。

组件地址：https://github.com/lvming6816077/like-heart

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！