利用velocity.js将svg动起来
生活随笔
收集整理的這篇文章主要介紹了
利用velocity.js将svg动起来
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
關于velocity.js
Velocity.js是一款jquery動畫引擎插件，它擁有與jquery中的$.animate()相同的API，還打包了顏色動畫，轉換，循環，easing效果，類動畫、滾動等功能，因此大家可以像使用$.animate()方法一樣使用velocity，您可以快速的上手velocity.js。簡單點說：Velocity就是實現頁面元素中的飛入，飛出，旋轉、顏色變換，esaing效果的jquery插件庫。
當然我們可以自定義我們的動畫，比較好用的是我們可以設定動畫序列，方便我們管理我們的動畫
用法我們可以參考官網：
http://velocityjs.org/#hook
簡單用法：
$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.647c-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.058c-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.002c3.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.255c9.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.647c-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.058c-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.002c3.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.255c9.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.975C106.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.622C16.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.012c0,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.306c-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.464c-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.2c-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.118c0,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.329c-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.124C203.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,0s-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.558c2.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>
?
轉載于:https://www.cnblogs.com/tanxu/p/5827160.html
總結
以上是生活随笔為你收集整理的利用velocity.js将svg动起来的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 非C++内建类A和B，在哪些情况下B能隐
- 下一篇： 微信三方授权域名问题