Chargement d'effets spéciaux d'animation basés sur l'animation HTML5 Canvas et Rebound

Bref tutoriel

Il s'agit d'un effet spécial d'animation de chargement basé sur un canevas HTML5 et une animation de rebond. L'animation de chargement utilise un canevas pour couvrir la page entière et affiche un chargeur de chargement polygonal pour représenter la progression du chargement.

1. Créez un SpringSystem.

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

2. Ajoutez un ressort au système.

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

3. Ajoutez la surveillance des événements SpringListener pour le printemps.

_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. Définissez la valeur d'animation de fin du ressort, et le paramètre est la valeur actuelle de l'animation de début.

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

5. Définissez la progression de l'animation dans la fonction de rappel 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);
}

Ce qui précède est le contenu des effets spéciaux d'animation de chargement basés sur l'animation HTML5 Canvas et Rebound. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !