转载

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

简要教程

这是一款基于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的更多使用方法，可以参考下面的文章：