福利网站导航多學一點知識,少寫一行代碼福利网站导航前端動畫干貨分享

時間:2019-04-25   來源:易漫傳媒   瀏覽:758

多學一點知識,少寫一行代碼,今天要研究的前端內容是動畫全解。在flash,安卓,和炫酷的H5頁面中,所有的動畫組成元素無非就是位移、旋轉、縮放、顏色(透明度、亮度、色彩),在時間軸上的變化。

圖片1.png

jquery本身對元素的動畫控制有限。有時需要有效結合cssjs來實現動畫效果。所以今天我們就來全面了解一下福利网站导航前端動畫。

csstransition

1)、定義和用法

2)、兼容性

Firefox使用-moz-transition定義、Safari Chrome使用-webkit-transition定義,Opera 使用-o-transition定義。

3)、代碼示例

圖片2.png

css3animation

1)、定義和用法

圖片3.png

先使用@keyframes定義一個動畫,再使用animation屬性將該動畫綁定到元素上。

2)、兼容性

IE使用@keyframes定義,Firefox使用@-moz-keyframes定義,Safari Chrome使用@-webkit-keyframes定義,Opera使用@-o-keyframes定義。

IE使用animation綁定,Firefox使用-moz-animation綁定,Safari Chrome使用 -webkit-animation綁定Opera使用-o-animation綁定

3)、代碼示例

圖片4.png

jQueryanimate

1)、顯示隱藏

hide/show(speed,callback)函數

圖片5.png

2)、透明度

fadeIn/fadeOut(speed,easing,callback)函數

圖片6.png

3)、滑動

slideUp/slideDown(speed,callback)會改變元素的display屬性

圖片7.png

4)、自定義動畫

animate({params},speed,callback);

圖片8.png

JSsetInterval

原生js利用設置周期性事件改變元素屬性實現動畫,復雜動畫的代碼量很大

圖片9.png

使用canvas制作動畫

使用canvas在瀏覽器上畫圖,并且利用其api,制作動畫。canvas使用的地方非常多,尤其是在制作福利网站导航小游戲上。

插件

使用通過以上方法封裝好的插件,直接調用如:wavestextillate.js等等。

引用gif圖片

雖然在工程師的角度上使用gif圖很low,但是,用戶的體驗是沒有影響的。


合作客戶/ LATEST DEAL

MORE
  • 中化集團宣傳片視頻!易漫傳媒:專注于線上營銷的高品質MG動畫解決方案,集創意策劃...

  • 滴滴代駕MG動畫!易漫傳媒:專注于線上營銷的高品質MG動畫解決方案,集創意策劃,設計...

  • 集創意策劃,設計制作,推廣發行,衍生品,售后為一體,專注于高品質MG動畫: 吉祥物設計, ...

  • 集創意策劃,設計制作,推廣發行,衍生品,售后為一體,專注于高品質MG動畫: 吉祥物設計, ...