利用velocity.js将svg动起来
关于velocity.js
Velocity.js是一款jquery动画引擎插件，它拥有与jquery中的$.animate()相同的API，还打包了颜色动画，转换，循环，easing效果，类动画、滚动等功能，因此大家可以像使用$.animate()方法一样使用velocity，您可以快速的上手velocity.js。简单点说：Velocity就是实现页面元素中的飞入，飞出，旋转、颜色变换，esaing效果的jquery插件库。
当然我们可以自定义我们的动画，比较好用的是我们可以设定动画序列，方便我们管理我们的动画
用法我们可以参考官网：
简单用法：
$element.velocity({
width: "500px",
property2: value2
}, {
/* Velocity's default options */
duration: 400,
easing: "swing",
queue: "",
begin: undefined,
progress: undefined,
complete: undefined,
display: undefined,
visibility: undefined,
loop: false,
delay: false,
mobileHA: true
});
定义自己的动画：
$.Velocity.RegisterUI('slidePath',{
defaultDuration:500,
calls:[
[{strokeDashoffset:0}]
]
});
使用动画库：
properties:'slidePath'
定义动画序列：
var seq = [
//第一阶段
{
elements:$('.drawing'),
properties:{
width:[$("#path_1").offset().left+1,0] /*两个参数，结束 开始*/
},
options:{duration:500}
},
{
elements:$("#path_1"),
properties:'slidePath',
options:{
duration:500
}
},
//第二阶段
{
elements:$('#line01'),
properties:{
x2:[69.277,24.244]
},
options:{
duration:500
}
}
]
使用动画序列
$.Velocity.RunSequence(seq);
比如我们来个炫酷点的例子：
http://tanxu.top/svgtest/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
padding: 0px;
margin: 0px;
}
html{
height: 100%;
width: 100%;
overflow: hidden;
}
body{width:400%; background: #000; height: 200%}
.view{
width: 25%;
height: 50%;
float: left;
background: #fff;
}
.view .container {
width: 960px;
height: 65%;
margin: auto;
vertical-align: middle;
position: relative;
}
.view .drawing{
height: 3px;
background:#000;
z-index: 8;
width: 0px;
}
.view .container #eiffel,.view .container #knife{
position: absolute;
bottom: -3px;
left: 40px;
max-width: 264px;
z-index: 10;
} /* 初始化path */
#skeyer{
position: absolute;
margin-left: 100px;
margin-top: 50px;
}
.clouy01{
position: absolute;
top: -100px;
}
.clouy02{
top:-100px;
position: absolute;
}
</style>
<script src="jquery.js"></script>
<script src="velocity.min.js"></script>
<script src="velocity.ui.min.js"></script>
<script>
window.onload = function(){ var line01 = $("#line01");
var skeyer = $("#skeyer"); var path = $('#eiffel path');
for(var i=0; i<path.length;i++){
path[i].style.strokeDasharray = path[i].getTotalLength();
path[i].style.strokeDashoffset = path[i].getTotalLength();
path[i].id= 'path_'+i;
} $.Velocity.RegisterUI('slidePath',{
defaultDuration:500,
calls:[
[{strokeDashoffset:0}]
]
}); var seq = [
//第一阶段
{
elements:$('.drawing'),
properties:{
width:[$("#path_1").offset().left+1,0] /*两个参数，结束 开始*/
},
options:{duration:500}
},
{
elements:$("#path_1"),
properties:'slidePath',
options:{
duration:500
}
},
//第二阶段
{
elements:$('#line01'),
properties:{
x2:[69.277,24.244]
},
options:{
duration:500
}
},
{
elements:$("#path_2"),
properties:'slidePath'
},
{
elements:$("#path_3"),
properties:'slidePath'
},
{
elements:$("#path_4"),
properties:'slidePath'
},
{
elements:$("#path_5"),
properties:'slidePath'
},
{
elements:$("#path_6"),
properties:'slidePath'
},
{
elements:$("#path_7"),
properties:'slidePath'
},
{
elements:$("#path_8"),
properties:'slidePath'
},
{
elements:$("#path_9"),
properties:'slidePath'
},
{
elements: $("polygon"),
properties:{
points:'164.656,174.921 176.452,174.921 170.554,109.109'
}
},
{
elements:$(".clouy01"),
properties:{
top:[190,-100]
},
options:{
delay: 100,
duration:1200
}
},
{
elements:$(".clouy02"),
properties:{
top:[190,-100]
},
options:{
delay: 100,
duration:1200
}
},
{
elements:$('.drawing'),
properties:{
width:[$(window).width(),$("#path_1").offset().left+$("#eiffel").width()] /*两个参数，结束 开始*/
},
options:{duration:2000}
},
{
elements:$("#skeyer"),
properties:{
marginLeft:[$(window).width(),0]
},
options:{
sequenceQueue:false,
duration:2000,
complete: function(elements) {
elements.velocity({
rotateY:'180deg'
})
}
}
},
{
elements:$("#skeyer"),
properties:{
marginLeft:[0,$(window).width()],
},
options:{
duration:2000
}
}
]; $.Velocity.RunSequence(seq); } </script>
</head>
<body>
<img src="http://www.guillaumejuvenet.com/img/zeppelin.svg" id="skeyer" alt=""> <section id="home" class="view">
<div class="container">
<div class="clouy01">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="90px" height="62px" viewBox="0 0 90 62" enable-background="new 0 0 90 62" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M72.615,20.647
c-1.3-10.33-11.237-18.365-23.308-18.365c-8.25,0-15.5,3.756-19.681,9.43c-0.625-0.035-1.254-0.058-1.89-0.058
c-14.191,0-25.694,8.741-25.694,19.524s11.504,19.524,25.694,19.524c0.027,0,0.054-0.002,0.081-0.002
c3.22,5.479,10.06,9.26,17.977,9.26c7.092,0,13.315-3.037,16.851-7.608c2.493,1.432,5.379,2.255,8.46,2.255
c9.397,0,17.015-7.618,17.015-17.015C88.118,28.704,81.303,21.412,72.615,20.647z"/>
</svg>
</div>
<div class="clouy02" style="left:300px;">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="90px" height="62px" viewBox="0 0 90 62" enable-background="new 0 0 90 62" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M72.615,20.647
c-1.3-10.33-11.237-18.365-23.308-18.365c-8.25,0-15.5,3.756-19.681,9.43c-0.625-0.035-1.254-0.058-1.89-0.058
c-14.191,0-25.694,8.741-25.694,19.524s11.504,19.524,25.694,19.524c0.027,0,0.054-0.002,0.081-0.002
c3.22,5.479,10.06,9.26,17.977,9.26c7.092,0,13.315-3.037,16.851-7.608c2.493,1.432,5.379,2.255,8.46,2.255
c9.397,0,17.015-7.618,17.015-17.015C88.118,28.704,81.303,21.412,72.615,20.647z"/>
</svg>
</div> <div id="eiffel" style="width: 270px; height: 346px;">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="270px" height="346px" viewBox="0 0 270 346" enable-background="new 0 0 270 346" xml:space="preserve">
<path fill="#FFFFFF" d="M265.5,347.25c-47.75-55-52.5-83.5-52.5-83.5s-69-35.5-89.829,2.975
C106.75,297.057,80.888,331.738,69.277,346C63,346,44,346,27.858,346l-5.608-2.448c-6.773-0.993-6.104,0.622-6.104,0.622
C16.128,349.75,11,350.5,64.25,360.5C100.346,367.279,309.113,397.485,265.5,347.25z M231.94,344.5H103.675h-0.012
c0,0,18.813-52.683,62.769-53.448s65.508,53.131,65.508,53.131V344.5z"/>
<path fill="#FFFFFF" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M-1.02,344.5H15.8l0.346-0.326c0,0,2.063-8.499,1.126-21.828c-1.126-0.386-2.251,1.545-3.939,0s-2.15-6.761-5.014-8.306
c-2.865-1.545-3.803-9.465-3.052-12.556c0.75-3.091-5.815-5.022-1.126-12.363c-1.313-2.511-4.041-6.497-0.188-12.464
c-3.189-8.978,2.938-11.296,3.626-11.296c0,0-0.882-12.942,4.405-12.749c-1.841-1.159,0-9.658,0-9.658s-3.717-4.628,2.661-11.2
c-1.501-7.344,4.315-17.173,9.192-5.788c1.876-1.364,9.755-0.591,4.127,12.931c3.564,0.579,6.003,5.896,2.626,15.118
c0,0,6.003-1.596,3.377,12.892c6.19,2.511,2.439,12.363,2.439,12.363s3.564,3.67-1.126,11.783c-1.313,9.852,5.628,4.636,0.75,13.329
c-2.814,4.346-4.502,2.898-5.628,15.067c-1.372,5.359-6.941,3.091-6.941,3.091s-1.501,15.454,0.75,21.635"/>
<line fill="none" id="line01" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="24.244" y1="344.5" x2="24.244" y2="344.5"/>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M123.162,266.725c0,0-40.813,65.868-52.865,76.827"/>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M123.171,266.725c0,0-8.317-1.225-3.002-8.245c2.706-1.742,4.624-1.742,4.624-1.742h84.461c0,0,10.58,0.095,5.672,10.124
C203.502,267.588,123.171,266.725,123.171,266.725z"/>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M214.925,266.862c0,0,8.702,31.638,46.805,77.638h9.29"/>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M231.94,344.183c0,0-21.552-53.896-65.508-53.131S103.663,344.5,103.663,344.5h0.012H231.94V344.183z"/>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M210.817,256.738c0,0-18.437-30.419-19.572-64.06c4.83-0.766,8.082-8.941-0.046-10.725c0,0-40.931-0.021-44.192,0
s-12.194,8.176-1.56,10.342l45.799,0.382"/>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M146.019,192.3c0,0-3.852,38.867-20.849,64.346"/>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M176.499,209.498h-12.903c0,0-7.657,25.358-8.791,35.807c-0.028,0.643,27.082,0,27.082,0S176.783,218.801,176.499,209.498z"/>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M190.253,181.953c0,0-18.334-118.316-14.65-135.476c8.033-8.325,0.47-20.049-3.689-20.049s-13.422,12.409-5.104,20.558
c2.08,47.743-18.433,137.58-19.804,134.967"/>
<polygon fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
164.656,174.921 164.656,174.921 164.656,174.921 "/>
<!-- <polyline fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
170.554,26.777 171.915,2.641 173.261,26.777 "/> -->
<path fill="#FFFFFF" d="M56.25,323.5"/>
</svg>
</div>
</div>
<div class="drawing"></div>
</section> </body>
</html>
利用velocity.js将svg动起来的更多相关文章
- 聊聊JS动画库:Velocity.js
前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...
- 【js】插件—动效Velocity.js
Velocity.js——加速JavaScript动画 一款替代jQuery的$ .animate()动效的插件.兼容IE8和Android2.3及以上. 相比较优点: 1.它比JQuery更快,并实 ...
- Velocity.js动画库使用
1.简介 Velocity 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. 2 ...
- 利用tween.js算法生成缓动效果
在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...
- Velocity.js的使用
前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...
- 界面优化--如何提升用户体验(Velocity.js和GSAP)
Velocity.js和GSAP 我们需要提升代码质量来留住用户.作为用户界面的建设者,我们的工作是迅速引导和引导用户的注意力,指导他们如何有效地使用我们的应用程序. 1. 如何提升代码质量 定向聚焦 ...
- javascript动画：velocity.js学习
第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个 ...
- velocity.js 动画插件
1. velocity.js 插件介绍 Velocity 是独立于jQuery的,但两者可以结合使用的动画插件.用法类似 jq 的 animate ,但是支持更高级动画. ( 颜色动画.转换动画(tr ...
- vue里面使用Velocity.js
英文文档:http://velocityjs.org/ https://github.com/julianshapiro/velocity 中文手册(教程):http://www.mrfront.co ...
随机推荐
- CentOS6.x 安装升级Python2.7.x Python3.4.x
CentOS6.x 安装升级Python2.7.x Python3.4.x 2015-06-07• CentOS.Linux • 评论关闭 CentOS release 6.6 (Final) 安装升 ...
- Selenium2+python自动化43-判断title（title_is）【转载】
前言 获取页面title的方法可以直接用driver.title获取到,然后也可以把获取到的结果用做断言. 本篇介绍另外一种方法去判断页面title是否与期望结果一种,用到上一篇Selenium2+p ...
- 举例说明如何使用【聚合数据】的API接口
0 注册[聚合数据]的账号 登陆www.juhe.cn,如图,如果没有账号,注册一个(手机号或者邮箱注册),如果有直接登陆即可. 1 搜索所需的API接口 找到聚合数据主页,在搜索框输入你想搜索的AP ...
- Codeforces 608 A. Saitama Destroys Hotel
A. Saitama Destroys Hotel time limit per test 1 second memory limit per test 256 megabytes input ...
- Python爬链接
# -*- coding: utf-8 -*- """ Created on Wed Jan 11 17:21:54 2017 @author: PE-Monitor & ...
- POJ 3553 Task schedule【拓扑排序 + 优先队列 / 贪心】
Task schedule Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 515 Accepted: 309 Special J ...
- CF 862A Mahmoud and Ehab and the MEX【数组操作】
A. Mahmoud and Ehab and the MEX time limit per test 2 seconds memory limit per test 256 megabytes in ...
- HDU 2164（模拟）
Rock, Paper, or Scissors? Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Jav ...
- HttpServletRequest接口
package com.hongdian; import java.util.Enumeration; import java.io.IOException; import javax.servlet ...
- Xamarin XAML语言教程基本视图ContentViewg构架范围框架
Xamarin XAML语言教程基本视图ContentViewg构架范围框架 ContentView视图基本上有三个作用,下面依次介绍. (1)范围框架:ContentView视图可以构建一个范围框架 ...