iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 53
0
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

尚未有邦友留言

立即登入留言