最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

基于HTML5 Canvas和Rebound动画的Loading加载动画特效-H5教程

来源:http://erdangjiade.com/topic/133069.html H5程序员 2017-10-29 20:28浏览(30)

简要教程

这是一款基于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)!

评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2