基於HTML5 Canvas和Rebound動畫的Loading載入動畫特效

簡短教學

這是一款基於HTML5 canvas和Rebound動畫的Loading載入動畫特效。該loading動畫使用canvas來覆蓋整個頁面，並顯示多邊形的loading載入器來表示載入進度。

1、建立一個SpringSystem。

// Create a SpringSystem.
  let springSystem = new rebound.SpringSystem();

2、在系統中加入一個彈簧。

// Add a spring to the system.
  demo.spring = springSystem.createSpring(settings.tension, settings.friction);

3、為彈簧添加SpringListener事件監聽。

_addSpringListener() {
 
  let ctx = this;
 
  // Add a listener to the spring. Every time the physics
  // solver updates the Spring's value onSpringUpdate will
  // be called.
  this._spring.addListener({
    // ...
  });
}

4、設定彈簧的結束動畫值，參數為開始動畫的目前值。

this._spring.setEndValue((this._spring.getCurrentValue() === 1) ? 0 : 1);

5、在onSpringUpdate回呼函數中設定動畫的進度。

onSpringUpdate(spring) {
 
  let val = spring.getCurrentValue();
 
  // Input range in the `from` parameters.
  let fromLow = 0,
    fromHigh = 1,
    // Property animation range in the `to` parameters.
    toLow = ctx._springRangeLow,
    toHigh = ctx._springRangeHigh;
 
  val = rebound.MathUtil.mapValueInRange(val, fromLow, fromHigh, toLow, toHigh);
 
  // Note that the render method is
  // called with the spring motion value.
  ctx.render(val);
}

以上就是基於HTML5 Canvas和Rebound動畫的Loading載入動畫特效的內容，更多相關內容請關注PHP中文網（www.php.cn）！