当前位置：首页 > news >正文

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

news 来源：原创 2025/5/4 4:10:34

这是一款效果非常炫酷的基于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)：相同名称参数的别名。