码迷，mamicode.com
首页 > Web开发 > 详细

利用velocity.js将svg动起来

时间：2016-08-31 20:22:11      阅读：267      评论：0      收藏：0      [点我收藏+]

标签：

关于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" >

  <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动起来

标签：

原文地址：http://www.cnblogs.com/tanxu/p/5827160.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！