利用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" >

  <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>

　　

　　

　　

　　

　　

　　

时间： 2024-11-14 22:43:34

利用velocity.js将svg动起来的相关文章

聊聊JS动画库:Velocity.js

前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是静下心来学习新技术和写一写技术文章,希望能继续坚持下去吧. JS动画 随着互联网越来越丰富多样,网页端的美化和新技术层出不穷,作为一个网站的浏览者,更多吸引他们的除了保证网站的流畅之外还有各种炫酷的交互动效. 网页的交互动效大概分为 css动画,js动画 . JS动画的优点 既然我们大概了解了这两类

Velocity.js动画库使用

1.简介 Velocity 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. 2.兼容性 可兼容到 IE8 和 Android 2.3. 若需要兼容 IE8,就必须引入 jQuery 1.x 3.示例代码(注意文件引用路径) (1)index.html <!DOCTYPE html> <html lang="zh"> <head>

利用tween.js算法生成缓动效果

在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等.无论运用在哪里,它们的原理都是一样的.同样,在用js实现运动效果时,我们也可以利用贝塞尔曲线来实现不同的特效,而tween.js就是一个封装好的计算辅助算法.你可以通过连续输入多个值,然后利用贝塞尔曲线公式输出不同的值,最终形成了一条光滑的曲线.因为一条曲线上的值的不一样的,所以我们可以利用曲线的

javascript动画：velocity.js学习

第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个元素后,就可以用这个元素去调用.velocity()为它添加动画效果.例如: //将一个变量分配给某个jQuery元素对象. var $div = $(“div”); //使用velocity设置该元素的动画 $div.velocity({ opacity : 0 }); //该句语法与jQuery

vue里面使用Velocity.js

英文文档:http://velocityjs.org/ 中文手册(教程):http://www.mrfront.com/docs/velocity.js/ velocity.js 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. Velocity 不仅包含了 $.animate() 的全部功能, 还拥有:颜色动画.转换动画(transforms).循环. 缓动.SVG 动画.和

利用pixi.js制作精灵动画

CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊. 关于实现精灵动画的方式有很多种,我自己实践过的主要有三种: 1: 把动作分解成一系列连续的编号的图片,如img0.jpg,img1.jpg,img2.jpg...,然后利用setIntval等定时器不断的去更换图片地址. 2: 把动作按照一定的间距排列在一张图片上,利用css3的动画帧,做出动画

利用d3.js绘制中国地图

d3.js是一个比较强的数据可视化js工具.利用它画了一幅中国地图,如下图所示: 源码如下: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="d3.js"></script> <script type="text/javascript" src="d3.csv.js">&l

Velocity.js

极棒的jquery动画切换引擎插件Velocity.js.  duration:时长   delay:动画延时时间 1:手动维护  2:complete:一层层嵌套 3:推荐 -----------------------------  没有想要的效果:  案例: index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹出式相框</t

JQuery动画插件Velocity.js发布：更快的动画切换速度

5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换 在动画方面的最佳组合.Velocity.js支持IE8+.Chrome