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>
