Velocity.js动画库学习

初始化比较简单，网页中先导入jquery库，然后导入velocity.js库

  //最好是配合jquery来使用，可以使用jquery的链式操作。
  //jquery的函数操作在完成以后会有一句 return this,由此链式操作的
 //的后一个方法的对象和前一个方法的对象是相同的
   <script src="lib/js/jquery.js"></script>
   <script src="lib/js/velocity.min.js">/script> 
   $(document).ready(function(){
    $div=$("div");   //jQuery对象缓存起来
    $div.velocity({opacity:0.5});  //调用方法
});

Velocity接受多个参数，第一个参数是一个对象，用于将css属性映射到对应的目标值，第二个参数是指定动画的选项

 $element.velocity({width:"500px",opacity:0.5},{duration:400,easing:"swing"})

//也可以使用简写
$element.velocity({width:"500px",opacity:0.5},400，"ease-in-out");

对于css属性，velocity不支持简写，只能一个一个的写，而且css属性也和react一样是驼峰命名。

链式操作；如果为了效率放弃使用jquery,那么就不能使用链式操作了
每个操作单独写就可以了。

$elemnt.velocity({width:"400px"}).velocity({opacity:0.6});

使用这个库实现旋转动画

<image id="pic" src="img/pic.jpg"/>
   <script type="text/javascript">
         $(document).ready(function(){
             $pic=$("#pic");
            $pic.velocity(  //loop表示无限循环
                    {rotateZ: "360deg"},{duration:5000,loop: true },"linear")；   
         });   
   </script>

$ npm install --save velocity-react
require('velocity-animate');
require('velocity-animate/velocity.ui');
 <VelocityComponent animation={{ opacity: this.state.showSubComponent ? 1 : 0 }} duration={500}>
    <MySubComponent/>
  </VelocityComponent>