利用velocity.js将svg动起来
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用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" > <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动起来的主要内容，如果未能解决你的问题，请参考以下文章