SVG制作素描线动画举例
1）.首先画一条素描线，如图
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox = "0 0 200 100">
fill="none"
stroke = "#AAA"
stroke-width = "2"
d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215"/>
素描线的参数可以使用工具生成
2）.SVG实现素描的动画及原理
stroke-dasharray = "100 10" stroke-dashoffset = "0"
stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙，这里包含两个参数
stroke-dashoffset定义了从那个位置开始渲染生成线段
3）.使用CSS3来实现素描动画效果
/*定义keyframe动画*/
/* 添加动画到path元素 */
.path{
stroke-dasharray: 265.07
stroke-dashoffset: 265.07
animation: dash 3s linear infinite
/* 支持chrome */
-webkit-animation: dash 3s linear infinite
}
@keyframes dash{
from{
stroke-dashoffset: 265.07/* 这里是svg图形中素描线长度，可以使用js获取 */
}
to{
stroke-dashoffset: 0
}
}
/* 支持chrome浏览器 */
@-webkit-keyframes dash{
from{
stroke-dashoffset: 265.07/* 这里是svg图形中素描线长度，可以使用js获取 */
}
to{
stroke-dashoffset: 0
}
}
4）.使用Javascript来调节动画效果的参数
/*定义相关Javascript*/
var current_frame, //定义当前帧
total_frames, //定义全部帧数
path, //定义svg中的唯一path元素
length, //定义path所生成的素描长度
handle//定义javascript动画句柄
path = document.getElementById('path'),
length = path.getTotalLength()
//定义初始化方法
var init = function(){
current_frame = 0
total_frames = 160
path.style.strokeDasharray = length + ' ' + length//定义dasharray
path.style.strokeDashoffset = length//定义dashoffset
handle = 0
}
//定义实际的动画绘制方法
var draw = function(){
var progress = current_frame/total_frames
if(progress>1){ //这里定义完成动画
window.cancelAnimationFrame(handle)
}else{//否则使用reqeuestAnimationFrame来生成动画
current_frame++
path.style.strokeDashoffset = Math.floor(length*(1 - progress))
handle = window.requestAnimationFrame(draw)
}
}
//定义一个重新运行方法
var rerun = function(){
init()
draw()
}
//页面加载即运行
rerun()
这里主要定义初始化方法和动画绘制的方法，window.requestAnimationFrame(draw)来生成动画。
2）.SVG实现素描的动画及原理
stroke-dasharray = "100 10" stroke-dashoffset = "0"
stroke-dasharray定义了生成线段长度，及其线段和线段之间的缝隙，这里包含两个参数
stroke-dashoffset定义了从那个位置开始渲染生成线段
2.SVG简介
可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。
3.SVG的特点
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG图像可通过文本编辑器来创建和修改
SVG图像可被搜索、索引、脚本化或压缩
SVG是可伸缩的SVG图像可在任何的分辨率下被高质量地打印
SVG可在图像质量不下降的情况下被放大
34浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome以及 Safari支持内联SVG。Internet Explorer 8或更早版本，可通过安装Adobe SVG Viewer以支持SVG。
4 SVG标签
SVG代码以元素开始，包括开启标签和关闭标签。这是根元素。width和height属性可设置此SVG文档的宽度和高度。version属性可定义所使用的SVG版本，xmlns属性可定义SVG命名空间。
Ileana Hunter （ 罗丝·亨特）Artist | Professional | Traditional Art
United Kingdom
Current Residence:
Norwich, UK
deviantWEAR sizing preference:
S
Favourite photographer:
Man Ray
Operating System:
Coffee
Shell of choice:
Terebra maculata Linnaeus
Personal Quote:
'I don't do real life'
Favorite visual artist
Michelangelo Buonarroti
Favorite movies Some Like It Hot, Black Cat White Cat, In Bruges, anything by Almodovar or with Louis de Funes
Favorite bands / musical artists
Muse, Amy Winehouse, Queen. A bit of classical now and then.
Favorite writers
Gabriel Garcia Marquez, nenea Iancu
Tools of the Trade
Pencils
Other Interests
Beauty
自己翻译一下吧，我英文不太好。
可以去专业的培训学校或者网上学习。1.关注基本功。从线条、透视、光影三者开始。排名分先后。
2.对画漫画来说，速写可以训练对线条的控制力，是非常好的入门方法。关键词：长线条，一次一笔。
3.素描作为基本功不可或缺。建议画静物，训练你的透视和光影。杯子苹果盒子都可以，慢慢过渡到大物件。
参考书籍：《素描的诀窍》、《像艺术家一样思考》、《伯里曼人体结构绘画教学》----人体结构必读之书哇、《素描指南》第六版。
