Velocity.js动画库学习

1661.987.big.jpg.png

看velocity.js的内容有段时间了，源于图片这本书。前面看直观的感受是：这个库的操作很简单。要解决一个rn的动画问题，把这本书又拿出来看，刚好看到也有了velocity-react版，考虑是否以后可以用在react-native上，这样的话应用范围就大很多。
Velocity.js文档
velocity-react github地址；
velocity-react的内容；

1443477710321.png

初始化比较简单，网页中先导入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});

使用这个库实现旋转动画

ScreenFlow.gif

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

这是官方的一个示例

ScreenFlow3.gif
下面是react组件的用法

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