iT邦幫忙

2018 iT 邦幫忙鐵人賽
1
Modern Web

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

[十分鐘學習] sketch.js - 極簡動畫繪製

example1

微型(約2KB)JavaScript平台效果函式庫

GitHub Star: 2,900
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE9+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- sketch.js v1.0 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/sketch.js/1.0/sketch.min.js"></script>
    
  • npm

      $ npm install sketch-js
    

《範例》

  • 背景顏色跟著滑鼠移動變化

      <script>
      	var example = Sketch.create({
      		// 參數設定[註1]
      		fullscreen: true, // 滿版
      		autostart: true, // 自動開始,否則需要透過`start`函式執行開始
      		autoclear: true, // 每次繪畫前自動清除,否則需要透過`clear`函式執行清除
      		autopause1: true, // 當失焦時,是否自動暫停動畫
      		container: document.body, // 目標物件
      		interval: 1, // 更新/繪圖的間隔
      		globals: true, // 新增全域屬性至window
      		retina: false, // 當裝置是retina時,調整尺寸維持最佳體驗
      		type: Sketch.CANVAS, // 模式
      		eventTarget: null, // 設定滑鼠監聽物件
      	});
      	example.setup = function() {
      		 // 當初始化時,則執行此函式
      		this.r = this.g = this.b = random( 100, 200 ) // 設定R、G、B三個變數
      	}
      	example.mousemove = function() {
      		 // 當滑鼠移動時,則執行此函式
      		 console.log( this.mouse )
      		 this.r = 255 * (this.mouse.x / this.width) 
      		 this.g = 255 * (this.mouse.y / this.height)
      		 this.b = 255 * abs(cos(PI * this.mouse.y / this.width))
      	}
      	example.draw =  function() {
      		// 繪圖函式
      		this.fillStyle = "rgb(" + Math.round( this.r ) + "," + Math.round( this.g ) + "," + Math.round( this.b ) + ")"; // 填滿矩形的顏色
      		this.fillRect(0, 0, this.width, this.height) // 填滿矩形
      	}
    

    [註1]

    參數 預設值 描述
    fullscreen true 滿版
    autostart true 自動開始,否則需要透過start函式執行開始
    autoclear true 每次繪畫前自動清除,否則需要透過clear函式執行清除
    autopause1 true 當失焦時,是否自動暫停動畫
    container document.body 目標物件
    interval 1 更新/繪圖的間隔
    globals true 新增全域屬性至window
    retina false 當裝置是retina時,調整尺寸維持最佳體驗
    type Sketch.CANVAS 模式
    eventTarget null 設定滑鼠監聽物件

    函式列表

    函式 描述
    setup() 當初始化時,則執行此函式
    mousemove() 當滑鼠移動時,則執行此函式
    draw() 繪圖函式

《延伸》

  1. sketch.js
  2. soulwire/sketch.js: Cross-Platform JavaScript Creative Coding Framework

上一篇
[十分鐘學習] goodshare.js - 社群分享按鈕大補帖
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言