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

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

      $ npm install kute.js
    

《範例》

  • 文字水平移動

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

《延伸》

  1. KUTE.js | Javascript Animation Engine
  2. 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年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言