教程参考ColinGarven提出的实现圆形进度按钮的思路。我们将使用JakeArchibald讲过的SVG素描动画技术来实现圆形进度过程,然后提供一个成功或失败的状态来显示完成后的最终状态。
今天给大家展示如何实现一个漂亮的进度按钮的思路,这个思路来自于ColinGarven的不可思议的提交按钮。我们首先看一下实现这个思路需要的步骤,顺便欣赏一下这个动画^^。正如Colin在评论中提到的,实现这个按钮背后的想法如下:一旦点击,提交按钮就变成一个圆环,并且使用这个圆环的边界展示一个进度动画。当这个进度动画完成时,按钮将再次恢复成原来大小,同时会显示一个标记用来确认提交已完成。接下来我们将完成这个思路,并且针对提交失败的情况我们添加另一个标记。
如果只考虑CSS技术,也是有可能实现这样的按钮和动画效果的。其中最具挑战的部分还是环形的进度效果,这里提供一个聪明的技巧——使用Clip属性来实现进度效果。关于这个技巧,AndersIngemann写了一篇详实的教程。但是这次我们还是基于SVG技术,CSS转换和一点儿JavaScript来实现。关于环形进度效果和叉号,我们将使用JakeArchibald介绍的动画素描技术。
需要注意的是动画SVG在浏览器的兼容上还是存在问题,这些类型的技术仍在起步阶段,所以本教程只用来实验练习,期待在未来可以派上用场。
所以,让我们开始吧。
如果你有仔细观察Colin的Dribbble上展示的效果动画,可能已经注意到,我们需要关注按钮的几个状态。
有意思的部分是按钮从一个状态转换成另一个状态。
首先,我们要使用透明背景和边框颜色来展示一个简单的按钮,鼠标悬停时,我们使用边框色来填充该按钮,并且把按钮上的文本变成白色。
AnimatedProgressButton01_hover(1)
当我们点击按钮(例如,为了提交一个表单),我们要淡出文本,减少按钮的宽度使它变成一圆圈,并且使按钮的边框变厚,在边框上开始一个进度动画。我们将使用SVG圆圈来实现进度动画,因此我们需要确保动画开始的瞬间,按钮圆圈和SVG圆圈大小一致,位置一致。然后我们绘制圆的边线,模拟提交的过程。
AnimatedProgressButton02_progress
一旦提交完成,即边线都绘制完。我们必须使按钮再次扩大到原来大小,并且在提交成功时绘制对号,把按钮的颜色变成相应的颜色。
AnimatedProgressButton03_success
提交失败的情况下,我们也需要一个错误状态的风格。
AnimatedProgressButton04_error
接下来,让我们创建标记与我们所需要的元素。
为创建我们的标记,我们需要一个主容器,一个按钮(其中有包含文本的一个span元素)和三个SVG:
<!--progressbutton-->
<divid="progress-button"class="progress-button">
<!--buttonwithtext-->
<button><span>Submit</span></button>
<!--svgcircleforprogressindication-->
<svgclass="progress-circle"width="70"height="70">
<pathd="m35,2.5c17.,032.5,14.32.5,32.5c0,17.-14.,32.5-32.5,32.5c-17.,0-32.5,-14.-32.5,-32.5c0,-17.14.,-32.532.5,-32.5z"/>
</svg>
<!--checkmarktoshowonsuccess-->
<svgclass="checkmark"width="70"height="70">
<pathd="m31.5,46.5l15.3,-23.2"/>
<pathd="m31.5,46.5l-8.5,-7.1"/>
</svg>
<!--crosstoshowonerror-->
<svgclass="cross"width="70"height="70">
<pathd="m35,35l-9.3,-9.3"/>
<pathd="m35,35l9.3,9.3"/>
<pathd="m35,35l-9.3,9.3"/>
<pathd="m35,35l9.3,-9.3"/>
</svg>
</div><!--/progress-button-->
我们预先使用MethodDraw(一个易于使用的在线SVG编辑器)绘制对号和叉号。所有SVG的尺寸为70×70,因为我们按钮的高度为70像素。我们希望圆的边线为5像素,这样看起来更像Colin的效果。当我们在图形编辑器中绘制时,需要设置正确的半径,整个圆连同它的边线为70像素。需要注意在SVG中边线为半嵌入式(即一半在圆内一半在圆外),例如,边线为2,半径为10的圆,它的宽和高为20+2,而不是10+4(边线的2倍),因此公式为2r+边界。所以在我们的案例中我们知道2r+5=70,因此我们需要一个半径为32.5的圆。最终得到的形状为:
<circlecx="35"cy="35"r="32.5"/>
不幸的是,我们不能仅仅使用这个基本的形状,因为“路径”的起点在浏览器中是不同的,所以我们不能控制“进度动画”的起始点。所以,我们需要把这个圆转成路径,而不是(上面的基本形状)。你可以使用MethodDraw中Object菜单下的ConverttoPath很容易实现。
叉号我们将使用4个路径,这样我们可以从中心点开始绘制,使它看起来跟对号的动画类似。
现在我们有了我们需要的所有元素。让我们想想操作的流程,开始样式!
首先,我们需要给按钮容器添加样式。它就像按钮的外层皮肤,让我们使它更像一个按钮,我们把它的显示设置为inline-block。这样我们可以在文档流里使用它。
.progress-button{
position:relative;
display:inline-block;
text-align:center;
}
我们的按钮需要一些着色和排版,为了让它看起来更像Colin的按钮,我们需要设置正确的边框,使用Montserrat字体:
.progress-buttonbutton{
display:block;
margin:0auto;
padding:0;
width:250px;
height:70px;
border:2pxsolid#1ECD97;
border-radius:40px;
background:transparent;
color:#1ECD97;
letter-spacing:1px;
font-size:18px;
font-family:'Montserrat',sans-serif;
-webkit-transition:background-color0.3s,color0.3s,width0.3s,border-width0.3s,border-color0.3s;
transition:background-color0.3s,color0.3s,width0.3s,border-width0.3s,border-color0.3s;
}
我们还需要为那些将使用动画的属性添加一个过渡效果,如background-color,width等等。
在鼠标悬停时,我们将更改背景色和字体色:
.progress-buttonbutton:hover{
background-color:#1ECD97;
color:#fff;
}
让我们移除任何高亮的轮廓:
.progress-buttonbutton:focus{
outline:none;
}
所有的SVG需要绝对定位在中心位置,并且我们将不允许任何pointer-events:
.progress-buttonsvg{
position:absolute;
top:0;
left:50%;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
pointer-events:none;
}
因为我们只想操作边线,所以路径不应该有任何填充。路径除了在特殊状态下,其他状态都不需要展示它们,所以我们通过设置它们的透明度为0来隐藏它们。
.progress-buttonsvgpath{
opacity:0;
fill:none;
}
我们的进度环将通过设置圆形路径的边线为5来实现:
.progress-buttonpath{
stroke:#1ECD97;
stroke-width:5;
}
成功/错误的指示符号将由细的白色边线绘制,我们还将设置边线的linecap为round,这样看起来更加柔和。这两个符号都会有一个快速的不透明度的过渡效果。
.progress-buttonpath,
.progress-buttonpath{
stroke:#fff;
stroke-linecap:round;
stroke-width:4;
-webkit-transition:opacity0.1s;
transition:opacity0.1s;
}
现在让我们回顾一下,记住我们的总体规划。我们需要可以“样式化”按钮和它的特殊元素的三种额外状态(除了默认状态),加载状态,成功和错误的状态。因此我们将使用类“loading”,”success”,”error”来表示这三种状态。
当我们开始加载过程时,这个按钮将转变成一个圆,看起来更像一个表示进度的圆环。
.button{
width:70px;/*makeacircle*/
border-width:5px;
border-color:#ddd;
background-color:transparent;
color:#fff;
}
还记得么,我们在定义按钮样式时已经设置了过渡效果。
当我们开始进度动画时,文本应该快速淡出。
.span{
-webkit-transition:opacity0.15s;
transition:opacity0.15s;
}
通过设置opacity为0:
.span,
.span,
.span{
opacity:0;/*keepithiddeninallstates*/
}
当从加载状态变成成功或错误的状态时,我们不需要设置过渡,只需把文本简单的隐藏掉就可以。
当我们删除所有类返回到默认状态时,我们需要稍长一点儿的时间来显示文本。所以我们需要定义不同的过渡和延时时间来回到正常的显示状态。
/*Transitionforwhenreturningtodefaultstate*/
.progress-buttonbuttonspan{
-webkit-transition:opacity0.3s0.1s;
transition:opacity0.3s0.1s;
}
当我们到达最后的状态,提交成功或失败。这时我们需要重新定义一下按钮的过渡效果。
.button,
.button{
-webkit-transition:background-color0.3s,width0.3s,border-width0.3s;
transition:background-color0.3s,width0.3s,border-width0.3s;
}
接下来我们为最终状态设置颜色相关的样式:
.button{
border-color:#1ECD97;
background-color:#1ECD97;
}
.button{
border-color:#FB797E;
background-color:#FB797E;
}
当我们应用相应类的同时,需要展示SVG路径,并通过下面设置的过渡效果来实现stroke-dashoffset的动画。
.path,
.path,
.path{
opacity:1;
-webkit-transition:stroke-dashoffset0.3s;
transition:stroke-dashoffset0.3s;
}
通过定义一个额外的样式类为按钮的宽度动画添加一些可选的easing
.button{
-webkit-transition:background-color0.3s,color0.3s,width0.3scubic-bezier(0.25,0.25,0.4,1),border-width0.3s,border-color0.3s;
-webkit-transition:background-color0.3s,color0.3s,width0.3scubic-bezier(0.25,0.25,0.4,1.6),border-width0.3s,border-color0.3s;
transition:background-color0.3s,color0.3s,width0.3scubic-bezier(0.25,0.25,0.4,1.6),border-width0.3s,border-color0.3s;
}
.button{
-webkit-transition:background-color0.3s,color0.3s,width0.3scubic-bezier(0.6,0,0.75,0.75),border-width0.3s,border-color0.3s;
-webkit-transition:background-color0.3s,color0.3s,width0.3scubic-bezier(0.6,-0.6,0.75,0.75),border-width0.3s,border-color0.3s;
transition:background-color0.3s,color0.3s,width0.3scubic-bezier(0.6,-0.6,0.75,0.75),border-width0.3s,border-color0.3s;
}
如果你想研究其他的easing函数,可以使用Ceaser,这个工具是由MatthewLein提供的CSSEasing动画工具。
目前为止样式已经OK,让我们继续我们的魔术^^
JAVASCRIPT
我们将首先初始化/缓存一些元素:button是一个HTML的按钮元素,progressEl是SVG元素用来表示圆形进度条,successEl,errorEl两个SVG元素分别用来表示对号和叉号。
functionUIProgressButton(el,options){
=el;
=extend({},);
extend(,options);
this._init();
}
._init=function(){
=('button');
=newSVGEl((''));
=newSVGEl((''));
=newSVGEl((''));
//initevents
this._initEvents();
//enablebutton
this._enable();
}
}
._init=function(){
varself=this;
(function(path,i){
[i]=path;
=[i]=();
});
//undrawstroke
(0);
}
//valin[0,1]:0-nostrokeisvisible,1-strokeisvisible
=function(val){
for(vari=0,len=;i<len;++i){
[i].=[i]*(1-val);
}
}
接下来我们需要给按钮绑定click事件。这个按钮最初为一个圆形动画(通过添加loading类)。该动画结束后,现有的回调函数被调用(如果在options里有指定的话)或者我们只是将进行到100%(这个“假”动画的速度与css中定义的stroke-dashoffset的过渡是相同的),在这个点时按钮是不可点击的。
._initEvents=function(){
varself=this;
('click',function(){self._submit();});
}
._submit=function(){
(,'loading');
varself=this,
onEndBtnTransitionFn=function(ev){
if(){
(transEndEventName,onEndBtnTransitionFn);
}
('disabled','');
if(typeof==='function'){
(self);
}
else{
(1);
();
}
};
if(){
(transEndEventName,onEndBtnTransitionFn);
}
else{
onEndBtnTransitionFn();
}
}
一旦进度达到100%,我们需要重置的圆形进度条的路径。同时,我们会显示成功的对号标识或错误的叉号标识的路径。一段时间后()我们“拉开”任何状态指示器的路径,再次启用按钮。注意,如图所示,我们通过CSS控制转换。
=function(status){
varself=this,
endLoading=function(){
(0);
if(typeofstatus==='number'){
varstatusClass=status>=0?'success':'error',
statusEl=status>=0?:;
(1);
//addrespectiveclasstotheelement
(,statusClass);
//afterremovestatusandundrawtherespectivestrokeandenablethebutton
setTimeout(function(){
(,statusClass);
(0);
self._enable();
},);
}
else{
self._enable();
}
(,'loading');
};
//giveitalittletime(ideallythesamelikethetransitiontime)sothatthelastprogressincrementanimationisstillvisible.
setTimeout(endLoading,300);
}
按钮完成!
svg三倍图如何转换为一倍图svg三倍图如何转换为一倍图
svg三倍图如何转换为一倍图
将SVG文件在矢量图形软件中打开,根据需要缩放,然后保存即可。
svg导出文本svg导出文本介绍你需要将SVG文件转换为PNG、JPEG、TIFF、WEBP和HEIF格式。(1)前端点击导出,参考svg在线编辑器实现。
(2)也可以把svg的内容转为字符串,然后导出文件名为.svg的文件即可。
例如,在node中可以使用fs(文件系统),导出svg文件。