当前位置：首页 > 网页特效 > svg

基于TweenMax和SVG的炫酷弹性进度条动画特效

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

简介

该弹性进度条效果需要GSAP的支持，还要引入lastic-progress.min.js文件。

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script> 
<script src="path/to/js/elastic-progress.min.js"></script>       
```        
#####  HTML结构
可以使用一个div元素来作为按钮。

```html
<div class="Upload" role="button" aria-label="Upload file"></div>     
```   
这里使用带role="button"的div元素来作为按钮，而不是直接使用一个button元素的原因是，根据W3C规范的建议，按钮元素不应该有交互元素。

#####  JavaScript
可以通过纯JS来初始化该弹性进度条插件。
```html

var element=document.querySelector('.Upload');
var progress=new ElasticProgress(element, { /*options*/ });
 
// 或者...
 
var progress=new ElasticProgress('.Upload', { /*options*/});      
```          
也可以通过jQuery来初始化该弹性进度条插件。

```html
$('.Upload').ElasticProgress({/*options*/});    
```            
#####  配置参数
配置参数设置在构造函数上，类似下面的样子：

```html
var progress=new ElasticProgress('.Upload', {
  colorFg:"#FF0000",
  buttonSize:80,
  //...
})     
```           
#####  可用参数
- arrowDirection：类型：string。箭头的方向，可取值有：'up'或'down'。默认值为'down'。
- colorFg，colorBg：类型：string。前景（箭头和进度条过滤部分）的颜色和背景（圆形，整个进度条背景），默认值为白色和黑色。
- highlightColor：类型：string。边框高亮的颜色，默认值为#08F。
- background：类型：string。“弹出”动画时遮罩层的颜色。默认为body的背景色。
- buttonSize：类型：number。圆形按钮的大小。默认值为元素的高度。
- width：类型：number。进度条扩展的宽度。默认值为元素的宽度。/li>
- labelHeight：类型：number。标签的高度，单位像素，默认值53。
- barHeight：类型：number。进度条的厚度，默认值为4。
- barInset：类型：number。进度条的填充部分，默认值为-0.5。
- bleedTop、bleedRight、bleedLeft和bleedBottom：类型：number。图形的margin值。默认为100, 50, 50 和 60。
- fontFamily：类型：string。标签上的字体。默认值为'Helvetica Neue','Helvetica','Arial',sans-serif。
- fontWeight：类型：string。默认值为'bold'。
- textComplete、textFail和textCancel：类型：string。在以上事件中显示的文本。默认值分别为：'Done'、'Failed'和'Canceled'。
- barStretch：类型：number。进度条拉伸的最大距离。默认为20。
- jumpHeight：类型：number。箭头和标签跳动的距离。默认为50。
- barElasticOvershoot和barElasticPeriod：类型：number。弹性动画的设置。默认值为1.8和0.15。
- labelWobbliness：类型：number。在进度条动画期间标签的动画设置。默认为40。
- arrowHangOnFail和arrowHangOnCancel：类型：boolean。设置在这2个事件中箭头是否会“跌落”下来。默认值都是true。
#####  事件
按钮本身没有任何操作。你可以通过下面的事件来控制按钮的行为。

```html
var progress=new ElasticProgress('.Upload', {
  // ...
  onClick:function(){
    progress.open();
  }
});
function theFunctionYouAreUsingToCheckProgress(){
  // ...
  progress.set(value);
}
 
 
// 通过jQuery
$(".Upload").ElasticProgress({
  // ...
  onClick:function(){
    $(this).ElasticProgress('open');
  }
});
 
function theFunctionYouAreUsingToCheckProgress(){
  // ...
  $(".Upload").ElasticProgress('set',value);
}         
```       
#####  可用事件
- onClick：类型：function。在用户点击按钮时触发。
- onOpen：类型：function。当进度条完成打开动画时触发。
- onChange：类型：function。当进度条的值发生改变时触发。
- onComplete：类型：function。当进度条结束时触发。
- onClose：类型：function。当关闭动画结束时触发。
- onFail：类型：function。当“失败”动画开始时触发。
- onCancel：类型：function。当取消动画开始时触发。
#####  方法
- open()：开始打开动画（将按钮转换为进度条）。
- close()：将进度条转换为按钮。
- setValue(value number)：设置进度条值的百分比，0-1。
- getValue() ：返回当前进度条的值。
- fail()和cancel()：执行“失败”和“取消”动画。
- complete()：执行“完成”动画。可以使用setValue(1)来替代它。
- onClick(callbackfunction)、onOpen(callbackfunction)、onChange(callbackfunction)、
- onComplete(callbackfunction)、onClose(callbackfunction)、onFail(callbackfunction)
- 和onCancel(callbackfunction)：相同名称参数的别名。

web299.com

基于TweenMax和SVG的炫酷弹性进度条动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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