制作svg动画
要实现一步一步画出来一个图片，css3做不到吧。除非一张张的图片定时显示。想不到别的招了。如今用的是一个插件，做了一个svg动画。
插件地址：http://lazylinepainter.info/
先用AI做好路径，保存为svg格式的文件。
使用插件。先引入须要的文件：
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.9.1.min.js"><\/script>')</script>
<script src="jquery.lazylinepainter-1.5.1.js"></script>
demo例如以下：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lazy Line Painter</title>
<meta name="description" content="A Jquery plugin for SVG path animation">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style>
body {
background:#fffafa;
cursor: pointer;
}
#demo {
width:400px;
height:400px;
position:absolute;
left:50%;
margin:80px 0 0 -175px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.9.1.min.js"><\/script>')</script>
<script src="jquery.lazylinepainter-1.5.1.js"></script>
<script type="text/javascript">
(function( $ ){
/*
* Lazy Line Painter
* SVG Stroke animation.
*
* https://github.com/camoconnell/lazy-line-painter
*
* Copyright 2014
* Cam O'Connell - http://www.camoconnell.com http://www.behance.net/camoconnell
* Released under the MIT license
*
*/
// goto http://lazylinepainter.info to convert your svg into a svgData object.
var svgData = {
"demo" :
{
"strokepath" :
[
{ "path": "M359,201.8c0.4-27.7,1.6-57.5-10-76c-6.5-8.9-37.8-6.5-53-6c-9.3,2.4-18.7,4.7-28,7c-24.6,10.2-48.3,36.4-54,65c-0.7,0.3-1.3,0.7-2,1c-25.1-34.9-60.6-60.1-122-59c-21.7,22.6-14.7,81.1-2,107c24.9,51,71.3,83.3,102,129c13.1,19.5,29.2,43.3,18,76c0,1,0,2,0,3c17.5-2.899,59.3-48.7,66-64c40.8,0.4,65.2-6.7,74-47c18.6,13.5,59.6,35.9,81,7C466.1,294.8,422.8,190.6,359,201.8z",
"duration": 1500,
"fill": '#231815',
"strokeWidth": 8
},{
"path": "M356,222.8c34.6-0.2,37.5,46.3,15,61c-15.8,0.4-24.9-6.899-29-18c28.6,10.101,37.6-26.1,11-39c-0.7,0-1.3,0-2,0C352.7,225.5,354.3,224.1,356,222.8z",
"fill": '#231815',
"duration":300
},
{ "path": "M351,241.8c-0.7,3-1.3,6-2,9c-14.9,10-8.3-11.5-5-18c1,0.4,2,0.7,3,1C348.3,236.5,349.7,239.1,351,241.8z",
"fill": '#231815',
"duration":300
},
{ "path": "M230,419.8c-0.7,0.3-1.3,0.7-2,1c-8.4-45.5-73.8-123.1-101-157c-15.4-19.2-35.3-31.4-42-60c-5.2-22.3,5-40,10-55c8.6-3.3,25.4,4.2,35,7c41.7,12.2,72,22.6,87,60c30.9-2.8,24.1-42.1,37-63c9-14.6,24.4-13.5,41-21c38.9-0.5,55.5,6.9,49,48c-1,11.3-2,22.7-3,34c-4.5,12.4-14.9,18.6-17,37c-14.1-10.7-31.9-30.2-59-24c-26.5,6-46.5,47.7-82,19c-1.3,0-2.7,0-4,0c-1,2.7-2,5.3-3,8c12.6,14.3,23.2,19.9,50,18c-0.3,4.7-0.7,9.3-1,14c-12.7,9.101-27.3,15.7-45,7c-1.3,1-2.7,2-4,3c0.3,2,0.7,4,1,6c8.9,19.4,38,12.601,51,3c2.8,34,21.6,50.3,34,73C251.3,391.8,240.7,405.8,230,419.8z",
"fill": '#231815',
"duration":300
},
{ "path": "M258,294.8c19.7-8.2,10.5-38.3-12-38c2.3-2.7,4.7-5.3,7-8c28-1.3,43.5,27.9,31,53c-10.5,21.2-43.9,18.3-47-8C243.4,297.1,251.1,299.2,258,294.8z",
"fill": '#231815',
"duration":500
}
,{ "path": "M241,265.8c2,1,4,2,6,3c2.6,7.101,2,12.101-5,15c-1.7,0.3-3.3,0.7-5,1C236.8,277.2,237.5,269.9,241,265.8z",
"fill": '#231815',
"duration":500
}
,{ "path": "M326,355.8c-33.7,45.2-72.9-3.899-84-35c31.6,18,69.2-13.8,53-55c-4.7-11.899-13.5-17-22-25c44.9,0.4,43.3,27.7,55,61C334.8,321.1,339.8,337.3,326,355.8z",
"fill": '#231815',
"duration":500
},
{ "path": "M413,338.8c-38.9,28.4-79.5-32.3-79-67c0.3,0,0.7,0,1,0c5.4,17.2,29.6,31.8,48,18c25.2-19,7-60.8-9-74C419.3,216.3,451.8,310.5,413,338.8z",
"fill": '#231815',
"duration":500
}
],
"dimensions" : { "width": 600, "height":800 }
}
}
$(document).ready(function(){
// Setup your Lazy Line element.
// see README file for more settings
$('#demo').lazylinepainter({
'svgData' : svgData,
'strokeWidth':7,
'fill':'#dc908e',
'onComplete' : function(){
var a=$("#demo path");
a.attr("fill","#0d4ff7");
a.removeAttr("stroke");
a.removeAttr("fill-opacity");
a.removeAttr("stroke-opacity");
a.removeAttr("stroke-width");
a.removeAttr("stroke-linecap");
a.removeAttr("stroke-linejoin");
a.removeAttr("style");
var b=$("#demo path").first();
b.attr("fill","#231815");
b.removeAttr("stroke");
b.removeAttr("fill-opacity");
b.removeAttr("stroke-opacity");
b.removeAttr("stroke-width");
b.removeAttr("stroke-linecap");
b.removeAttr("stroke-linejoin");
b.removeAttr("style");
}
}
)
// Paint your Lazy Line, that easy!
var state = 'paint';
$('#demo').lazylinepainter(state);
})
})( jQuery );
</script>
</head>
<body>
<div id='demo'></div>
</body>
</html>
效果例如以下：
制作svg动画的更多相关文章
- 推荐15款制作 SVG 动画的 JavaScript 库
在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计.绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用.这些J ...
- react-native使用react-art制作SVG动画
想要使用SVG做一个动画,郁闷了一上午终于有了一点思路.. 其实我是看了一篇国外的文章.网址:http://browniefed.com/blog/2015/05/03/getting-react-a ...
- SVG动画制作工具 ， 从此抛弃臃肿的gif
VG简介 只要是程序员的你,你不得不知道svg图片,它可以无限任意放大拉伸都不会损失画质,就像系统字体一样可以无限矢量放大,svg更高级是可以用来制作矢量动画,现在各大浏览器和系统基本对svg已经支持 ...
- 用svg制作loading动画
首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Ca ...
- Walkway.js – 用线条制作简约的 SVG 动画
Walkway.js 是一个使用线条和路径元素组成 SVG 动画图像的简单方法.只需根据提供的配置对象创建一个新的 Walkway 实例就可以了.这种效果特别适合那些崇尚简约设计风格的网页.目前, W ...
- 用Canvas制作loading动画
上一篇讲到用SVG制作loading动画,其中提到了线性渐变在扇形区域中的问题,并且用SVG SIML语法制作的loading动画并不是所有浏览器都兼容,所以现在用Canvas重新实现了一遍. 这里与 ...
- 10 个非常实用的 SVG 动画操作JavaScript 库
SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些 ...
- 10 个非常有用的 SVG 动画的 JavaScript 库
SVG 通常可以用作跨分辨率视频.这意味着在一块高分屏幕上不会降低图片的锐度.此外,你甚至可以让SVG动起来,通过使用一些javascript类库.下面,我们分享一些javascript类库,这些类库 ...
- SVG 动画（animate、animateTransform、animateMotion）
原文:https://blog.csdn.net/chy555chy/article/details/53535581 参考 MDN开发文档 https://developer.mozilla.org ...
随机推荐
- 【计算机网络】2.2 Web和HTTP
第二章第二节 Web和HTTP 这一章中,我们需要讨论5种重要的应用:Web.文件传输.电子邮件.目录服务.P2P:这一节中,我们将讨论Web和它的应用层协议HTTP. Outline Web简介 H ...
- 16第一章 ASP.Net编程基础知识
第一章 ASP.Net编程基础知识 第一章 ASP.Net编程基础知识 本章首先介绍用ASP.Net技术编制服务器端动态网页所需的网络和HTML标记语言方面的有关知识.然后 ...
- vim 删除单个单词，cc和dd关系
c 功能和d相同,区别在于完成删除操作后进入INSERT MODE cc 也是删除当前行,然后进入INSERT MODE 删除每行第一个字符 :%s/^.//g ...
- Linux 内核框架图
- [Python3网络爬虫开发实战] 1.3.2-Beautiful Soup的安装
Beautiful Soup是Python的一个HTML或XML的解析库,我们可以用它来方便地从网页中提取数据.它拥有强大的API和多样的解析方式,本节就来了解下它的安装方式. 1. 相关链接 官方文 ...
- 标量子查询中有ROWNUM=1怎么改？
碰到标量子查询中有ROWNUM=1怎么改? select to_date(o.postdate,'yyyymmdd'), (select cur.c_code from cur_tbl cur whe ...
- PAT顶级 1002. Business (35)
PAT顶级 1002. Business (35) As the manager of your company, you have to carefully consider, for each p ...
- Vue如何点亮多个tab选项简易方法
我们平常遇到点击选择会遇到单选或多选,当你设计图是自定义的时候,第一反应就是引入UI插件吧.可是如果项目只用到插件的这一点点功能,我们引入了一个插件这就不太友好了.此时我们自己写这个小功能是很简单的, ...
- Java中static、final、static final的区别
final: final可以修饰:属性,方法,类,局部变量(方法中的变量) final修饰的属性的初始化可以在编译期,也可以在运行期,初始化后不能被改变. final修饰的属性跟具体对象有关,在运行期 ...
- [OJ#40]后宫佳丽
[OJ#40]后宫佳丽 试题描述 如果机房要关门了,或者有妹子在等你,你可以直接看最后一句话. Fyq 是一只饥渴的鸭子. Fyq 有一个充实的后宫,可惜他总是体力不支,为此他经常苦恼,总是想方设法让 ...