iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
0
Modern Web

30天學習30套前端技術(2018年)系列 第 26

[十分鐘學習] KUTE.js - 做動畫金柑單

example1
一套成熟的原生的JavaScript動畫引擎,提供給網站開發者、設計師、動畫師相當多基本的功能,淺顯易懂的操作方式,跨瀏覽器動畫,擁有著高質量、靈活、專業且輕量(主要核心只需要17k)

《評分》

  • GitHub Star: 1,000
  • Javascripting Overall: 44%

《支援》

  • 瀏覽器: ChromeFirefoxIE10+
  • RWD: 不支援(可運作)
  • License: MIT

看範例


《安裝》

  • CDN
    將下方語法複製貼上 <body></body>

    <!-- KUTE.js v1.6.2 -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js"></script>
    
  • npm

    $ npm install kute.js
    

《使用》

  • 應用1:文字水平移動 (範例)
    example1
    將下方語法複製貼上 <body></body>

    <div class="example">
    	<!-- 內容 -->
    </div>
    <style>
    	.example {
    		position: absolute; /* 設成絕對位置 */
    	}
    </style>
    <script type="text/javascript">
    	var el = document.querySelector( ".example" );
    	var tween = KUTE.fromTo( el,
    		{
    			left: 50 /* 起點 */
    		},
    		{
    			left: 500 /* 終點 */
    		},
    		{
    			repeat: 3, /* 重覆次數 */
    			yoyo: true /* 是否從終點在返回起點 */
    		}
    	);
    	tween.start();
    </script>
    

《延伸》

KUTE.js | Javascript Animation Engine
thednp/kute.js: KUTE.js is a native Javascript animation engine featuring great code quality, badass performance, SVG morphing, stroke drawing and 2D & 3D transforms, CSS3 transforms, colors, as well as other CSS3 properties or presentation attributes.


上一篇
[十分鐘學習] iCheck - 免出國,也可以幫C先生和R先生做Face Off
下一篇
[十分鐘學習] Timeline.js - 時間軸
系列文
30天學習30套前端技術(2018年)30

尚未有邦友留言

立即登入留言