国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

anime.js 實戰:實現一個 SVG 形變(morphing)動畫

iamyoung001 / 3683人閱讀

摘要:從形狀到另外一個形狀的轉化就是移動坐標點而已。今天我們來使用之前多次提到過的這個庫來實現動畫。在執行的時候,會自動讀取數組里顏色的值,填充到路徑中去,從而實現兩個形狀填充顏色的動畫。

這個實例來看看如何使用anime.js來實現一個形變(morphing)動畫。

至于什么是morphing動畫,看完下面這個圖就知道了。

簡而言之,就是不同形狀之間能平滑的轉換。這個用SVG來做羹適合不過了,因為SVG本身的形狀就是有各種不同坐標之間的線段繪制而成的。從形狀到另外一個形狀的轉化就是移動坐標點而已。

說起來貌似挺簡單的,其實真正要實現起來還是有點復雜的。今天我們來使用之前多次提到過的anime.js這個js庫來實現morphing動畫。

關于anime.js的基礎知識,可以去看看以前發過的這篇文章。

anime.js中提供了做動畫必不可少時間軸的管理功能,可以輕松的控制和管理動畫的播放。

具體可以去官網的文檔看看,Timeline。

下面來看看要實現的效果:

使用anime.js實現起來非常簡單,只需要準備兩個形狀的SVG即可。

觀察這個效果,可以發現這個效果主要是形狀之間的轉化,同時還有顏色的變化。

首先默認顯示的F這個字母,結構如下:

SVG morph in HTML, CSS & JS

Powered by anime-js

接下來就是使用anime.js來實現形變動畫效果。

首先聲明一個時間軸:

var socialTimeline = anime.timeline({ autoplay: true, direction: "alternate", loop: true });

中間的幾個參數也非常容易理解,自動循環來回播放效果。

下面就是具體動畫效果的編寫,顯示形狀的變化,即從字母F轉變為twitter的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屬性,直接寫入要變化形狀的值就可以了。然后是動畫時間,延遲和動畫曲線等動畫參數的調整,讓動畫更自然。

后面是改變路徑形狀的填充和邊框顏色,非常簡單。

比如改變填充顏色:

 fill: {
      value: ["#3b5998", "#4099ff"],
      duration: 700,
      delay: 200,
      easing: "easeInOutQuart"
    },

這里顏色的值,是一個數組。在執行的時候,anime.js會自動讀取數組里顏色的值,填充到路徑中去,從而實現兩個形狀填充顏色的動畫。

demo地址

通過上面一個簡簡單單的動畫,可以發現使用anime.js來做SVG的動畫,也非常的方便,主要是輕量級。

最近做了一個關于SVG的應用的技術分享網站svgtrick.com,會同步一些文章到這里來,更多的關于SVG方面的技術知識可以去網站看看。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91431.html

相關文章

  • 使用 SVG 來制作 Morphing 動畫效果

    摘要:了解的應該會明白,一般在設計好基本的形狀的時候,使用貝賽爾曲線工具,可以做很多的變化,從而使用一個基本的形狀可以做出不同形狀的變化。可以和屬性,,元素和對象一起工作,制作出各種高性能,平滑過渡的動畫效果。下面就針對來介紹下使用來實現動畫。 何為Morphing動畫 開始之前,先來了解下什么是Morphing動畫。所謂Morphing動畫是表示,同一個模型,從一個形狀變到另一個形狀。如下...

    張漢慶 評論0 收藏0
  • 使用 SVG 來制作 Morphing 動畫效果

    摘要:了解的應該會明白,一般在設計好基本的形狀的時候,使用貝賽爾曲線工具,可以做很多的變化,從而使用一個基本的形狀可以做出不同形狀的變化。可以和屬性,,元素和對象一起工作,制作出各種高性能,平滑過渡的動畫效果。下面就針對來介紹下使用來實現動畫。 何為Morphing動畫 開始之前,先來了解下什么是Morphing動畫。所謂Morphing動畫是表示,同一個模型,從一個形狀變到另一個形狀。如下...

    _Dreams 評論0 收藏0
  • [源碼閱讀]解析Anime(JS動畫庫)核心(1)

    摘要:初始位置結束位置和持續時間是作為參數傳入配置的,因此計算已消耗時間就是完成動畫的核心。下面就深入了解下它的核心。 本次解析將分為2篇文章,當前是第一篇,第二篇在這里 另外,為了能更好的理解這個庫,個人寫了一個此庫的壓縮版,實現了核心的功能(主要也是為了更好理解核心功能),內容更少方便閱讀,地址在這里 介紹 anime一個JS輕量動畫庫,摒棄了常規的left,top屬性,全面采用req...

    魏憲會 評論0 收藏0
  • svg系列:1.svg基礎知識 & 不一樣的svg動畫世界

    摘要:知識掃盲簡介,可縮放矢量圖形,具有放大縮小不失真的特性,可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫,而不是其他技術,那可以告訴你以下幾點本質上是一種圖形繪制技術,廣泛用于矢量圖繪制,適用于多數商業,卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics),可縮放矢量圖形,具有放大縮小不失真的特性,可以用來...

    wwolf 評論0 收藏0
  • svg系列:1.svg基礎知識 & 不一樣的svg動畫世界

    摘要:知識掃盲簡介,可縮放矢量圖形,具有放大縮小不失真的特性,可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫,而不是其他技術,那可以告訴你以下幾點本質上是一種圖形繪制技術,廣泛用于矢量圖繪制,適用于多數商業,卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics),可縮放矢量圖形,具有放大縮小不失真的特性,可以用來...

    DirtyMind 評論0 收藏0

發表評論

0條評論

iamyoung001

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<