騰訊開源的輕量級CSS3動畫庫:JX.Animate

jopen 10年前發布 | 58K 次閱讀 CSS3 CSS 前端技術

        JX.Animate 是由騰訊前端團隊 AlloyTeam 推出的一個 CSS3 動畫庫,通過 JX(騰訊的前端框架)插件的形式提供。

Why CSS3

眾所周知在支持HTML5的瀏覽器中,使用CSS3的動畫效果無論從性能還是流暢程度都遠超傳統的JavaScript定時器動畫效果。然而CSS3動畫卻存在CSS樣式文件不好維護、動畫過程不易控制、無法在運行動態生成動畫等不足之處。

        JX.Animate 可以幫助開發者在 JavaScript 代碼中方便調用和控制 CSS3 動畫,例如動畫時長、重復次數、動畫緩沖、結束回調等,并且支持播放聲音。

        項目地址:http://alloyteam.github.io/JXAnimate/

        效果演示:http://alloyteam.github.io/JXAnimate/demo1.html

騰訊開源的輕量級CSS3動畫庫:JX.Animate

        JX.Animate 的主要特性包括:

  • 動畫可以通過多種方式定義
  • 通過在 CSS 文件中定義關鍵幀動畫(KeyFrameAnimate),可以做到動畫定義與動畫控制分離,可以更好的支持多人協同工作。
  • 使用 JavaScript 代碼定義既可以預先定義好動畫效果,也可以在運行時動態定義動畫效果,相比 CSS 樣式的方式更加靈活。
  • JX.Animate 支持多米諾效果,可以控制多個 DOM 對象依次播放動畫,增強視覺效果。JX.Animate 還提供了一個幻燈片組件,其中就利用了多米諾效果來實現圖片的切換。可以在 JX.Animate 的主頁直接看到動畫效果。

項目主頁:http://www.baiduhome.net/lib/view/home/1393481781287

 

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!