浙江 杭州

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

系统分类: 亚博赔率最高 - 亚博登录注册 - jQuery自动完成 2017-01-03

人气4744

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

使用方法

该弹性进度条的创意来自Dribbble shot。看看下面的图片:

弹性进度条效果

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

 
               
              
HTML结构

可以使用一个

元素来作为按钮。

这里使用带role="button"

元素来作为按钮,而不是直接使用一个元素的原因是,根据W3C规范的建议,按钮元素不应该有交互元素。

JavaScript

可以通过纯JS来初始化该弹性进度条亚博赔率最高--任意三数字加yabo.com直达官网。

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

// 或者...

var progress=new ElasticProgress('.Upload', { /*options*/});                
              

也可以通过jQuery来初始化该弹性进度条亚博赔率最高--任意三数字加yabo.com直达官网。

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

配置参数

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

var progress=new ElasticProgress('.Upload', {
  colorFg:"#FF0000",
  buttonSize:80,
  //...
})                
              
可用参数
  • arrowDirection:类型:string。箭头的方向,可取值有:'up''down'。默认值为'down'
  • colorFgcolorBg:类型:string。前景(箭头和进度条过滤部分)的颜色和背景(圆形,整个进度条背景),默认值为白色和黑色。
  • highlightColor:类型:string。边框高亮的颜色,默认值为#08F
  • background:类型:string。“弹出”动画时遮罩层的颜色。默认为body的背景色。
  • buttonSize:类型:number。圆形按钮的大小。默认值为元素的高度。
  • width:类型:number。进度条扩展的宽度。默认值为元素的宽度。/li>
  • labelHeight:类型:number。标签的高度,单位像素,默认值53。
  • barHeight:类型:number。进度条的厚度,默认值为4。
  • barInset:类型:number。进度条的填充部分,默认值为-0.5。
  • bleedTopbleedRightbleedLeftbleedBottom:类型:number。图形的margin值。默认为100, 50, 50 和 60。
  • fontFamily:类型:string。标签上的字体。默认值为'Helvetica Neue','Helvetica','Arial',sans-serif
  • fontWeight:类型:string。默认值为'bold'
  • textCompletetextFailtextCancel:类型:string。在以上事件中显示的文本。默认值分别为:'Done''Failed''Canceled'
  • barStretch:类型:number。进度条拉伸的最大距离。默认为20。
  • jumpHeight:类型:number。箭头和标签跳动的距离。默认为50。
  • barElasticOvershootbarElasticPeriod:类型:number。弹性动画的设置。默认值为1.8和0.15。
  • labelWobbliness:类型:number。在进度条动画期间标签的动画设置。默认为40。
  • arrowHangOnFailarrowHangOnCancel:类型: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):相同名称参数的别名。

Github:https://github.com/codrops/ElasticProgress/

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:138.44KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery亚博赔率最高--任意三数字加yabo.com直达官网下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2031.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于TweenMax和SVG的炫酷弹性进度条动画特效

我当前G币余额:0 已下载次数:0

注:购买该亚博赔率最高--任意三数字加yabo.com直达官网的用户当日可免费下载 亚博赔率最高--任意三数字加yabo.com直达官网作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)