SVG实现描边动画
说起SVG，我是恨它又爱它，恨它是因为刚开始接触的时候自己傻B地想用代码去写它，其实在web上我们用它做交互也只是用了几个常用的特性而已，其他的标签知道这么一回事就成了，其实说白了它就是一种图片格式，你得去画它，网站上最长用的SVG交互效果就是描边动画了，今天就来实现它
先上效果图：
思路：要实现这种动画，我们要使用的是SVG的路径path标签，其中然后配合两个属性：stroke-dasharray和stroke-dashoffset，至于用什么方式实现动画效果就八仙过海了，我这里使用的是css3的animation
第一步：了解SVG的path
中文的意思就是路径，描边动画嘛，你得先给个路线我才能描边啊，路径就是这个路线：
先上网找个图片，放进AI里面，然后用钢笔勾勒路径，再把图片删掉，剩下路径，把它另存为svg，然后把它拖进编译器里，就能看到一堆代码，我们只要保留其中的path就好（不会用AI的给你个理由去勾搭设计师美眉）
第二步：了解stroke-dasharray和stroke-dashoffset
理解字面意思就好：
stroke-dasharray：就是把线条断开为虚线，下图就是我把stroke-dasharray设置为10的效果，它就变成虚线了，数值越大，线就越长
stroke-dashoffset：就是设置线条的偏移，设置了这个值后，线段就会偏移相应的值，我们要实现动画只要动态改变这个偏移值就好，那样线条就会动起来了
第三步：利用@keyframes实现动态描边
@keyframes describe{
from{
stroke-dashoffset: 1000;
opacity: 1;
}
to{
stroke-dashoffset: 0;
opacity: 0;
}
}
额~~有点快，没关系，明白意思就好，最后，描边完成之后再插入一个动画，让背景图片淡入，最终效果如下：
下班了，不调了，如果再慢点效果估计更好
上终板代码(直接拷贝就能跑)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>super</title>
<script src="vivus.js"></script>
<style>
.super_logo{
position: absolute;
opacity: 0;
animation:fadeIn 1s ease-in forwards;
-webkit-animation:fadeIn 1s ease-in forwards;
}
#super{
position: absolute;
z-index: 1;
stroke-dasharray: 800;
stroke-dashoffset: 1000;
animation: describe 2s forwards;
-webkit-animation: describe 2s forwards;
}
@keyframes fadeIn{
from{opacity: 0;}
80%{opacity: 0.5;}
to{opacity: 1;}
}
@-webkit-keyframes fadeIn{
from{opacity: 0;}
80%{opacity: 0.5;}
to{opacity: 1;}
}
@keyframes describe{
from{
stroke-dashoffset: 1000;
opacity: 1;
}
to{
stroke-dashoffset: 0;
opacity: 0;
}
}
@-webkit-keyframes describe{
from{
stroke-dashoffset: 1000;
opacity: 1;
}
to{
stroke-dashoffset: 0;
opacity: 0;
}
}
</style>
</head>
<body style="background:#0f1a3a;">
<img src="http://images2015.cnblogs.com/blog/754767/201606/754767-20160606165217980-1558570494.gif" alt="super" class="super_logo">
<svg id="super" x="0px" y="0px" width="293px" height="200px" viewBox="0 0 293 200">
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M67.667,39.667c0,0-33.334,17.333-46.667,36.667
c0,0,33.007,40.458,43.331,50.018c19.419,17.982,65.002,55.316,82.169,59.982c0,0,27.834-11.334,49.834-30.667S249,113,261,100
s9.334-12.333,15.334-22.333c0,0-21.333-29.333-44-38c0,0-162.001-5.334-163.334-2.667"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M169.667,50.333c0,0-71.334-2.667-74.667,8.667s42,14,42,14
s55.333,4.667,60,6.667s32.668,7.254,43.334,31.627L255,93.667C255,93.667,217,59,169.667,50.333z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M75.667,123c0,0,42,8,78,8.667s32.667,10.667,32.667,10.667
S185.333,155,146.5,153.667S75.667,123,75.667,123z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M45,93c0,0-12.667-24,34-48h-8.667c0,0-35.455,24.559-36,35.677L45,93
z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M174.912,161c0,0-24.745,12.999-24.745,12.333
s-15.25-4.249-20.583-10.416"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M130,162.667c0,0,1.75-3.083,13.667-1.25c0,0,30,0.836,30.75-0.582"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M177.75,43L224,45.5c0,0,7.5,12.125-13,8.625S177.75,43,177.75,43z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M237.25,52c0,0,2.75,20.375,21.875,35.625l5.75-6.948
C264.875,80.677,249.273,55.266,237.25,52z"/>
</svg>
</body>
</html>
恩恩~~写到这里我的肚子饿惨了，他们都下班去吃饭了，打字这么开心我干脆再介绍个插件，那就vivus.js
Vivus是一款可以执行SVG路径动画的轻量级Javascript库，github地址：https://github.com/maxwellito/vivus
扔个中文的介绍http://www.htmleaf.com/html5/SVG/201501261279.html
写的还可以，我就不重复码字了，直接上demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>super</title>
<script src="vivus.js"></script>
<style>
.super_logo{
position: absolute;
}
#super{
position: absolute;
z-index: 1;
}
</style>
</head>
<body style="background:#0f1a3a;">
<img src="super.gif" alt="super" class="super_logo">
<svg id="super" x="0px" y="0px" width="293px" height="200px" viewBox="0 0 293 200">
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M67.667,39.667c0,0-33.334,17.333-46.667,36.667
c0,0,33.007,40.458,43.331,50.018c19.419,17.982,65.002,55.316,82.169,59.982c0,0,27.834-11.334,49.834-30.667S249,113,261,100
s9.334-12.333,15.334-22.333c0,0-21.333-29.333-44-38c0,0-162.001-5.334-163.334-2.667"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M169.667,50.333c0,0-71.334-2.667-74.667,8.667s42,14,42,14
s55.333,4.667,60,6.667s32.668,7.254,43.334,31.627L255,93.667C255,93.667,217,59,169.667,50.333z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M75.667,123c0,0,42,8,78,8.667s32.667,10.667,32.667,10.667
S185.333,155,146.5,153.667S75.667,123,75.667,123z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M45,93c0,0-12.667-24,34-48h-8.667c0,0-35.455,24.559-36,35.677L45,93
z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M174.912,161c0,0-24.745,12.999-24.745,12.333
s-15.25-4.249-20.583-10.416"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M130,162.667c0,0,1.75-3.083,13.667-1.25c0,0,30,0.836,30.75-0.582"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M177.75,43L224,45.5c0,0,7.5,12.125-13,8.625S177.75,43,177.75,43z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M237.25,52c0,0,2.75,20.375,21.875,35.625l5.75-6.948
C264.875,80.677,249.273,55.266,237.25,52z"/>
</svg>
<script>
window.onload=function(){
var toPlay= new Vivus('super', {
type: 'delayed',
duration: 50,
start: 'autostart',
forceRender: false,
dashGap: 20}
);
var oSuper=document.getElementById('super');
oSuper.addEventListener('click',function(){
toPlay.reset().play();
});
};
</script>
</body>
</html>
以上~~如果大家觉得有意思，点个赞呗，关注下也就更好了
他们吃饭都回来了，我也终于要走了，实习狗下班
SVG实现描边动画的更多相关文章
- 纯CSS实现帅气的SVG路径描边动画效果(转载)
本文转载自: 纯CSS实现帅气的SVG路径描边动画效果
- svg文字描边动画
svg动画在网页中是经常见到的,svg动画使得网页看起来清新美观 任何不规则图形都可以由svg绘制完成,当然也包括文字,文字本身就可以看作一个不规则图形
- 使用snapjs实现svg路径描边动画
一,snap.svg插件在近几天,突然接到一个需求,内容是要在网页上写一个路径的动画,还需要可以随意控制动画的速度,开始于结束,本来是一个图片可以解决的问题,结果就这样变难了呀,在网上查一会之后,突然 ...
- anime.js 实战：实现一个带有描边动画效果的复选框
在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...
- SVG描边动画原理
SVG描边动画原理其实很简单,主要利用以下两个属性 stroke-dasharray 制作虚线,使得黑白相间, stroke-dashoffset 使得虚线向开头偏移,这里的1500不精确,是我随便取 ...
- SVG描边动画实现过程
准备工具:Adobe AI+PS 1.确定SVG画布的大小,在PS中切出需要描边效果的区域,以此区域的大小做为SVG容器的大小. 2.将PS中切好的图片直接拖拽到AI中 3.使用AI中的钢 ...
- SVG动画 -- 描边动画
代码说明:纯CSS实现,无JS <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- SVG的路径动画效果
使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...
- 超级强大的SVG SMIL animation动画详解
本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有 ...
随机推荐
- 关于继承MonoBehaviour的一些记录
在开发游戏中,为了减少不必要的代码量,我们经常会继承MonoBehaviour,那么MonoBehaviour内部的内置方法Start.Update等等如果在父类中定义了,在子类中再次定义会发生什么事 ...
- PowerDesigner实用技巧小结(3)
PowerDesigner实用技巧小结(3) PowerDesigner 技巧小结 sqlserver数据库databasevbscriptsqldomain 1.PowerDesigner 使用 M ...
- .NET/C# 类构造函数中this的用法 （转）
在C#中this用来指代当前对象,用于当成员函数中的形参名跟成员变量名一致时,进行区分. 但this不仅仅只有这一作用,this还可以如下这样用: class class1 { private int ...
- ExtJs5.1.1使用中问题集锦
1.获取grid filter对象: grid.getStore().getFilters().items 2.获取grid filter后把filter对象转换成json格式字符串:grid.ge ...
- Codeforces Round #319 (Div. 1) B. Invariance of Tree 构造
B. Invariance of Tree Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/576/ ...
- U-BOOT 移植到友善之臂mini2440
U-BOOT 移植到友善之臂mini2440 开发环境:ubuntu 10.10 编译器:友善之臂mini2440光盘自带arm-linux-gcc 4.4.3 一. 在denx官网下载源码,我所用版 ...
- 杭电 2602 Bone Collector
Bone Collector Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- 句柄(Handle)
1.句柄是什么? 在windows中,句柄是和对象一一对应的32位无符号整数值.对象可以映射到唯一的句柄,句柄也可以映射到唯一的对象.2.为什么我们需要句柄? 更准确地说,是window ...
- php常用系统函数
首先纯html页要用meta标签声明编码 <meta http-equiv="Content-Type" content="text/html; charset ...
- ssh docker container
docker run -d -p 127.0.0.1:33301:22 centos6-ssh ssh登陆容器: ssh root@127.0.0.1 -p 33301