上次學(xué)習(xí)了iOS學(xué)習(xí)筆記09-核心動(dòng)畫(huà)CoreAnimation,這次繼續(xù)學(xué)習(xí)動(dòng)畫(huà),上次使用的CoreAnimation很多人感覺(jué)使用起來(lái)很繁瑣,有沒(méi)有更加方便的動(dòng)畫(huà)效果實(shí)現(xiàn)呢?答案是有的,那就是UIView動(dòng)畫(huà)封裝
一、UIView動(dòng)畫(huà)
蘋(píng)果知道圖層動(dòng)畫(huà)使用麻煩,就為我們封裝到了UIView里,使我們可以簡(jiǎn)單的實(shí)現(xiàn)各種動(dòng)畫(huà)效果。
1. 基礎(chǔ)動(dòng)畫(huà)
主要實(shí)現(xiàn)方法為:
+ (void)animateWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
options:(UIViewAnimationOptions)options
animations:(void (^)(void))ainimations
completion:(void (^)(BOOL finished))completion;
移動(dòng)動(dòng)畫(huà)使用實(shí)例:
/*
開(kāi)始動(dòng)畫(huà),UIView的動(dòng)畫(huà)方法執(zhí)行完后動(dòng)畫(huà)會(huì)停留在終點(diǎn)位置,而不需要進(jìn)行任何特殊處理
duration:執(zhí)行時(shí)間
delay:延遲時(shí)間
options:動(dòng)畫(huà)設(shè)置,例如自動(dòng)恢復(fù)、勻速運(yùn)動(dòng)等
completion:動(dòng)畫(huà)完成回調(diào)方法
*/
[UIView animateWithDuration:5.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
_imageView.center = location;
} completion:^(BOOL finished) {
NSLog(@"Animation end.");
}];
上面的方法基本滿足大部分基礎(chǔ)動(dòng)畫(huà)的要求,還有一種比較有趣的動(dòng)畫(huà)效果
彈簧動(dòng)畫(huà)效果:
/*
創(chuàng)建彈性動(dòng)畫(huà)
damping:阻尼,范圍0-1,阻尼越接近于0,彈性效果越明顯
springVelocity:彈性復(fù)位的速度
*/
[UIView animateWithDuration:5.0 delay:0 usingSpringWithDamping:0.1
initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveLinear animations:^{
_imageView.center = location;
} completion:^(BOOL finished) {
NSLog(@"Animation end.");
}];

彈簧效果
UIView動(dòng)畫(huà)方法中有個(gè)options參數(shù),是枚舉類型,可以組合使用:
/* 常規(guī)動(dòng)畫(huà)屬性設(shè)置,可以同時(shí)選擇多個(gè),用或運(yùn)算組合 */
UIViewAnimationOptionLayoutSubviews/*< 動(dòng)畫(huà)過(guò)程中保證子視圖跟隨運(yùn)動(dòng) */
UIViewAnimationOptionAllowUserInteraction/*< 動(dòng)畫(huà)過(guò)程中允許用戶交互 */
UIViewAnimationOptionBeginFromCurrentState/*< 所有視圖從當(dāng)前狀態(tài)開(kāi)始運(yùn)行 */
UIViewAnimationOptionRepeat/*< 重復(fù)運(yùn)行動(dòng)畫(huà) */
UIViewAnimationOptionAutoreverse/*< 動(dòng)畫(huà)運(yùn)行結(jié)束后回到起始點(diǎn) */
UIViewAnimationOptionOverrideInheritedDuration/*< 忽略嵌套動(dòng)畫(huà)時(shí)間設(shè)置 */
UIViewAnimationOptionOverrideInheritedCurve/*< 忽略嵌套動(dòng)畫(huà)速度設(shè)置 */
UIViewAnimationOptionAllowAnimatedContent/*< 動(dòng)畫(huà)過(guò)程中重繪視圖,只適合轉(zhuǎn)場(chǎng)動(dòng)畫(huà) */
UIViewAnimationOptionShowHideTransitionViews/*< 視圖切換直接隱藏舊視圖、顯示新視圖,只適合轉(zhuǎn)場(chǎng)動(dòng)畫(huà) */
UIViewAnimationOptionOverrideInheritedOptions/*< 不繼承父動(dòng)畫(huà)設(shè)置或動(dòng)畫(huà)類型 */
/* 動(dòng)畫(huà)速度變化控制,其中選一個(gè)進(jìn)行設(shè)置 */
UIViewAnimationOptionCurveEaseInOut/*< 動(dòng)畫(huà)先緩慢,后逐漸加速,默認(rèn)值 */
UIViewAnimationOptionCurveEaseIn/*< 動(dòng)畫(huà)逐漸變慢 */
UIViewAnimationOptionCurveEaseOut/*< 動(dòng)畫(huà)逐漸加速 */
UIViewAnimationOptionCurveLinear/*< 動(dòng)畫(huà)勻速執(zhí)行 */
2. 關(guān)鍵幀動(dòng)畫(huà)
主要實(shí)現(xiàn)方法為:
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
options:(UIViewAnimationOptions)options
animations:(void (^)(void))ainimations
completion:(void (^)(BOOL finished))completion;
實(shí)例:
[UIView animateKeyframesWithDuration:5.0 delay:0
options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionCurveLinear animations:^{
//第一個(gè)關(guān)鍵幀:從0秒開(kāi)始持續(xù)50%的時(shí)間,也就是5.0*0.5=2.5秒
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
_imageView.center = location1;
}];
//第二個(gè)關(guān)鍵幀:從50%時(shí)間開(kāi)始持續(xù)25%的時(shí)間,也就是5.0*0.25=1.25秒
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{
_imageView.center = location2;
}];
//第三個(gè)關(guān)鍵幀:從75%時(shí)間開(kāi)始持續(xù)25%的時(shí)間,也就是5.0*0.25=1.25秒
[UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{
_imageView.center = location3;
}];
} completion:^(BOOL finished) {
NSLog(@"Animation end.");
}];
關(guān)鍵幀動(dòng)畫(huà)的options多了一些選擇:
/* 動(dòng)畫(huà)模式選擇,選擇一個(gè) */
UIViewKeyframeAnimationOptionCalculationModeLinear/*< 連續(xù)運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModeDiscreter/*< 離散運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModePacedr/*< 均勻執(zhí)行運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModeCubicr/*< 平滑運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModeCubicPacedr/*< 平滑均勻運(yùn)算模式 */

動(dòng)畫(huà)模式示意圖
UIView動(dòng)畫(huà)現(xiàn)在只支持屬性關(guān)鍵幀動(dòng)畫(huà),不支持路徑關(guān)鍵幀動(dòng)畫(huà)
3. 轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
主要實(shí)現(xiàn)方法為:
+ (void)transitionWithView:(UIView *)view
duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
animations:(void (^)(void))ainimations
completion:(void (^)(BOOL finished))completion;
實(shí)例:
#pragma mark 轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
- (void)transitionAnimation:(BOOL)isNext{
UIViewAnimationOptions option;
if (isNext) {
option = UIViewAnimationOptionCurveLinear | UIViewAnimationOptionTransitionFlipFromRight;
} else {
option = UIViewAnimationOptionCurveLinear | UIViewAnimationOptionTransitionFlipFromLeft;
}
[UIView transitionWithView:_imageView duration:1.0 options:option animations:^{
_imageView.image = [self getImage:isNext];
} completion:nil];
}
轉(zhuǎn)場(chǎng)動(dòng)畫(huà)options多了一些選擇:
/* 轉(zhuǎn)場(chǎng)類型 */
UIViewAnimationOptionTransitionNone/*< 沒(méi)有轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果 */
UIViewAnimationOptionTransitionFlipFromLeft/*< 從左側(cè)翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionFlipFromRight/*< 從右側(cè)翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionCurlUp/*< 向后翻頁(yè)的動(dòng)畫(huà)過(guò)渡效果 */
UIViewAnimationOptionTransitionCurlDown/*< 向前翻頁(yè)的動(dòng)畫(huà)過(guò)渡效果 */
UIViewAnimationOptionTransitionCrossDissolve/*< 溶解消失效果 */
UIViewAnimationOptionTransitionFlipFromTop/*< 從上方翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionFlipFromBottom/*< 從底部翻轉(zhuǎn)效果 */
- 使用UIView動(dòng)畫(huà)封裝的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果少,這里無(wú)法直接使用私有API
- 兩個(gè)視圖之間轉(zhuǎn)場(chǎng)可以使用
+ (void)transitionFromView:(UIView *)fromView
toView:(UIView *)toView
duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
completion:(void (^)(BOOL finished))completion;
- 默認(rèn)情況,轉(zhuǎn)出的視圖會(huì)從父視圖移除,轉(zhuǎn)入后重新添加

轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果圖,是不是很炫啊,不過(guò)這個(gè)是CoreAnimation的