这是一款基于HTML5 canvas和Rebound动画的Loading加载动画特效。该loading动画使用canvas来覆盖整个页面,并显示多边形的loading加载器来表示加载进度。
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); }
以上就是基于HTML5 Canvas和Rebound动画的Loading加载动画特效的内容,更多相关内容请关注PHP中文网(www.erdangjiade.com)!
友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群