网站地图 | 联系我们 赣州网站建设 赣州做网站 赣州网站制作 赣州网站优化
你现在的位置:网站首页 > 资源分享 > JS插件 > 正文内容


分享一个有趣的进程按钮效果

发布时间:2015-10-16 | 编辑 : 小勇 | 分类 : JS插件 | 阅读: 次 | 评论 :0

ElasticProgress

视图演示 下载源

今天,我们想要与你们分享一个有趣的进程按钮效果。 基于一个非常好的效果 Dribbble拍摄 “下载” xjw。 按钮开始作为一个图标和一个箭头,一旦点击,它模拟成一个有趣的小电线和一个标签显示下载百分比。 看一看:

Dribbble shot

在本文中,我们将看一下所需要的某些方面做一个动画,一些技巧,一些我们可能面对的挑战。

如果你想在你的项目中使用这种装载机,去 Github页面 然后按指示进行。

elasticprogress

技术

我们首先必须决定是哪个浏览器技术,我们将使用和渲染效果。 
有可能在很大程度上使这个动画 CSS 。 问题是,它并没有多少灵活性——画一条曲线,例如,可以是困难的,如果不是不可能的话,我们想要如何。 最重要的是,它可以相当出租汽车司机,我们必须依靠伪装形状与聪明的技巧,可以迷惑和丑陋。

帆布 可以是一个不错的选择。 我们可以画出任何我们想要的形状,和性能,如果你细心,很好,甚至在移动。 很难使用,尤其是如果你不使用图书馆 Paper.js 。 此外,它几乎是一个黑盒子眼中的浏览器——它只是认为这是一个图像,忽略了它的内容。

这是我们其他的选项 SVG 。 它有它的缺点:它不是目前硬件加速,使性能低于恒星。 它也很旧,因此,充满怪癖。 然而,它很灵活,易于负载一个项目,和浏览器对它的每个元素像DOM对象,这使得它更适合交互。

除此之外,可以减轻其缺点:性能还不错如果我们动画小物体,和许多怪癖的解决 GSAP ,这是动画库我们将使用。 除了是一个很好的动画库,它提供了工具,使它更容易处理svg。 以后我们会看到更多。

规划SVG

当我们创建一个SVG动画,我们必须做出一切思考我们如何动画。 这一点,我们需要格外小心的图层名称,顶点,等等。 
这就是我在这个例子组织层。 我使用Adobe Illustrator,但它应该非常相似的编辑你的选择。

ai-layers

重要的在这里,除了命名,是分组。 如果你有意推动某些元素在一起,你应该收集他们在同一层以避免运行相同的动画两次不同的对象。 
现在,因为在这个演示动画顶点分别,我们也应该照顾他们。 
弹性动画我们想要实现,我们需要一个与一个光滑曲线点。 然而,我们也希望圆按钮转变成线,所以我们需要一个适应两线形状,最低数量的顶点,为了使动画很容易。

circle

这个not-perfect-but-good-enough-for-animation圈3点,我们可以打开变成弹性的事情。

vertices

我们可以放开,曲线成更紧张的形状通过贝塞尔曲线控制点接近顶点。

tense

这只是一个例子。 你的要求将取决于你想要的动画。 重要的是,当你在做图形,思考如何动画。

操纵

首先,您需要加载SVG可以用JS操纵它。 你可以直接粘贴到HTML,你可以 使用AJAX加载它 或者一个图书馆 Snap.svg 或者你有什么。

动画与GSAP SVG元素非常简单。 在您选择的元素…

var circle=document.querySelector("#background");

就像…你可以动画属性 规模 它将产生适当的 变换 

TweenMax.to(circle,1,{
  scale:0.1
})

对没有的东西 变换 ,你只是使用 attr 属性:

TweenMax.to(circle,1,{
  attr:{
    "stroke-width":4
  }
})

为我们的动画,将派上用场的东西是GSAP弹性宽松,这是可配置的 easeParams 财产。

 

 

另一个非常有用的,它确实是 消除浏览器不一致 transformOrigin 对svg 

TweenMax.to(circle,1,{
  transformOrigin:"50% 50%",
  scale:0.1
})

因为我说的是浏览器的问题:到目前为止,Firefox将抛出一个错误如果你试图动画或设置属性,等等transformOrigin 一个隐藏的对象。 一定要设置对象的 显示 财产 内联 而不是 没有一个 在改变什么。

elasticprogress2

顶点动画

有很多的工具可以用来选择和个人SVG动画顶点,喜欢简单。 svg我之前提到过。 在这个演示中,我使用 svg-pathdata 。 ——它收到一个SVG路径字符串 属性的 路径 元素,其中包含的信息路径的形状,并返回的数组 命令 ,个人观点。 你可以改变的值,然后解析数组回到一个SVG路径字符串并应用它回属性。 
它看起来有点混乱,但它很简单,一旦你把你的头。 这里有一个例子:

// select the path
var line=document.querySelector('#line path');
// get the d attribute
var d=line.getAttribute('d');
// get the pathdata (toAbs() converts the points coordinates from relative to absolute)
var pathData=new SVGPathData(d).toAbs();
// get the vertices
var points=pathData.commands;
// pick a point
var middlePoint=points[1];

// animate
TweenTo(middlePoint,1,{
  y:0,
  y1:0, // bezier control point
  // updating using GSAP`s onUpdate and onComplete to keep it synchronized
  onUpdate:updatePath,
  onComplete:updatePath
});

function updatePath(){
  // converts the points array back to svg path string
  line.setAttribute('d',pathData.encode());
}

动画多个顶点相同的路径,为了避免多次更新路径,保持 onUpdate 函数在一个单独的渐变。

Tween.to(points[0],1,{
  x:-100
});
Tween.to(points[1],1,{
  x:0
});
Tween.to(points[2],1,{
  x:100
});
Tween.to(this,1,{
  onUpdate:updatePath
})
...

elasticprogress3

交互

如果你想让一个按钮,您可能希望避免整个SVG,包括空区域,点击——你想要只按钮一个按钮。 幸运的是,这个问题的解决办法很简单。 
SVG的容器,你设置下面的CSS属性:

pointer-events: none;

SVG元素你想点击,您设置:

pointer-events: fill;

可以通过JS的 setAttribute 函数,或者直接在SVG文件本身,无论是作为一个CSS规则,元素的一个属性,或者在它 风格 属性。 
一个不错的方法是保持一个单独的透明物体的一切只能用作打击区域。 这样,你可以用动画的对象在这没有问题。

elasticprogress4

可访问性

因为这不是一个适当的按钮,也没有一个合适的进度条,它是无形的screenreaders和其他一切都依靠语义。 有几件事情我们可以做来减轻这个:

  • 设置容器的 角色 属性来 按钮 
  • 可以用键盘,设置容器的 tabindex 属性为0或更大,并添加一个键盘事件的触发点击空间和返回键。
  • 即使在这个演示按钮视觉上变成一个进度条,我们不应该改变 角色 的一个元素。 所以,我们创建一个单独的 progressbar 屏幕的元素,把它,让它不可见,与我们的动画和更新它。

现在你有一些见解的过程创建一个这样的动画,看一看整个源代码和检查 指令 为集成这样的按钮。

我们希望你喜欢这个进步按钮,发现它有用!

本文标签按钮效果   网页效果   JS  

赞助我们:如果你觉得本站的内容对你确实有所帮助,请赞助我们让我们有动力为你继续奉献更多有用的内容→赞助我们

版权说明:如非注明,本站文章均为 小勇工作室 原创,转载请注明出处和附带本文链接 http://www.yl0797.com/html/2015/jq_1016/5.html。


联系我们
QQ:
873268813
旺旺:
wsuper勇
邮箱:
给我发邮件
QQ群:
加入交流群

Powered By 小勇工作室,Copyright www.yl0797.com © 2008-2018, 赣ICP备15004575号