制作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 ...
随机推荐
- jquery 点击切换div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android APK生成证书并签名方法
Android APK生成证书并签名方法 android cordova keystore android证书签名 阅读:925 时间:2018年09月20日 Android开发者可能对此很熟悉.使用 ...
- 10C++类和对象
类和对象 8.1 面向对象程序设计方法概述 到目前为止,我们介绍的是C++在面向过程的程序设计中的应用.对于规模比较小的程序,编程者可以直接编写出一个面向过程的程序,详细地描述每一瞬时的数据结构及对其 ...
- VirtualBox中的Linux读取Windows共享目录
1.安装VirtualBox的增强功能.菜单 -> 设备 -> 安装增强功能此时在Linux中会载入安装包,用管理员权限运行安装即可. 2.在VirtualBox设置共享目录.设置 -&g ...
- RabbitMQ之六种队列模式
先学习一下RabbitMQ中的六种队列,只学习前五种,具体的官方文档地址是:http://next.rabbitmq.com/getstarted.html 导入maven依赖: <depend ...
- run loop
Objective-C之run loop详解 作者:wangzz 原文地址:http://blog.csdn.net/wzzvictory/article/details/9237973 转载请注明出 ...
- [Thu Summer Camp2016]补退选
题目描述不说了. 题解: Trie+vector…… Trie存学生,vector存答案. 极为无脑但无脑到让人怀疑 代码: #include<cmath> #include<vec ...
- 微信小程序 传值取值的方法总结
微信小程序 传值取值的几种方法总结 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}"挖坑及 ...
- 爬虫项目 之(一) --- urllib 和 正则re
from urllib import request,parse from time import sleep import re # 1.[数据的获取] # 封装一个函数,用于将url转化成一个请求 ...
- 关于微信小程序getUserInfo最新修改后，如何在原有项目的授权逻辑的调整
今天一大早调试小程序,结果出现这个...微信小程序也是醉了,这么大的改动,也没有通过开发者服务号通知一声 人在屋檐下不得不低头(改呗,那么如何以最小的代价更新呢,下面给我的解决方案) 原来我们在首次进 ...