Kurzes Tutorial
Dies ist ein Ladeanimations-Spezialeffekt, der auf HTML5-Canvas und Rebound-Animation basiert. Die Ladeanimation verwendet eine Leinwand, die die gesamte Seite abdeckt, und zeigt einen polygonalen Lader an, der den Ladefortschritt darstellt.
1. Erstellen Sie ein SpringSystem.
// Create a SpringSystem. let springSystem = new rebound.SpringSystem();
2. Fügen Sie dem System eine Feder hinzu.
// Add a spring to the system. demo.spring = springSystem.createSpring(settings.tension, settings.friction);
3. SpringListener-Ereignisüberwachung für den Frühling hinzufügen.
_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. Stellen Sie den Endanimationswert der Feder ein, und der Parameter ist der aktuelle Wert der Startanimation.
this._spring.setEndValue((this._spring.getCurrentValue() === 1) ? 0 : 1);
5. Legen Sie den Animationsfortschritt in der Rückruffunktion onSpringUpdate fest.
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);
}Das Obige ist der Inhalt von Ladeanimations-Spezialeffekten basierend auf HTML5-Canvas- und Rebound-Animationen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com)!
