iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

JavaScript 嗨起來用 JS 做動畫 ε= ᕕ( ᐛ )ᕗ系列 第 9

Day09 - dat GUI

dat-gui cdn
dat-gui github

// dat gui
var controls = {
    distance: 0,
    color: '#ffffff',
    
    // 當 value 為 boolean 時 dat.GUI 面板會生成 checkbox
    playOrNot: true,
    
    // 當 value 為 function 時, dat.GUI 面板會生成可以觸發該 function 的按鈕
    oneStep: function(){
        box.update();
    },
};

// 生成 dat.GUI 面板
var gui = new dat.GUI();


// 透過 gui.add 將指定的 value 呈現在 dat.GUI 面板上

// 指定 controls 物件裡的 distance 呈現在 dat.GUI 面板上
// distance 可在 0-1000 之間調整
// listen 表示當 controls 物件裡的 distance 變更時 dat.GUI 也會同步自動變更
// onChange 表示當 dat.GUI 變更時(例如我們拖曳調整 dat.GUI 面板數的值大小時),就觸發指定 function
gui.add(controls,'distance', 0, 1000).listen().onChange(function(value) {
    box.distance = value
});

// addColor 會幫我們生成 color picker 在 dat.GUI 面板上
gui.addColor(controls,'color').listen().onChange(function(value) {
    box.color = value
});

gui.add(controls,'playOrNot').listen().onChange(function(value) {
    box.startOrNot = value
});

gui.add(controls,'oneStep').listen().onChange(function(value) {});


如果上述理解有誤,還懇請路過的俠士,順手解惑做公益,感恩的心 ε= ᕕ( ᐛ )ᕗ


上一篇
Day08 - 試用 material color tool 哦
下一篇
Day10 - 今天只先鋪底座標軸,明天來畫 BMO
系列文
JavaScript 嗨起來用 JS 做動畫 ε= ᕕ( ᐛ )ᕗ17

尚未有邦友留言

立即登入留言