資訊專欄INFORMATION COLUMN
摘要：從形狀到另外一個(gè)形狀的轉(zhuǎn)化就是移動(dòng)坐標(biāo)點(diǎn)而已。今天我們來使用之前多次提到過的這個(gè)庫(kù)來實(shí)現(xiàn)動(dòng)畫。在執(zhí)行的時(shí)候，會(huì)自動(dòng)讀取數(shù)組里顏色的值，填充到路徑中去，從而實(shí)現(xiàn)兩個(gè)形狀填充顏色的動(dòng)畫。
這個(gè)實(shí)例來看看如何使用anime.js來實(shí)現(xiàn)一個(gè)形變（morphing）動(dòng)畫。
至于什么是morphing動(dòng)畫，看完下面這個(gè)圖就知道了。
簡(jiǎn)而言之，就是不同形狀之間能平滑的轉(zhuǎn)換。這個(gè)用SVG來做羹適合不過了，因?yàn)镾VG本身的形狀就是有各種不同坐標(biāo)之間的線段繪制而成的。從形狀到另外一個(gè)形狀的轉(zhuǎn)化就是移動(dòng)坐標(biāo)點(diǎn)而已。
說起來貌似挺簡(jiǎn)單的，其實(shí)真正要實(shí)現(xiàn)起來還是有點(diǎn)復(fù)雜的。今天我們來使用之前多次提到過的anime.js這個(gè)js庫(kù)來實(shí)現(xiàn)morphing動(dòng)畫。
關(guān)于anime.js的基礎(chǔ)知識(shí)，可以去看看以前發(fā)過的這篇文章。
在anime.js中提供了做動(dòng)畫必不可少時(shí)間軸的管理功能，可以輕松的控制和管理動(dòng)畫的播放。
具體可以去官網(wǎng)的文檔看看，Timeline。
下面來看看要實(shí)現(xiàn)的效果：
使用anime.js實(shí)現(xiàn)起來非常簡(jiǎn)單，只需要準(zhǔn)備兩個(gè)形狀的SVG即可。
觀察這個(gè)效果，可以發(fā)現(xiàn)這個(gè)效果主要是形狀之間的轉(zhuǎn)化，同時(shí)還有顏色的變化。
首先默認(rèn)顯示的F這個(gè)字母，結(jié)構(gòu)如下：
SVG morph in HTML, CSS & JS
Powered by anime-js
接下來就是使用anime.js來實(shí)現(xiàn)形變動(dòng)畫效果。
首先聲明一個(gè)時(shí)間軸：
var socialTimeline = anime.timeline({ autoplay: true, direction: "alternate", loop: true });
中間的幾個(gè)參數(shù)也非常容易理解，自動(dòng)循環(huán)來回播放效果。
下面就是具體動(dòng)畫效果的編寫，顯示形狀的變化，即從字母F轉(zhuǎn)變?yōu)閠witter的logo。
代碼如下：
socialTimeline
.add({
targets: ".path",
d: {
value: [
"m 41.416254,90 c -0.327378,-7.4702 0.20833,-32.7284 0,-39.901 -5.386902,-0.2083 -4.521603,0.3274 -9.848987,0 0.20833,-5.50595 0.36436,-7.66666 0.126269,-13.32142 4.646472,0.0181 3.439989,-0.009 9.848987,-0.1894 0.09586,-3.7736 0.133082,-3.0791 0.126269,-7.38674 0.18259,-3.73943 -0.486609,-10.54308 4.293149,-14.96288 4.779758,-4.4198 13.606811,-3.64808 22.223356,-3.53554 -0.04417,5.73754 -0.03936,9.37986 0,12.87945 -5.049924,0.46388 -7.309188,-0.33689 -10.85914,1.26269 -1.403378,3.17794 -1.569601,4.80531 -1.262691,11.93242 3.147964,-0.13336 8.201788,-0.1378 12.626907,0 -0.995158,6.00899 -0.948285,7.62376 -1.767767,13.06882 -3.676625,0.088 -5.605721,-0.1488 -11.111678,0 -0.148814,6.756 0.357147,33.0107 0,40.1536 -6.428576,0.1786 -8.174438,-0.03 -14.394674,0 z",
"m 10.44335,90 c 11.073313,0.3952 19.483106,-1.8358 23.901837,-7.1603 -7.9736,-1.4292 -11.832311,-4.1933 -15.078321,-11.0837 3.459698,0.8219 5.795894,0.6358 7.606781,-0.607 -7.19593,-1.719 -12.734543,-6.7971 -13.741664,-15.836 2.766355,1.55307 5.466848,2.66623 7.828682,2.0203 -4.336544,-2.92911 -9.838998,-10.47636 -5.555839,-22.47589 8.400675,11.87052 23.824269,17.67568 33.840111,17.67767 -0.936406,-9.74688 5.88057,-19.46521 15.302849,-19.97853 8.13118,-0.50719 10.57457,4.01944 12.476346,4.82624 3.644547,0.13419 7.393301,-1.74401 10.354063,-3.53553 -1.380842,4.47157 -5.06769,5.62903 -6.313453,8.58629 5.42317,0.41513 5.891376,-1.53111 8.333758,-2.0203 -2.071414,3.75017 -5.393863,5.00034 -7.323606,8.08122 -1.633654,16.12573 -5.16049,27.57123 -14.647212,36.36553 -13.825764,11.3764 -34.755458,17.369 -56.984332,5.14 z"
],
duration: 700,
delay: 200,
easing: "easeInOutQuart"
},
選中路徑元素，然后選中要改變的屬性，我們這里是要改變路徑的值即d屬性，直接寫入要變化形狀的值就可以了。然后是動(dòng)畫時(shí)間，延遲和動(dòng)畫曲線等動(dòng)畫參數(shù)的調(diào)整，讓動(dòng)畫更自然。
后面是改變路徑形狀的填充和邊框顏色，非常簡(jiǎn)單。
比如改變填充顏色：
fill: {
value: ["#3b5998", "#4099ff"],
duration: 700,
delay: 200,
easing: "easeInOutQuart"
},
這里顏色的值，是一個(gè)數(shù)組。在執(zhí)行的時(shí)候，anime.js會(huì)自動(dòng)讀取數(shù)組里顏色的值，填充到路徑中去，從而實(shí)現(xiàn)兩個(gè)形狀填充顏色的動(dòng)畫。
demo地址
通過上面一個(gè)簡(jiǎn)簡(jiǎn)單單的動(dòng)畫，可以發(fā)現(xiàn)使用anime.js來做SVG的動(dòng)畫，也非常的方便，主要是輕量級(jí)。
最近做了一個(gè)關(guān)于SVG的應(yīng)用的技術(shù)分享網(wǎng)站svgtrick.com，會(huì)同步一些文章到這里來，更多的關(guān)于SVG方面的技術(shù)知識(shí)可以去網(wǎng)站看看。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91431.html
摘要：了解的應(yīng)該會(huì)明白，一般在設(shè)計(jì)好基本的形狀的時(shí)候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個(gè)基本的形狀可以做出不同形狀的變化?？梢院蛯傩?，，元素和對(duì)象一起工作，制作出各種高性能，平滑過渡的動(dòng)畫效果。下面就針對(duì)來介紹下使用來實(shí)現(xiàn)動(dòng)畫。 何為Morphing動(dòng)畫 開始之前，先來了解下什么是Morphing動(dòng)畫。所謂Morphing動(dòng)畫是表示，同一個(gè)模型，從一個(gè)形狀變到另一個(gè)形狀。如下...
摘要：了解的應(yīng)該會(huì)明白，一般在設(shè)計(jì)好基本的形狀的時(shí)候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個(gè)基本的形狀可以做出不同形狀的變化?？梢院蛯傩裕?，元素和對(duì)象一起工作，制作出各種高性能，平滑過渡的動(dòng)畫效果。下面就針對(duì)來介紹下使用來實(shí)現(xiàn)動(dòng)畫。 何為Morphing動(dòng)畫 開始之前，先來了解下什么是Morphing動(dòng)畫。所謂Morphing動(dòng)畫是表示，同一個(gè)模型，從一個(gè)形狀變到另一個(gè)形狀。如下...
摘要：初始位置結(jié)束位置和持續(xù)時(shí)間是作為參數(shù)傳入配置的，因此計(jì)算已消耗時(shí)間就是完成動(dòng)畫的核心。下面就深入了解下它的核心。 本次解析將分為2篇文章，當(dāng)前是第一篇，第二篇在這里 另外，為了能更好的理解這個(gè)庫(kù)，個(gè)人寫了一個(gè)此庫(kù)的壓縮版，實(shí)現(xiàn)了核心的功能(主要也是為了更好理解核心功能)，內(nèi)容更少方便閱讀，地址在這里 介紹 anime一個(gè)JS輕量動(dòng)畫庫(kù)，摒棄了常規(guī)的left,top屬性，全面采用req...
摘要：知識(shí)掃盲簡(jiǎn)介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創(chuàng)建矢量圖。于年月日成為推薦標(biāo)準(zhǔn)。動(dòng)畫如果你問我為什么用做動(dòng)畫，而不是其他技術(shù)，那可以告訴你以下幾點(diǎn)本質(zhì)上是一種圖形繪制技術(shù)，廣泛用于矢量圖繪制，適用于多數(shù)商業(yè)，卡通圖片制作。 1、 svg知識(shí)掃盲 svg簡(jiǎn)介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...
摘要：知識(shí)掃盲簡(jiǎn)介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創(chuàng)建矢量圖。于年月日成為推薦標(biāo)準(zhǔn)。動(dòng)畫如果你問我為什么用做動(dòng)畫，而不是其他技術(shù)，那可以告訴你以下幾點(diǎn)本質(zhì)上是一種圖形繪制技術(shù)，廣泛用于矢量圖繪制，適用于多數(shù)商業(yè)，卡通圖片制作。 1、 svg知識(shí)掃盲 svg簡(jiǎn)介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...
閱讀 3674·2023-04-26 01:43
閱讀 3046·2021-10-14 09:42
閱讀 5732·2021-09-30 09:59
閱讀 2232·2021-09-04 16:40
閱讀 1278·2019-08-30 15:52
閱讀 899·2019-08-29 17:09
閱讀 2109·2019-08-26 13:37
閱讀 3593·2019-08-26 10:20
