当前位置：首页 > 网页特效 > 进度条

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

分类：进度条日期：2024-05-14 点击(0) 评论(0)

简介

##### Rebound动画
Rebound是facebook出品的一款用于制作弹簧动力效果的JavaScript动画库。该loading动画使用它来制作多边形图形的动画效果。使用Rebound的方法如下：

1、创建一个SpringSystem。

```html
// Create a SpringSystem.
  let springSystem = new rebound.SpringSystem();     
```             
2、在系统中添加一个弹簧。

```html
// Add a spring to the system.
  demo.spring = springSystem.createSpring(settings.tension, settings.friction); 
```                 
3、为弹簧添加SpringListener事件监听。

```html
_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、设置弹簧的结束动画值，参数为开始动画的当前值。

```html
this._spring.setEndValue((this._spring.getCurrentValue() === 1) ? 0 : 1);   
```               
5、在onSpringUpdate回调函数中设置动画的进度。

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果