HTML5 Canvas および Rebound アニメーションに基づくアニメーション特殊効果の読み込み

簡単なチュートリアル

これは、HTML5 キャンバスとリバウンド アニメーションに基づく読み込みアニメーションの特殊効果です。読み込みアニメーションでは、キャンバスを使用してページ全体をカバーし、読み込みの進行状況を表す多角形の読み込みローダーを表示します。

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 キャンバスに基づくアニメーション特殊効果の読み込みとリバウンド アニメーションの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。