按钮特效 基于SVG和Segment.js的Loading加载

查看原文

查看在线演示Demo和更多原文内容教程：按钮特效 基于SVG和Segment.js的Loading加载

这是一款基于SVG和Segment.js制作的Loading加载按钮特效。该特效在点击按钮之后会出现基于SVG路径的无限圆形加载效果，加载成功或失败时会转换为不同的图形，显示不同的状态。

使用方法

SVG可以绘制很多基本图形，如圆形、椭圆、矩形等，但是只有SVG路径可以制作线条动画。因此，我们要制作一个圆形的线条动画必须使用路径。关于如何绘制一条SVG路径，可以参考这里。

绘制路径

要制作出这个特效，首先是要了解线条如何动画。所有的线条必须手动画出来。下面是第一个loading效果的SVG线条。

<svg width="120px" height="120px">
<path class="outer-path" stroke="#fff" d="M 60 60 m 0 -50 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100"></path>
<path class="inner-path" stroke="rgba(255, 255, 255, 0.5)" d="M 60 60 m 0 -30 a 30 30 0 1 1 0 60 a 30 30 0 1 1 0 -60"></path>
<path class="success-path" stroke="#fff" d="M 60 10 A 50 50 0 0 1 91 21 L 75 45 L 55 75 L 45 65"></path>
<path class="error-path" stroke="#fff" d="M 60 10 A 50 50 0 0 1 95 25 L 45 75"></path>
<path class="error-path2" stroke="#fff" d="M 60 30 A 30 30 0 0 1 81 81 L 45 45"></path>
</svg>

为它添加一些CSS样式：

body{
background: #354458;
}

svg path{
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 4;
fill: none;
}

上面的代码通过直线和弧线一步步的创建了整个loading所需的线条。创建后会得到如下图左边所示的效果。右边的图是失败状态的效果。



通过Segment.js进行动画

下面是创建这个loading动画的关键js代码。

var outer = document.querySelector('.outer-path'),
inner = document.querySelector('.inner-path'),
outerSegment = new Segment(outer, 0, 0.1),
innerSegment = new Segment(inner, 0, 0.1);

function outerAnimation(){
outerSegment.draw('15%', '25%', 0.2, {callback: function(){
outerSegment.draw('75%', '150%', 0.3, {circular:true, callback: function(){
outerSegment.draw('70%', '75%', 0.3, {circular:true, callback: function(){
outerSegment.draw('100%', '100% + 0.1', 0.4, {circular:true, callback: function(){
outerAnimation();
innerAnimation();
}});
}});
}});
}});
}

function innerAnimation(){
innerSegment.draw('20%', '80%', 0.6, {callback: function(){
innerSegment.draw('100%', '100% + 0.1', 0.6, {circular:true});
}});
}

outerAnimation();
innerAnimation();

创建一个通用js库

通过上面的代码我们已经可以进行loading加载线条动画了。但是我们还没有处理loading成功和失败时的状态。另外如果想添加新的loader该如何做呢？最好的方法是创建一个通用的js库或插件来处理这些问题。下面就是这个通用库的js代码：

function LoadingButton(el, options){
this.el = el;
this.options = options;
this.init();
}

LoadingButton.prototype = {
// Initialize everything
init: function(){
this.infinite = true;
this.succeed = false;
this.initDOM();
this.initSegments();
this.initEvents();
},

// Create an span element with inner text of the button and insert the corresponding SVG beside it
initDOM: function(){
this.el.innerHTML = '' + this.el.innerHTML + '';
this.span = this.el.querySelector('span');
var div = document.createElement('div');
div.innerHTML = document.querySelector(this.options.svg).innerHTML;
this.svg = div.querySelector('svg');
this.el.appendChild(this.svg);
},

// Initialize the segments for all the paths of the loader itself, and for the success and error animations
initSegments: function(){
for(var i = 0, paths = this.options.paths, len = paths.length; i < len; i++){
paths[i].el = this.svg.querySelector(paths[i].selector);
paths[i].begin = paths[i].begin ? paths[i].begin : 0;
paths[i].end = paths[i].end ? paths[i].end : 0.1;
paths[i].segment = new Segment(paths[i].el, paths[i].begin, paths[i].end);
}
this.success = this.el.querySelector('.success-path');
this.error = this.el.querySelector('.error-path');
this.error2 = this.el.querySelector('.error-path2');
this.successSegment = new Segment(this.success, 0, 0.1);
this.errorSegment = new Segment(this.error, 0, 0.1);
this.errorSegment2 = new Segment(this.error2, 0, 0.1);
},

// Initialize the click event in loading buttons, that trigger the animation
initEvents: function(){
var self = this;
self.el.addEventListener('click', function(){
self.el.disabled = 'disabled';
classie.add(self.el, 'open-loading');
self.span.innerHTML = 'Sending';
for(var i = 0, paths = self.options.paths, len = paths.length; i < len; i++){
paths[i].animation.call(self, paths[i].segment);
}
}, false);
},

// Make it fail
triggerFail: function(){
this.infinite = false;
this.succeed = false;
},

// Make it succeed
triggerSuccess: function(){
this.infinite = false;
this.succeed = true;
},

// When each animation cycle is completed, check whether any feedback has triggered and call the feedback
// handler, otherwise it restarts again
completed: function(reset){
if(this.infinite){
for(var i = 0, paths = this.options.paths, len = paths.length; i < len; i++){
if(reset){
paths[i].segment.draw(0, 0.1);
}
paths[i].animation.call(this, paths[i].segment);
}
}else{
this.handleResponse();
}
},

// Handle the feedback request, and perform the success or error animation
handleResponse: function(){
for(var i = 0, paths = this.options.paths, len = paths.length; i < len; i++){
paths[i].el.style.visibility = 'hidden';
}
if(this.succeed){
this.success.style.visibility = 'visible';
this.successAnimation();
}else{
this.error.style.visibility = 'visible';
this.error2.style.visibility = 'visible';
this.errorAnimation();
}
},

// Success animation
successAnimation: function(){
var self = this;
self.successSegment.draw('100% - 50', '100%', 0.4, {callback: function(){
self.span.innerHTML = 'Succeed';
classie.add(self.el, 'succeed');
setTimeout(function(){ self.reset(); }, 2000);
}});
},

// Error animation
errorAnimation: function(){
var self = this;
self.errorSegment.draw('100% - 42.5', '100%', 0.4);
self.errorSegment2.draw('100% - 42.5', '100%', 0.4, {callback: function(){
self.span.innerHTML = 'Failed';
classie.add(self.el, 'failed');
setTimeout(function(){ self.reset(); }, 2000);
}});
},

// Reset the entire loading button to the initial state
reset: function(){
this.el.removeAttribute('disabled');
classie.remove(this.el, 'open-loading');
this.span.innerHTML = 'Send';
classie.remove(this.el, 'succeed');
classie.remove(this.el, 'failed');
this.resetSegments();
this.infinite = true;
for(var i = 0, paths = this.options.paths, len = paths.length; i < len; i++){
paths[i].el.style.visibility = 'visible';
}
this.success.style.visibility = 'hidden';
this.error.style.visibility = 'hidden';
this.error2.style.visibility = 'hidden';
},

// Reset the segments to the initial state
resetSegments: function(){
for(var i = 0, paths = this.options.paths, len = paths.length; i < len; i++){
paths[i].segment.draw(paths[i].begin, paths[i].end);
}
this.successSegment.draw(0, 0.1);
this.errorSegment.draw(0, 0.1);
this.errorSegment2.draw(0, 0.1);
}
};

当然还应该为动画添加一些必要的CSS样式，下面使用的是SCSS代码：

// Loading button
.loading-button{
// When loading button is open
&.open-loading{
color: rgba(255, 255, 255, 0.8);
&.infinity{
padding-top: 80px;
}
svg{
display: inline-block;
visibility: visible;
opacity: 1;
transition: 1s opacity;
transform: translateX(-50%);
}
}
// Loading failed
&.failed{
background-color: #EB7260;
}
// Loading succeed
&.succeed{
background-color: #29ABA4;
}
// Remove transition when changing demo position
&.no-transition{
transition: 0s;
*{
transition: 0s;
}
}
// SVG element, centered and hidden initially
svg{
visibility: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: 0s;
path{
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 4;
fill: none;
// To hide success and error paths
&.success-path, &.error-path, &.error-path2{
visibility: hidden;
}
}
}
}

// Handle positions
.loading-button {
&.top {
svg{
top: 10px;
}
}
&.bottom {
svg{
bottom: 10px;
}
}
&.left {
svg {
top: 50%;
transform: scale(0.25) translateY(-50%);
transform-origin: 0 0 0;
left: 20px;
}
}
&.right {
svg {
top: 50%;
transform: scale(0.25) translateY(-50%);
transform-origin: 100% 0 0;
left: auto;
right: 20px;
}
}
&.open-loading {
&.left {
padding-left: 60px;
}
&.right {
padding-right: 60px;
}
&.top, &.bottom {
svg{
transition-delay: 0.2s;
}
}
&.circular-loading, &.circle-loading {
&.top {
padding-top: 140px;
}
&.bottom {
padding-bottom: 140px;
}
}
&.infinity-loading {
&.top {
padding-top: 80px;
}
&.bottom {
padding-bottom: 80px;
}
}
}
}

使用新的SVG loading加载效果

如果要使用新的SVG loading加载效果，可以像下面这样将SVG代码放置在一个模板中：

<script type="text/template" id="circular-loading">
<svg width="120px" height="120px">
<path class="outer-path" stroke="#fff" d="M 60 60 m 0 -50 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100"></path>
<path class="inner-path" stroke="rgba(255, 255, 255, 0.5)" d="M 60 60 m 0 -30 a 30 30 0 1 1 0 60 a 30 30 0 1 1 0 -60"></path>
<path class="success-path" stroke="#fff" d="M 60 10 A 50 50 0 0 1 91 21 L 75 45 L 55 75 L 45 65"></path>
<path class="error-path" stroke="#fff" d="M 60 10 A 50 50 0 0 1 95 25 L 45 75"></path>
<path class="error-path2" stroke="#fff" d="M 60 30 A 30 30 0 0 1 81 81 L 45 45"></path>
</svg>
</script>    

然后使用下面的代码来驱动新的loading动画。

function circularLoading(){
var button = document.querySelector('.loading-button'),
options = {
svg: '#circular-loading',
paths: [
{selector: '.outer-path', animation: outerAnimation},
{selector: '.inner-path', animation: innerAnimation}
]
},
loading = new LoadingButton(button, options);

function outerAnimation(segment){
var self = this;
segment.draw('15%', '25%', 0.2, {callback: function(){
segment.draw('75%', '150%', 0.3, {circular:true, callback: function(){
segment.draw('70%', '75%', 0.3, {circular:true, callback: function(){
segment.draw('100%', '100% + 0.1', 0.4, {circular:true, callback: function(){
self.completed(true);
}});
}});
}});
}});
}

function innerAnimation(segment){
segment.draw('20%', '80%', 0.6, {callback: function(){
segment.draw('100%', '100% + 0.1', 0.6, {circular:true});
}});
}

return loading;
}

原文地址：Creating Loading Buttons with SVG and Segment