使用 Snap.svg 來實現一個具有 morphing 動畫效果的按鈕動效

jubincn 發布于2019-08-21 14:29 / 1630人閱讀

摘要：今天這篇文章來講一個動畫在界面上一個具體的運用即具有動畫效果的播放按鈕。在后面實現動畫效果的時候要用到。下面來看下實現動畫效果核心代碼所謂動畫效果，就是從一個形狀變到另一個形狀。由于使用方法，它們之間的變化會有一個動畫效果即動畫效果。

前面有專門寫過一篇morphing動畫基礎知識的文章，不了解的話可以去這里看看。

今天這篇文章來講一個morphing動畫在UI界面上一個具體的運用即具有morphing動畫效果的播放按鈕。開始之前可以去YouTube網站上看看，它的播放和暫停按鈕不是簡單的切換，而是有一個過渡的動畫效果，即morphing動畫效果。如下圖所示：

通過上面可以看出，播放與暫停之間的按鈕是用一個morphing過渡的動畫效果。當然像這么簡單的效果使用CSS也可以實現。

但是如果有大量的類似的morphing按鈕動畫效果，使用SVG無疑會更加簡單方便，實現效率也更高。下面就一步一步來完成這個morphing動畫效果，這里會使用到snap svg 這個js庫來作為基礎的SVG操作庫，它的作用就相當于jquery，提供了一整套的SVG解決方案，功能非常強大，詳細的使用方法可以官方的文檔地址看看。

具體實現的效果如下圖所示：

準備工作

首先是在矢量設計軟件中設計好播放與暫停兩個按鈕，然后導出path（路徑），如下所示：

暫停按鈕的path：

播放按鈕的path：

因為我們這里會是在播放與暫停兩個狀態之間不停的切換，所以我們這里會使用SVG中的use來引用按鈕。即先把兩個按鈕定義在defs標簽中，然后通過use來引用具體的按鈕。如下代碼所示：

在defs元素中，我們不但定義了播放和暫停兩個按鈕，還分別定義了自定義屬性data-state即表示當前按鈕的下一個狀態，比如暫停按鈕的下一個狀態是播放(playing)。在后面實現morphing動畫效果的時候要用到。

添加一些基本的樣式：

.container {
    width: 500px;
    margin: 0 auto;
}
.button {
    padding: 0;
    width: 500px;
    height: 500px;
    border: 0;
    background-color: white;
    outline: none;
}

運行效果如下圖所示：

javascript編碼實現morphing動畫效果

首先在頁面中引入Snap.svg文件：

https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js

js準備

先定義一個基本的方法：

var playButton = {};

獲取基本的元素以及一些初始狀態方法：

var playButton = {
    
      el: document.querySelector(".js-button"),
      
      //獲取兩個按鈕
    iconEls: {
        playing: document.querySelector("#pause-icon"),
        paused:  document.querySelector("#play-icon")
    },
    
    //用來存儲按鈕的兩個狀態
    nextState: {
        playing: "paused",
        paused:  "playing"
    },
    
    //初始方法
    init: function () {
        this.setInitialState();
        this.replaceUseEl();
        this.el.addEventListener("click", this.toggle.bind(this));
    }

}

這里來解釋下初始方法：

setInitialState() 方法是用來獲取當前按鈕下一個的狀態(data-state)屬性的值的。

replaceUseEl() 方法是用來重置按鈕的。因為要實現SVG Morphing動畫效果，需要在path之間變換，所以需要在初始化的時候來使用path來代替use標簽。而初始使用use標簽是為了照顧頁面在剛開始渲染的時候js還沒加載完的時候能正常顯示。

這兩個方法都使用到了Snap.svg中的一些基本方法，比如新建一個SVG元素(path)，就可以使用paper方法：

Snap("svgicon").paper.path();

上面的代碼表示在ID為svgicon這個SVG標簽中創建一個path元素。

一些初始化設置好后，接下來就是編寫點擊效果即點擊的時候在播放和暫停之間切換并且帶有Morphing動畫效果。這里要使用到Snap.svg中animate方法：

Element.animate(attrs, duration, [easing], [callback])

參數

attrs 對象，描述屬性的鍵值對。

duration 數值，動畫持續的時間，單位是毫秒。

easing 函數，自定義的或者mina提供的緩動函數。

callback 函數，動畫結束時候的回調。

下面來看下實現Morphing動畫效果核心代碼：

toggle: function () {
        var path = Snap.select(".js-icon");
        this.goToNextState();
        path.animate({
            d:this.stateIconPath()
        },500,mina.linear);
    },
goToNextState: function () {
        this.state = this.nextState[this.state];
    },
stateIconPath: function () {
        return this.iconEls[this.state].getAttribute("d");
    }

所謂Morphing動畫效果，就是從一個形狀變到另一個形狀。具體到我們這里就是在播放與暫停兩個狀態之間切換，由于按鈕是path元素，所以只需要改變path元素中切換播放與暫停按鈕中path元素中的d的值就可以了。

在toggle方法中，首先通過goToNextState()方法來獲取當前按鈕的下一個狀態；通過stateIconPath()方法來獲取當前按鈕下一個狀態的path屬性中d的值，然后在animate方法中改變當前的path中的d的值即下一個按鈕狀態path中的d的值。由于使用animate方法，它們之間的變化會有一個動畫效果即Morphing動畫效果。

詳細的代碼可以去這里查看。

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

云服務器 GPU云服務器 js實現f11的效果浮動效果動畫翻轉動畫效果按鈕點擊動畫

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

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

可能是最全的前端動效庫匯總

摘要：非常的龐大，而且它是完全為設計而生的動效庫。它運行于純粹的之上，是目前最強健的動畫資源庫之一。可能是創建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現實生活中的物理運動碰撞慣性動畫庫。收集日期為2019-02-28，★代表當時的該項目在github的star數量 Animate.css 56401 ★ 一個跨瀏覽器的動效基礎庫，是許多基礎動...

afishhhhh 2019-05-23 16:24 評論0 收藏0
svg系列：1.svg基礎知識 & 不一樣的svg動畫世界

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

wwolf 2019-08-02 16:10 評論0 收藏0
svg系列：1.svg基礎知識 & 不一樣的svg動畫世界

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

DirtyMind 2019-08-23 16:30 評論0 收藏0
SVG

摘要：目前只提供了一些基礎功能。中與的區別開發者第一次接觸手寫那種，雖然很多情況都有設計師使用來完成這項工作，但還是不排除需要利用到的每個元素。輕量級，具備靈活的來自團隊，全球非常出名的可視化團隊。于是筆者嘗試著把移植到中。使用SVG + CSS實現動態霓虹燈文字效果早上無意間進入一個網站，看到他們的LOGO效果略屌，如圖：剛開始以為是gif動畫之類的，審查元素發現居然是用SVG + ...

104828720 2019-08-29 14:00 評論0 收藏0
Snap.svg 基本知識入門

摘要：因為的創造者正是的創造者，而也是用來操作的。它的主要一個功能是能使老版本的瀏覽器也能支持，比如等。首先準備一個基本開始骨架，基本的結構以及引入這個庫。是不是似增相識。首先我們來創建一個橢圓并放置在上組圖形的中間。最近做了一個關于SVG的應用的技術分享網站svgtrick.com，會同步一些文章到這里來，更多的可以去網站看看。工欲善其事，必先利其器。要用svg制作復雜或者是高級的動畫...

fantix 2019-08-20 11:11 評論0 收藏0