成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深入淺出 GreenSock 動(dòng)畫：SVG Logo 動(dòng)畫

Bowman_han / 1325人閱讀

摘要：在上面的代碼中設(shè)置為，表示以倍的速度來運(yùn)行這個(gè)動(dòng)畫效果。當(dāng)然在動(dòng)畫效果中，運(yùn)動(dòng)曲線是必不可少的，提供了豐富的運(yùn)動(dòng)曲線來設(shè)置動(dòng)畫的運(yùn)動(dòng)效果。整個(gè)動(dòng)畫效果就完成了，通過這個(gè)簡簡單單的效果，可以發(fā)現(xiàn)使用來編寫動(dòng)畫效果是多么的方便簡單。

在我網(wǎng)站svgtrick開一個(gè)新系列，主要是使用GreenSock來編寫和實(shí)現(xiàn)動(dòng)畫效果，通過實(shí)際的效果來熟悉GreenSock的各個(gè)方法和技巧。

關(guān)于GreenSock的基礎(chǔ)知識(shí)，可以看看我整理的GreenSock簡明教程。

這個(gè)效果也是在codepen上看到的，拿來分析下實(shí)現(xiàn)思路，順便熟悉下GreenSock的一些API的使用方法。

先來看看要實(shí)現(xiàn)的效果：

這個(gè)效果中這個(gè)圖形是使用SVG來實(shí)現(xiàn)的，代碼有點(diǎn)多，詳細(xì)代碼就不貼了，貼個(gè)大概的的結(jié)構(gòu)：


    
    ......

加上一點(diǎn)點(diǎn)樣式：

body{
  background-color:#fff;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container, svg{
  width:100%;
  height:100%;
}

svg{
  visibility:hidden;
}

在樣式中，先把SVG的visibility的屬性設(shè)置為hidden，這樣就可以等GreenSock初始化設(shè)置完后，才顯示SVG，在體驗(yàn)上會(huì)更好一點(diǎn)。

先來分析下效果：

1、首先是順時(shí)針旋轉(zhuǎn)

2、然后是縮小

3、最后放大

不停的循環(huán)這個(gè)動(dòng)畫效果。

先來初始化一些設(shè)置，從效果可以看出，logo是垂直水平居中。這里使用GreenSock來實(shí)現(xiàn)這個(gè)定位的：

var container = document.querySelector(".container");
var triangle = document.querySelector(".undefined");

TweenMax.set(container, {
  position:"absolute",
  top:"50%",
  left:"50%",
  xPercent:-50,
  yPercent:-50
})
TweenMax.set(triangle, {
  scale:0.25
})
TweenMax.set("svg", {
  visibility:"visible"
})

首先是把SVG和DIV節(jié)點(diǎn)存儲(chǔ)在定義好的變量中。然后使用TweenMax的set方法來把logo定好位置，在SVG初始的狀態(tài)中，它本身進(jìn)行了一個(gè)縮放，縮放到原來的0.25倍。初始化完后，把SVG的visibility設(shè)置為visible，顯示SVG。

接下來就是來編寫動(dòng)畫效果：

var tl = new TimelineMax({repeat:-1, repeatDelay:1});
tl.timeScale(6);
tl.to(triangle, 8, {
  rotation:"+=360",
  ease:Power2.easeIn
})
.to(triangle, 3, {scale: 0.2, ease:Power2.easeOut})
.to(triangle, 3, {scale: 0.25, ease:Power2.easeIn})

首先聲明一個(gè)TimelineMax的實(shí)例，從效果可以看出，這個(gè)動(dòng)畫效果是無限循環(huán)的，所以設(shè)置它的repeat屬性的值為-1，并且循環(huán)的延遲時(shí)間為1秒即repeatDelay:1。

先來設(shè)置動(dòng)畫運(yùn)行的速度，通過timeScale方法來設(shè)置。

timeScale方法是用來設(shè)置或讀取時(shí)間軸的回放速率,比如0.5為一半速率，1為正常速度，2為2倍速度。在上面的代碼中設(shè)置為6，表示以6倍的速度來運(yùn)行這個(gè)動(dòng)畫效果。

設(shè)置好動(dòng)畫播放速度后，先來實(shí)現(xiàn)圖形的旋轉(zhuǎn)效果，通過TimelineMax.to方法來實(shí)現(xiàn)。

在GreenSock中可以通過rotation方法來實(shí)現(xiàn)旋轉(zhuǎn)效果，動(dòng)畫效果是旋轉(zhuǎn)360度，即可以通過rotation:"+=360"來實(shí)現(xiàn)這個(gè)效果。當(dāng)然在動(dòng)畫效果中，運(yùn)動(dòng)曲線是必不可少的，GreenSock提供了豐富的運(yùn)動(dòng)曲線來設(shè)置動(dòng)畫的運(yùn)動(dòng)效果。在代碼中簡單的使用了最基礎(chǔ)的運(yùn)動(dòng)曲線easeIn，效果跟CSS3中的easeIn差不多。更豐富的曲線可以去這個(gè)地址看看。

旋轉(zhuǎn)之后，是在初始大小的狀態(tài)下進(jìn)行縮小，通過scale這個(gè)屬性來實(shí)現(xiàn)。這里縮小的值是o.2，縮小之后，恢復(fù)的初始狀態(tài)即scale:0.25。

整個(gè)動(dòng)畫效果就完成了，通過這個(gè)簡簡單單的效果，可以發(fā)現(xiàn)使用GreenSock來編寫動(dòng)畫效果是多么的方便簡單。

demo地址

總結(jié)下，這個(gè)效果的使用到幾個(gè)重點(diǎn)的方法：

1、repeat : int：循環(huán)次數(shù)。設(shè)置為-1為無限循環(huán)。

2、repeatDelay : Number：循環(huán)延遲的時(shí)間。

3、timeScale:Number[讀寫] 用來設(shè)置或讀取時(shí)間軸的回放速率,比如0.5為一半速率，1為正常速度，2為2倍速度。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81775.html

相關(guān)文章

  • SVG

    摘要：目前只提供了一些基礎(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 + ...

    104828720 評(píng)論0 收藏0

  • 2018年值得期待11個(gè)Javascript動(dòng)畫庫

    摘要：超過的，是一個(gè)動(dòng)畫庫，可以處理屬性，單個(gè)轉(zhuǎn)換，或任何屬性以及對(duì)象。在，是一個(gè)快速的動(dòng)畫引擎，具有與的相同的。在，這個(gè)功能和反應(yīng)動(dòng)畫庫只重。由和其他人使用，這個(gè)庫既流行又令人驚訝地有用。 在瀏覽網(wǎng)頁尋找一個(gè)整潔的Javascript動(dòng)畫庫時(shí)，我發(fā)現(xiàn)很多recommended的動(dòng)畫庫一段時(shí)間都沒有維護(hù)。 經(jīng)過一些研究，我收集了11個(gè)最好的庫，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維...

    call_me_R 評(píng)論0 收藏0

  • 2018年值得期待11個(gè)Javascript動(dòng)畫庫

    摘要：超過的，是一個(gè)動(dòng)畫庫，可以處理屬性，單個(gè)轉(zhuǎn)換，或任何屬性以及對(duì)象。在，是一個(gè)快速的動(dòng)畫引擎，具有與的相同的。在，這個(gè)功能和反應(yīng)動(dòng)畫庫只重。由和其他人使用，這個(gè)庫既流行又令人驚訝地有用。 在瀏覽網(wǎng)頁尋找一個(gè)整潔的Javascript動(dòng)畫庫時(shí)，我發(fā)現(xiàn)很多recommended的動(dòng)畫庫一段時(shí)間都沒有維護(hù)。 經(jīng)過一些研究，我收集了11個(gè)最好的庫，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維...

    teren 評(píng)論0 收藏0

  • 2018年值得期待11個(gè)Javascript動(dòng)畫庫

    摘要：超過的，是一個(gè)動(dòng)畫庫，可以處理屬性，單個(gè)轉(zhuǎn)換，或任何屬性以及對(duì)象。在，是一個(gè)快速的動(dòng)畫引擎，具有與的相同的。在，這個(gè)功能和反應(yīng)動(dòng)畫庫只重。由和其他人使用，這個(gè)庫既流行又令人驚訝地有用。 在瀏覽網(wǎng)頁尋找一個(gè)整潔的Javascript動(dòng)畫庫時(shí)，我發(fā)現(xiàn)很多recommended的動(dòng)畫庫一段時(shí)間都沒有維護(hù)。 經(jīng)過一些研究，我收集了11個(gè)最好的庫，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維...

    skinner 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<