平时的页面点赞效果基本都是变色或者缩放以及旋转等等很单一的交互动画。
但是，如果想要做一个灵动的点赞特效，需要好好的构思一下。下面分享一下点赞代码特效的制作思路。
第一步：
既然是点赞，那就真的要大拇指竖起来才叫做点赞，所以在脑海里脑图的雏形就出来了。
大拇指
这个效果涉及到了变形，如果采用帧动画的方式，图片体积大，最主要的是容易丢帧导致动画不流畅。所以选择方案是采用svg标签和animejs来做一个svg的形变效果。让大拇指动起来。
具体方法，在某图网站，或者阿里巴巴图标，下载点赞的AI文件。前几篇写过如何使用AI导出svg文件在这里就不再赘述。留意一下animejs的官网，如果想要做svg的形变，注意：形状必须有 相同的点数 。
官网提示
什么是形状 相同的点数 ？
有一些ps或者ai软件经验的同学就会明白，点数就是钢笔工具勾线的锚点。
至此，我们来打开下载好的AI源文件，为了保证有相同的点数，我们在改动AI源文件，修改路径的时候保证不要删掉任何一个锚点。
这里单独讲一下导出。需要删除AI源文件里面的描边！切记，因为我们只需要路径。填充属性fill设置为none。如果不这样，生成出来的svg代码太多，而且太乱不好整理。明确目标，我们只需要path路径就可以。
导出注意
AI导出svg须知
我们来看一下，如果不删除AI源文件的路径描边的效果，会有一个很难调整的bug。
继续下面的操作：导出两个svg，第一个是竖起大拇指的。
第一个svg
第二个svg，当然就是要把大拇指给他掰弯，导出一个svg。
钢笔动一动，我们来看一下前后变化的对比，切记，千万不要删除锚点。调整好，导出第二个svg
第二个svg
上代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点赞特效</title></head><script src="./anime.min.js"></script><style> .vlike{ width: 60px; height: 60px; position: relative; margin-right: 4px;}</style><body> <div class="vlike"> <svg version="1.1" x="0px" y="0px" viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;"> <path class=" path2 likeDou1 " style="fill:none;stroke:#5F5F5F;stroke-width:80;stroke-miterlimit:10;" d="M727.746,1382.976H624.179 c-52.351,0-95.184-42.833-95.184-95.184V859.15c0-52.351,42.833-95.184,95.184-95.184h103.567c52.351,0,95.184,42.833,95.184,95.184 v428.642C822.93,1340.143,780.097,1382.976,727.746,1382.976z M1033.08,1382.976h324.092c80.729,0,147.455-62.951,152.15-143.544 l23.508-403.49c3.087-52.982-39.047-97.642-92.119-97.642h-217.735c16.291-69.816,25.589-134.192,15.213-205.129 c-4.157-28.421-21.015-77.216-37.537-100.711c-33.832-48.113-111.054-93.852-157.881-58.26 c-34.111,25.927-21.668,105.331-23.531,156.901c-1.547,42.818-8.152,85.667-19.95,126.857 c-19.74,68.919-88.657,127.887-154.516,156.208"/> </svg> </div></body></html><script>var timeline = anime.timeline({ autoplay: true, direction: "alternate", loop: true});console.log(timeline)timeline.add({ targets: ".path2", d: { value: [ "M727.746,1382.976H624.179 c-52.351,0-95.184-42.833-95.184-95.184V859.15c0-52.351,42.833-95.184,95.184-95.184h103.567c52.351,0,95.184,42.833,95.184,95.184 v428.642C822.93,1340.143,780.097,1382.976,727.746,1382.976z M1033.08,1382.976h324.092c80.729,0,147.455-62.951,152.15-143.544 l23.508-403.49c3.087-52.982-39.047-97.642-92.119-97.642h-217.735c49.659-43.498,25.868-19.967,79.358-66.633 c21.644-18.883,58.336-42.446,82.667-58.667c40-26.667,16.831-79.322-52-82c-59.333-2.308-112.667,2.667-157.333,32.667 c-36.446,24.479-121.543,73.489-155.333,106.667c-51.155,50.226-109.701,115.511-175.559,143.833", "M727.746,1382.976H624.179 c-52.351,0-95.184-42.833-95.184-95.184V859.15c0-52.351,42.833-95.184,95.184-95.184h103.567c52.351,0,95.184,42.833,95.184,95.184 v428.642C822.93,1340.143,780.097,1382.976,727.746,1382.976z M1033.08,1382.976h324.092c80.729,0,147.455-62.951,152.15-143.544 l23.508-403.49c3.087-52.982-39.047-97.642-92.119-97.642h-217.735c16.291-69.816,25.589-134.192,15.213-205.129 c-4.157-28.421-21.015-77.216-37.537-100.711c-33.832-48.113-111.054-93.852-157.881-58.26 c-34.111,25.927-21.668,105.331-23.531,156.901c-1.547,42.818-8.152,85.667-19.95,126.857 c-19.74,68.919-88.657,127.887-154.516,156.208", ], duration: 200, easing: "easeInOutQuad" }, delay: 100,})timeline.play()</script>
单纯的一个大拇指竖起的形变动画效果就做好了。
第二步：我们已经成功了70%，如果你实现了上面的代码，循环起来会觉得有点鬼畜。
既然是发自内心的点赞，就得有点力度，这样才显得真诚。
修改脑图，加手腕处的旋转：
旋转
好了很多，可是动画戛然而止比较生硬。
为了让他灵动一些，我们的旋转需要加一个缓冲进去。显得buling~buling~的。
改脑图，加手腕缓冲：
用力赞
好多了，这样动画就很有张力很生动，赞的用力过猛。
第三步：声情并茂
拇指也动起来了，手臂也抬起来了，生动的点赞哪里可以缺少声音。为了表现声音，我们继续修改脑图。
以射线的聚散来体现“声”的效果。
最终脑图设计
除了第一步的形变动画，后来的这两个步骤，完全可以用scc来控制，通过控制时间差来排列动画的顺序。这就需要耐心的花点时间来微调了。
最终效果：
细节按需调整
应用
全部代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点赞特效</title></head><script src="./anime.min.js"></script><style> .vlike{ width: 60px; height: 60px; position: relative; margin-right: 4px;}/* 大拇指动画 */.thumb{ animation: thumb 1s linear infinite; animation-fill-mode: forwards; transform-origin: 0% 100%;}@keyframes thumb { /* 这个动画适合有色logo，突出行为 */ 0% { transform:rotate(35deg); -ms-transform:rotate(35deg); /* IE 9 */ -moz-transform:rotate(35deg); /* Firefox */ -webkit-transform:rotate(35deg); /* Safari 和 Chrome */ -o-transform:rotate(35deg); /* Opera */ } 40% { transform:rotate(-6deg); -ms-transform:rotate(-6deg); /* IE 9 */ -moz-transform:rotate(-6deg); /* Firefox */ -webkit-transform:rotate(-6deg); /* Safari 和 Chrome */ -o-transform:rotate(-6deg); /* Opera */ } 60% { transform:rotate(3deg); -ms-transform:rotate(3deg); /* IE 9 */ -moz-transform:rotate(3deg); /* Firefox */ -webkit-transform:rotate(3deg); /* Safari 和 Chrome */ -o-transform:rotate(3deg); /* Opera */ } 100% { transform:rotate(0deg); -ms-transform:rotate(0deg); /* IE 9 */ -moz-transform:rotate(0deg); /* Firefox */ -webkit-transform:rotate(0deg); /* Safari 和 Chrome */ -o-transform:rotate(0deg); /* Opera */ }}.light>path { stroke-dasharray: 600; stroke-dashoffset: 1200; /* animation: dash 3s linear infinite; */ animation: light 1s linear infinite; animation-fill-mode: forwards; /* 填充的透明度 */ fill-opacity:0; /* 描边画笔是圆头 */ stroke-linecap:'round'; /* 描边画笔拐角是圆头 */ stroke-linejoin:'round'; opacity: 1; } @keyframes light { /* 这个动画适合有色logo，突出行为 */ 0% { opacity: 0; stroke-dashoffset: 1200; } 59%{ opacity: 0; } 60% { opacity: 1; } 99% { stroke-dashoffset: 0; opacity: 1; } 100%{ opacity: 0; } }</style><body> <div class="vlike"> <svg version="1.1" x="0px" y="0px" viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;"> <path class=" path2 thumb " style="fill:none;stroke:#5F5F5F;stroke-width:80;stroke-miterlimit:10;" d="M727.746,1382.976H624.179 c-52.351,0-95.184-42.833-95.184-95.184V859.15c0-52.351,42.833-95.184,95.184-95.184h103.567c52.351,0,95.184,42.833,95.184,95.184 v428.642C822.93,1340.143,780.097,1382.976,727.746,1382.976z M1033.08,1382.976h324.092c80.729,0,147.455-62.951,152.15-143.544 l23.508-403.49c3.087-52.982-39.047-97.642-92.119-97.642h-217.735c16.291-69.816,25.589-134.192,15.213-205.129 c-4.157-28.421-21.015-77.216-37.537-100.711c-33.832-48.113-111.054-93.852-157.881-58.26 c-34.111,25.927-21.668,105.331-23.531,156.901c-1.547,42.818-8.152,85.667-19.95,126.857 c-19.74,68.919-88.657,127.887-154.516,156.208"/> <g class=" light "> <path style="fill:none;stroke:#5F5F5F;stroke-width:50;stroke-miterlimit:10;" d="M1309.577,305h324.092"/> <path style="fill:none;stroke:#5F5F5F;stroke-width:50;stroke-miterlimit:10;" d="M1309.577,375.23l297.235,129.178"/> <path style="fill:none;stroke:#5F5F5F;stroke-width:50;stroke-miterlimit:10;" d="M1299.133,209.163L1597.555,82.75"/> <path style="fill:none;stroke:#5F5F5F;stroke-width:50;stroke-miterlimit:10;" d="M894.004,301.197H569.912"/> <path style="fill:none;stroke:#5F5F5F;stroke-width:50;stroke-miterlimit:10;" d="M903.854,210.545L606.619,81.367"/> <path style="fill:none;stroke:#5F5F5F;stroke-width:50;stroke-miterlimit:10;" d="M904.447,380.061L606.026,506.474"/> </g> </svg> </div></body></html><script>var timeline = anime.timeline({ autoplay: true, // direction: "alternate", loop: true});timeline.add({ targets: ".path2", d: { value: [ "M727.746,1382.976H624.179 c-52.351,0-95.184-42.833-95.184-95.184V859.15c0-52.351,42.833-95.184,95.184-95.184h103.567c52.351,0,95.184,42.833,95.184,95.184 v428.642C822.93,1340.143,780.097,1382.976,727.746,1382.976z M1033.08,1382.976h324.092c80.729,0,147.455-62.951,152.15-143.544 l23.508-403.49c3.087-52.982-39.047-97.642-92.119-97.642h-217.735c49.659-43.498,25.868-19.967,79.358-66.633 c21.644-18.883,58.336-42.446,82.667-58.667c40-26.667,16.831-79.322-52-82c-59.333-2.308-112.667,2.667-157.333,32.667 c-36.446,24.479-121.543,73.489-155.333,106.667c-51.155,50.226-109.701,115.511-175.559,143.833", "M727.746,1382.976H624.179 c-52.351,0-95.184-42.833-95.184-95.184V859.15c0-52.351,42.833-95.184,95.184-95.184h103.567c52.351,0,95.184,42.833,95.184,95.184 v428.642C822.93,1340.143,780.097,1382.976,727.746,1382.976z M1033.08,1382.976h324.092c80.729,0,147.455-62.951,152.15-143.544 l23.508-403.49c3.087-52.982-39.047-97.642-92.119-97.642h-217.735c16.291-69.816,25.589-134.192,15.213-205.129 c-4.157-28.421-21.015-77.216-37.537-100.711c-33.832-48.113-111.054-93.852-157.881-58.26 c-34.111,25.927-21.668,105.331-23.531,156.901c-1.547,42.818-8.152,85.667-19.95,126.857 c-19.74,68.919-88.657,127.887-154.516,156.208", ], duration: 200, easing: "easeInOutQuad" }, delay: 300, endDelay:500,})timeline.play()</script>
这就是整个效果的全部代码。
动画细节方面 按需调整。
记得要 多动手点赞哦~
网友评论