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

資訊專欄INFORMATION COLUMN

用animation的steps屬性制作幀動畫

zhichangterry / 2252人閱讀

摘要:于是我順著他的思路,用上了在中的屬性。修改效果如下但是這都不是我們需要的效果,因為幀動畫的關鍵在于瞬變。在的中,有一個屬性。表示將動畫分為幀。這個位置變化沒有過渡效果,這就是的特點階躍性。

昨天火急火燎地接到一個任務,說是要做一個擲骰子的游戲,關于擲骰子期間的過渡動畫,我本來是想用css 3d制作一個立體的骰子,然后叫UI給6張平面圖貼上去。再用translate3d來操作。然而UI考慮得十分周到,直接就給了我一個雪碧圖,并告訴我在photoshop中可以用幀動畫來播放幾張圖片,達到類似gif的效果,程序上實現也大抵如此吧。

臥槽真是個神奇的UI boy。

? 于是我順著他的思路,用上了animation在timing-function中的steps屬性。

先來看看UI給的圖吧,是這樣的:(注:圖片寬度1200px)

如果要播放這張圖片的話,很明顯是分為五個幀,然后定義一個動畫,background-position從(0,0)到(-圖片的寬度,0)。首先要明白background-position的數值指的是背景圖的左上角頂點到容器左上角頂點的x,y距離。x,y正數值越大,背景圖越向右下角偏移。

所以動畫的代碼如下:

我們先來播放一下看看效果,設置animation:spinning 2s linear infinite,效果如下:

可以看到是從左到右依次播放:2,3,4,5,6,2,3,4,5,6....。類似跑馬燈的效果,既然說到這里就順便提一下alternate,眾所周知infinite linear定義的是0 - 100 - 0 - 100 - 0 - 100......(始終正向)。而infinite alternate定義的是0 - 100 - 100 - 0 - 0 - 100......(一下正向一下反向)。修改animation:spinning 2s alternate infinite,效果如下:

但是這都不是我們需要的效果,因為幀動畫的關鍵在于 瞬變 。在animation的timing-function中,有一個steps(n)屬性。表示將動畫分為n幀。比如說,這里我們定義animation:spinning 2s steps(5) infinite。它在這個例子中表示的效果如下:

在0~400ms時,position:0 0;400ms~800ms,position:-240px 0。800ms~1200ms,position:-480px 0,以此類推。需要注意的是,比如400ms時position為0 0,在401ms時position就突變成-240px 0,即是說position是瞬變的。這個位置變化沒有過渡效果,這就是steps的特點:階躍性。

此時效果如下:

400ms一幀當然太慢了,我們把時間適當壓縮一下。比如總動畫時長為300ms,那就是60ms一幀,分5幀播放完,這樣看起來就會流暢不少。最終效果如下:

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

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

相關文章

  • animationsteps屬性制作動畫

    摘要:于是我順著他的思路,用上了在中的屬性。修改效果如下但是這都不是我們需要的效果,因為幀動畫的關鍵在于瞬變。在的中,有一個屬性。表示將動畫分為幀。這個位置變化沒有過渡效果,這就是的特點階躍性。  昨天火急火燎地接到一個任務,說是要做一個擲骰子的游戲,關于擲骰子期間的過渡動畫,我本來是想用css 3d制作一個立體的骰子,然后叫UI給6張平面圖貼上去。再用translate3d來操作。然而UI考慮得...

    googollee 評論0 收藏0
  • animationsteps屬性制作動畫

    摘要:于是我順著他的思路,用上了在中的屬性。修改效果如下但是這都不是我們需要的效果,因為幀動畫的關鍵在于瞬變。在的中,有一個屬性。表示將動畫分為幀。這個位置變化沒有過渡效果,這就是的特點階躍性。 昨天火急火燎地接到一個任務,說是要做一個擲骰子的游戲,關于擲骰子期間的過渡動畫,我本來是想用css 3d制作一個立體的骰子,然后叫UI給6張平面圖貼上去。再用translate3d來操作。然而UI考慮得十...

    GT 評論0 收藏0
  • animationsteps屬性制作動畫

    摘要:于是我順著他的思路,用上了在中的屬性。修改效果如下但是這都不是我們需要的效果,因為幀動畫的關鍵在于瞬變。在的中,有一個屬性。表示將動畫分為幀。這個位置變化沒有過渡效果,這就是的特點階躍性。 昨天火急火燎地接到一個任務,說是要做一個擲骰子的游戲,關于擲骰子期間的過渡動畫,我本來是想用css 3d制作一個立體的骰子,然后叫UI給6張平面圖貼上去。再用translate3d來操作。然而UI考慮得十...

    xuxueli 評論0 收藏0
  • CSS3動畫

    摘要:在制作幀動畫的時候,一般采用雪碧圖的方式,通過切換圖片的位置,使其連續播放,從而形成動畫。使用改造之后的代碼,利用偽類進行背景填充,然后控制該元素移動來實現逐幀動畫。 在制作幀動畫的時候,一般采用雪碧圖的方式,通過切換圖片的位置,使其連續播放,從而形成動畫。 雪碧圖 雪碧圖的制作可以使用compass制作,還可以使用一些小工具進行制作,提供一個在線制作雪碧圖的網站。CSS Sprite...

    Nino 評論0 收藏0

發表評論

0條評論

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