騰訊開源的輕量級CSS3動畫庫:JX.Animate
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
JX.Animate 的主要特性包括:
- 動畫可以通過多種方式定義
- 通過在 CSS 文件中定義關鍵幀動畫(KeyFrameAnimate),可以做到動畫定義與動畫控制分離,可以更好的支持多人協同工作。
- 使用 JavaScript 代碼定義既可以預先定義好動畫效果,也可以在運行時動態定義動畫效果,相比 CSS 樣式的方式更加靈活。
- JX.Animate 支持多米諾效果,可以控制多個 DOM 對象依次播放動畫,增強視覺效果。JX.Animate 還提供了一個幻燈片組件,其中就利用了多米諾效果來實現圖片的切換。可以在 JX.Animate 的主頁直接看到動畫效果。
本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!