这是一款基于HTML5 canvas和Rebound动画的Loading加载动画特效。该loading动画使用canvas来覆盖整个页面,并显示多边形的loading加载器来表示加载进度。
使用方法
Rebound动画
Rebound是facebook出品的一款用于制作弹簧动力效果的JavaScript动画库。该loading动画使用它来制作多边形图形的动画效果。使用Rebound的方法如下:
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);
}
关于Rebound的更多使用方法,可以参考下面的文章: