1661.987.big.jpg.png
看velocity.js的內(nèi)容有段時間了结序，源于圖片這本書违寞。前面看直觀的感受是：這個庫的操作很簡單翎卓。要解決一個rn的動畫問題契邀，把這本書又拿出來看，剛好看到也有了velocity-react版失暴，考慮是否以后可以用在react-native上坯门，這樣的話應(yīng)用范圍就大很多。
Velocity.js文檔
velocity-react github地址逗扒；
velocity-react的內(nèi)容古戴；
1443477710321.png
初始化比較簡單，網(wǎng)頁中先導(dǎo)入jquery庫矩肩，然后導(dǎo)入velocity.js庫
//最好是配合jquery來使用现恼，可以使用jquery的鏈?zhǔn)讲僮鳌? //jquery的函數(shù)操作在完成以后會有一句 return this,由此鏈?zhǔn)讲僮鞯? //的后一個方法的對象和前一個方法的對象是相同的
<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}); //調(diào)用方法
});
Velocity接受多個參數(shù)，第一個參數(shù)是一個對象黍檩，用于將css屬性映射到對應(yīng)的目標(biāo)值叉袍，第二個參數(shù)是指定動畫的選項
$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一樣是駝峰命名棵里。
鏈?zhǔn)讲僮魅笪模蝗绻麨榱诵史艞壥褂胘query,那么就不能使用鏈?zhǔn)讲僮髁?br> 每個操作單獨寫就可以了姐呐。
$elemnt.velocity({width:"400px"}).velocity({opacity:0.6});
使用這個庫實現(xiàn)旋轉(zhuǎn)動畫
ScreenFlow.gif
<image id="pic" src="img/pic.jpg"/>
<script type="text/javascript">
$(document).ready(function(){
$pic=$("#pic");
$pic.velocity( //loop表示無限循環(huán)
{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>
