Maison > interface Web > Tutoriel H5 > le corps du texte

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

黄舟
Libérer: 2017-01-19 13:52:40
original
2111 Les gens l'ont consulté

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();
Copier après la connexion

2. Ajoutez un ressort au système.

// Add a spring to the system.
  demo.spring = springSystem.createSpring(settings.tension, settings.friction);
Copier après la connexion

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({
    // ...
  });
}
Copier après la connexion

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);
Copier après la connexion

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);
}
Copier après la connexion

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) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal