基于HTML5Canvas和Rebound动画的Loading加载动画特效

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

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

_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({
 // ...
 });
}

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

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);
}