透過渲染而成的動畫效果

透過物體位置並每隔一段時間重新渲染畫面，來達到使物體像動畫般動起來的效果

// 原地走動動畫
function UsagiJump() {
    jumpSpeed += 0.04
    usagiObj.usagi.position.y = Math.abs(Math.sin(jumpSpeed)/2)
}

設定完後在 render() 處加入 UsagiJump() 才會有效果

Tween.js

Tween.js 是一個可以生成平滑動畫效果的輕量 js 函式庫，只需要告訴 tween 起點值、終點值、時間等訊息，tween 就會自動計算來產生平滑的動畫效果。要使用 tween 需要先在 ejs 處設定 tween 函式庫

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script> 

移動動畫

在 ejs 處新增按鈕 left、right

<button id="left_btn" onclick="click_left()">Left</button>
<button id="right_btn" onclick="click_right()">Right</button>

當按下 left 時觸發 function，物體就會根據當前 x 位置往 x-1 方向移動

function click_left(){
    console.log("click_left")
    // 物體起始位置
    init_x = usagiObj.usagi.position.x
    init_z = usagiObj.usagi.position.z
    let offset = {x:init_x,z:init_z}
    // 目標位置
    let target = {x:init_x-1,z:0}

    const onUpdate=()=>{
      //移動
      usagiObj.usagi.position.x = offset.x
      usagiObj.usagi.position.z = offset.z
    }
    tween = new TWEEN.Tween(offset)
        // 設定花費時間
        .to(target,750)
        // 設定移動效果
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(onUpdate)
        .onComplete(()=>{
            console.log("done")
        })
    tween.start()
}

往右跳也是一樣

function click_right(){
    console.log("click_right")
    init_x = usagiObj.usagi.position.x
    init_z = usagiObj.usagi.position.z
    let offset = {x:init_x,z:init_z}
    let target = {x:init_x+1,z:0}

    const onUpdate=()=>{
      //移動
      usagiObj.usagi.position.x = offset.x
      usagiObj.usagi.position.z = offset.z
    }
    tween = new TWEEN.Tween(offset)
        .to(target,750)
        .easing(TWEEN.Easing.Quadratic.Out)
        .onUpdate(onUpdate)
        .onComplete(()=>{
            console.log("done")
        })
    tween.start()
}

成果

Day12 Demo | Github

Reference:

https://sole.github.io/tween.js/examples/03_graphs.html