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

这是一款效果非常炫酷的基于TweenMax和SVG的炫酷弹性进度条动画特效。该弹性进度条特效在点击触发按钮之后，按钮会变形为进度条，然后一个滑块在它上面滑动，就像重物滑过绳子的感觉，非常有创意。

在线演示

 使用方法

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

<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>元素来作为按钮。

<div class="Upload" role="button" aria-label="Upload file"></div>       

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

 JavaScript

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

var element=document.querySelector('.Upload');var progress=new ElasticProgress(element, { /*options*/ });// 或者...var progress=new ElasticProgress('.Upload', { /*options*/}); 

也可以通过jQuery来初始化该弹性进度条插件。

$('.Upload').ElasticProgress({/*options*/});               

 配置参数

配置参数设置在构造函数上，类似下面的样子：

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。

 事件

按钮本身没有任何操作。你可以通过下面的事件来控制按钮的行为。

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)：相同名称参数的别名。