資訊專欄INFORMATION COLUMN
摘要：今天這篇文章來講一個(gè)動(dòng)畫在界面上一個(gè)具體的運(yùn)用即具有動(dòng)畫效果的播放按鈕。在后面實(shí)現(xiàn)動(dòng)畫效果的時(shí)候要用到。下面來看下實(shí)現(xiàn)動(dòng)畫效果核心代碼所謂動(dòng)畫效果，就是從一個(gè)形狀變到另一個(gè)形狀。由于使用方法，它們之間的變化會(huì)有一個(gè)動(dòng)畫效果即動(dòng)畫效果。
前面有專門寫過一篇morphing動(dòng)畫基礎(chǔ)知識(shí)的文章，不了解的話可以去這里看看。
今天這篇文章來講一個(gè)morphing動(dòng)畫在UI界面上一個(gè)具體的運(yùn)用即具有morphing動(dòng)畫效果的播放按鈕。開始之前可以去YouTube網(wǎng)站上看看，它的播放和暫停按鈕不是簡(jiǎn)單的切換，而是有一個(gè)過渡的動(dòng)畫效果，即morphing動(dòng)畫效果。如下圖所示：
通過上面可以看出，播放與暫停之間的按鈕是用一個(gè)morphing過渡的動(dòng)畫效果。當(dāng)然像這么簡(jiǎn)單的效果使用CSS也可以實(shí)現(xiàn)。
但是如果有大量的類似的morphing按鈕動(dòng)畫效果，使用SVG無疑會(huì)更加簡(jiǎn)單方便，實(shí)現(xiàn)效率也更高。下面就一步一步來完成這個(gè)morphing動(dòng)畫效果，這里會(huì)使用到snap svg 這個(gè)js庫來作為基礎(chǔ)的SVG操作庫，它的作用就相當(dāng)于jquery，提供了一整套的SVG解決方案，功能非常強(qiáng)大，詳細(xì)的使用方法可以官方的文檔地址看看。
具體實(shí)現(xiàn)的效果如下圖所示：
準(zhǔn)備工作首先是在矢量設(shè)計(jì)軟件中設(shè)計(jì)好播放與暫停兩個(gè)按鈕，然后導(dǎo)出path（路徑），如下所示：
暫停按鈕的path：
播放按鈕的path：
因?yàn)槲覀冞@里會(huì)是在播放與暫停兩個(gè)狀態(tài)之間不停的切換，所以我們這里會(huì)使用SVG中的use來引用按鈕。即先把兩個(gè)按鈕定義在defs標(biāo)簽中，然后通過use來引用具體的按鈕。如下代碼所示：
在defs元素中，我們不但定義了播放和暫停兩個(gè)按鈕，還分別定義了自定義屬性data-state即表示當(dāng)前按鈕的下一個(gè)狀態(tài)，比如暫停按鈕的下一個(gè)狀態(tài)是播放(playing)。在后面實(shí)現(xiàn)morphing動(dòng)畫效果的時(shí)候要用到。
添加一些基本的樣式：
.container {
width: 500px;
margin: 0 auto;
}
.button {
padding: 0;
width: 500px;
height: 500px;
border: 0;
background-color: white;
outline: none;
}
運(yùn)行效果如下圖所示：
javascript編碼實(shí)現(xiàn)morphing動(dòng)畫效果首先在頁面中引入Snap.svg文件：
https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.jsjs準(zhǔn)備
先定義一個(gè)基本的方法：
var playButton = {};
獲取基本的元素以及一些初始狀態(tài)方法：
var playButton = {
el: document.querySelector(".js-button"),
//獲取兩個(gè)按鈕
iconEls: {
playing: document.querySelector("#pause-icon"),
paused: document.querySelector("#play-icon")
},
//用來存儲(chǔ)按鈕的兩個(gè)狀態(tài)
nextState: {
playing: "paused",
paused: "playing"
},
//初始方法
init: function () {
this.setInitialState();
this.replaceUseEl();
this.el.addEventListener("click", this.toggle.bind(this));
}
}
這里來解釋下初始方法：
setInitialState() 方法是用來獲取當(dāng)前按鈕下一個(gè)的狀態(tài)(data-state)屬性的值的。
replaceUseEl() 方法是用來重置按鈕的。因?yàn)橐獙?shí)現(xiàn)SVG Morphing動(dòng)畫效果，需要在path之間變換，所以需要在初始化的時(shí)候來使用path來代替use標(biāo)簽。而初始使用use標(biāo)簽是為了照顧頁面在剛開始渲染的時(shí)候js還沒加載完的時(shí)候能正常顯示。
這兩個(gè)方法都使用到了Snap.svg中的一些基本方法，比如新建一個(gè)SVG元素(path)，就可以使用paper方法：
Snap("svgicon").paper.path();
上面的代碼表示在ID為svgicon這個(gè)SVG標(biāo)簽中創(chuàng)建一個(gè)path元素。
一些初始化設(shè)置好后，接下來就是編寫點(diǎn)擊效果即點(diǎn)擊的時(shí)候在播放和暫停之間切換并且?guī)в?strong>Morphing動(dòng)畫效果。這里要使用到Snap.svg中animate方法：
Element.animate(attrs, duration, [easing], [callback])
參數(shù)
attrs 對(duì)象，描述屬性的鍵值對(duì)。
duration 數(shù)值，動(dòng)畫持續(xù)的時(shí)間，單位是毫秒。
easing 函數(shù)，自定義的或者mina提供的緩動(dòng)函數(shù)。
callback 函數(shù)，動(dòng)畫結(jié)束時(shí)候的回調(diào)。
下面來看下實(shí)現(xiàn)Morphing動(dòng)畫效果核心代碼：
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動(dòng)畫效果，就是從一個(gè)形狀變到另一個(gè)形狀。具體到我們這里就是在播放與暫停兩個(gè)狀態(tài)之間切換，由于按鈕是path元素，所以只需要改變path元素中切換播放與暫停按鈕中path元素中的d的值就可以了。
在toggle方法中，首先通過goToNextState()方法來獲取當(dāng)前按鈕的下一個(gè)狀態(tài)；通過stateIconPath()方法來獲取當(dāng)前按鈕下一個(gè)狀態(tài)的path屬性中d的值，然后在animate方法中改變當(dāng)前的path中的d的值即下一個(gè)按鈕狀態(tài)path中的d的值。由于使用animate方法，它們之間的變化會(huì)有一個(gè)動(dòng)畫效果即Morphing動(dòng)畫效果。
詳細(xì)的代碼可以去這里查看。
最近做了一個(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://systransis.cn/yun/87926.html
摘要：非常的龐大，而且它是完全為設(shè)計(jì)而生的動(dòng)效庫。它運(yùn)行于純粹的之上，是目前最強(qiáng)健的動(dòng)畫資源庫之一。可能是創(chuàng)建滾動(dòng)特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現(xiàn)實(shí)生活中的物理運(yùn)動(dòng)碰撞慣性動(dòng)畫庫。 收集日期為2019-02-28，★代表當(dāng)時(shí)的該項(xiàng)目在github的star數(shù)量 Animate.css 56401 ★ 一個(gè)跨瀏覽器的動(dòng)效基礎(chǔ)庫，是許多基礎(chǔ)動(dòng)...
摘要：知識(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)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...
摘要：目前只提供了一些基礎(chǔ)功能。中與的區(qū)別開發(fā)者第一次接觸手寫那種，雖然很多情況都有設(shè)計(jì)師使用來完成這項(xiàng)工作，但還是不排除需要利用到的每個(gè)元素。輕量級(jí)，具備靈活的來自團(tuán)隊(duì)，全球非常出名的可視化團(tuán)隊(duì)。于是筆者嘗試著把移植到中。 使用SVG + CSS實(shí)現(xiàn)動(dòng)態(tài)霓虹燈文字效果 早上無意間進(jìn)入一個(gè)網(wǎng)站，看到他們的LOGO效果略屌，如圖： 剛開始以為是gif動(dòng)畫之類的，審查元素發(fā)現(xiàn)居然是用SVG + ...
摘要：因?yàn)榈膭?chuàng)造者正是的創(chuàng)造者，而也是用來操作的。它的主要一個(gè)功能是能使老版本的瀏覽器也能支持，比如等。首先準(zhǔn)備一個(gè)基本開始骨架，基本的結(jié)構(gòu)以及引入這個(gè)庫。是不是似增相識(shí)。首先我們來創(chuàng)建一個(gè)橢圓并放置在上組圖形的中間。 最近做了一個(gè)關(guān)于SVG的應(yīng)用的技術(shù)分享網(wǎng)站svgtrick.com，會(huì)同步一些文章到這里來，更多的可以去網(wǎng)站看看。 工欲善其事，必先利其器。要用svg制作復(fù)雜或者是高級(jí)的動(dòng)畫...
閱讀 3569·2021-11-22 15:11
閱讀 4663·2021-11-18 13:15
閱讀 2714·2019-08-29 14:08
閱讀 3594·2019-08-26 13:49
閱讀 3107·2019-08-26 12:17
閱讀 3301·2019-08-26 11:54
閱讀 3124·2019-08-26 10:58
閱讀 2043·2019-08-26 10:21
