? ?平時的頁面點贊效果基本都是變色或者縮放以及旋轉(zhuǎn)等等很單一的交互動畫。
但是，如果想要做一個靈動的點贊特效虏杰，需要好好的構(gòu)思一下僵井。下面分享一下點贊代碼特效的制作思路。
第一步：
既然是點贊，那就真的要大拇指豎起來才叫做點贊，所以在腦海里腦圖的雛形就出來了。
這個效果涉及到了變形吱雏，如果采用幀動畫的方式，圖片體積大瘾境，最主要的是容易丟幀導(dǎo)致動畫不流暢歧杏。所以選擇方案是采用svg標簽和animejs來做一個svg的形變效果。讓大拇指動起來迷守。
具體方法犬绒，在某圖網(wǎng)站，或者阿里巴巴圖標兑凿，下載點贊的AI文件凯力。前幾篇寫過如何使用AI導(dǎo)出svg文件在這里就不再贅述。留意一下animejs的官網(wǎng)礼华，如果想要做svg的形變咐鹤，注意：形狀必須有?相同的點數(shù)?。
什么是形狀 ?相同的點數(shù) ?圣絮？
有一些ps或者ai軟件經(jīng)驗的同學(xué)就會明白祈惶，點數(shù)就是鋼筆工具勾線的錨點。
至此，我們來打開下載好的AI源文件捧请，為了保證有相同的點數(shù)凡涩，我們在改動AI源文件，修改路徑的時候保證不要刪掉任何一個錨點疹蛉。
這里單獨講一下導(dǎo)出突照。需要刪除AI源文件里面的描邊！切記氧吐，因為我們只需要路徑。填充屬性fill設(shè)置為none末盔。如果不這樣筑舅，生成出來的svg代碼太多，而且太亂不好整理陨舱。明確目標翠拣，我們只需要path路徑就可以。
我們來看一下游盲，如果不刪除AI源文件的路徑描邊的效果误墓，會有一個很難調(diào)整的bug。
繼續(xù)下面的操作：導(dǎo)出兩個svg益缎，第一個是豎起大拇指的谜慌。
第二個svg，當然就是要把大拇指給他掰彎莺奔，導(dǎo)出一個svg欣范。
鋼筆動一動，我們來看一下前后變化的對比令哟，切記恼琼，千萬不要刪除錨點。調(diào)整好屏富，導(dǎo)出第二個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>
單純的一個大拇指豎起的形變動畫效果就做好了晴竞。
第二步：我們已經(jīng)成功了70%，如果你實現(xiàn)了上面的代碼狠半，循環(huán)起來會覺得有點鬼畜噩死。
既然是發(fā)自內(nèi)心的點贊，就得有點力度神年，這樣才顯得真誠甜滨。
修改腦圖，加手腕處的旋轉(zhuǎn)：
好了很多瘤袖，可是動畫戛然而止比較生硬衣摩。
為了讓他靈動一些，我們的旋轉(zhuǎn)需要加一個緩沖進去。顯得buling~buling~的艾扮。
改腦圖既琴，加手腕緩沖：
好多了，這樣動畫就很有張力很生動泡嘴，贊的用力過猛甫恩。
第三步：聲情并茂
拇指也動起來了，手臂也抬起來了酌予，生動的點贊哪里可以缺少聲音磺箕。為了表現(xiàn)聲音，我們繼續(xù)修改腦圖抛虫。
以射線的聚散來體現(xiàn)“聲”的效果松靡。
除了第一步的形變動畫，后來的這兩個步驟建椰，完全可以用scc來控制雕欺，通過控制時間差來排列動畫的順序。這就需要耐心的花點時間來微調(diào)了棉姐。
最終效果：
全部代碼如下：
<!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>
這就是整個效果的全部代碼伞矩。
動畫細節(jié)方面 ??按需調(diào)整笛洛。
記得要 ? 多動手點贊哦~
