上次學(xué)習(xí)了iOS學(xué)習(xí)筆記09-核心動畫CoreAnimation,這次繼續(xù)學(xué)習(xí)動畫矛紫,上次使用的CoreAnimation
很多人感覺使用起來很繁瑣赎瞎,有沒有更加方便的動畫效果實現(xiàn)呢?答案是有的颊咬,那就是UIView動畫封裝
一务甥、UIView動畫
蘋果知道圖層動畫使用麻煩,就為我們封裝到了UIView
里喳篇,使我們可以簡單的實現(xiàn)各種動畫效果敞临。
1. 基礎(chǔ)動畫
主要實現(xiàn)方法為:
+ (void)animateWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
options:(UIViewAnimationOptions)options
animations:(void (^)(void))ainimations
completion:(void (^)(BOOL finished))completion;
移動動畫使用實例:
/*
開始動畫,UIView的動畫方法執(zhí)行完后動畫會停留在終點位置麸澜,而不需要進(jìn)行任何特殊處理
duration:執(zhí)行時間
delay:延遲時間
options:動畫設(shè)置挺尿,例如自動恢復(fù)、勻速運(yùn)動等
completion:動畫完成回調(diào)方法
*/
[UIView animateWithDuration:5.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
_imageView.center = location;
} completion:^(BOOL finished) {
NSLog(@"Animation end.");
}];
上面的方法基本滿足大部分基礎(chǔ)動畫的要求,還有一種比較有趣的動畫效果
彈簧動畫效果:
/*
創(chuàng)建彈性動畫
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動畫方法中有個options參數(shù)窄俏,是枚舉類型蹂匹,可以組合使用:
/* 常規(guī)動畫屬性設(shè)置,可以同時選擇多個凹蜈,用或運(yùn)算組合 */
UIViewAnimationOptionLayoutSubviews/*< 動畫過程中保證子視圖跟隨運(yùn)動 */
UIViewAnimationOptionAllowUserInteraction/*< 動畫過程中允許用戶交互 */
UIViewAnimationOptionBeginFromCurrentState/*< 所有視圖從當(dāng)前狀態(tài)開始運(yùn)行 */
UIViewAnimationOptionRepeat/*< 重復(fù)運(yùn)行動畫 */
UIViewAnimationOptionAutoreverse/*< 動畫運(yùn)行結(jié)束后回到起始點 */
UIViewAnimationOptionOverrideInheritedDuration/*< 忽略嵌套動畫時間設(shè)置 */
UIViewAnimationOptionOverrideInheritedCurve/*< 忽略嵌套動畫速度設(shè)置 */
UIViewAnimationOptionAllowAnimatedContent/*< 動畫過程中重繪視圖限寞,只適合轉(zhuǎn)場動畫 */
UIViewAnimationOptionShowHideTransitionViews/*< 視圖切換直接隱藏舊視圖、顯示新視圖仰坦,只適合轉(zhuǎn)場動畫 */
UIViewAnimationOptionOverrideInheritedOptions/*< 不繼承父動畫設(shè)置或動畫類型 */
/* 動畫速度變化控制履植,其中選一個進(jìn)行設(shè)置 */
UIViewAnimationOptionCurveEaseInOut/*< 動畫先緩慢,后逐漸加速悄晃,默認(rèn)值 */
UIViewAnimationOptionCurveEaseIn/*< 動畫逐漸變慢 */
UIViewAnimationOptionCurveEaseOut/*< 動畫逐漸加速 */
UIViewAnimationOptionCurveLinear/*< 動畫勻速執(zhí)行 */
2. 關(guān)鍵幀動畫
主要實現(xiàn)方法為:
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration
delay:(NSTimeInterval)delay
options:(UIViewAnimationOptions)options
animations:(void (^)(void))ainimations
completion:(void (^)(BOOL finished))completion;
實例:
[UIView animateKeyframesWithDuration:5.0 delay:0
options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionCurveLinear animations:^{
//第一個關(guān)鍵幀:從0秒開始持續(xù)50%的時間玫霎,也就是5.0*0.5=2.5秒
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
_imageView.center = location1;
}];
//第二個關(guān)鍵幀:從50%時間開始持續(xù)25%的時間,也就是5.0*0.25=1.25秒
[UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{
_imageView.center = location2;
}];
//第三個關(guān)鍵幀:從75%時間開始持續(xù)25%的時間传泊,也就是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)鍵幀動畫的options多了一些選擇:
/* 動畫模式選擇鼠渺,選擇一個 */
UIViewKeyframeAnimationOptionCalculationModeLinear/*< 連續(xù)運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModeDiscreter/*< 離散運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModePacedr/*< 均勻執(zhí)行運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModeCubicr/*< 平滑運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModeCubicPacedr/*< 平滑均勻運(yùn)算模式 */
UIView動畫現(xiàn)在只支持屬性關(guān)鍵幀動畫,不支持路徑關(guān)鍵幀動畫
3. 轉(zhuǎn)場動畫
主要實現(xiàn)方法為:
+ (void)transitionWithView:(UIView *)view
duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
animations:(void (^)(void))ainimations
completion:(void (^)(BOOL finished))completion;
實例:
#pragma mark 轉(zhuǎn)場動畫
- (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)場動畫options多了一些選擇:
/* 轉(zhuǎn)場類型 */
UIViewAnimationOptionTransitionNone/*< 沒有轉(zhuǎn)場動畫效果 */
UIViewAnimationOptionTransitionFlipFromLeft/*< 從左側(cè)翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionFlipFromRight/*< 從右側(cè)翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionCurlUp/*< 向后翻頁的動畫過渡效果 */
UIViewAnimationOptionTransitionCurlDown/*< 向前翻頁的動畫過渡效果 */
UIViewAnimationOptionTransitionCrossDissolve/*< 溶解消失效果 */
UIViewAnimationOptionTransitionFlipFromTop/*< 從上方翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionFlipFromBottom/*< 從底部翻轉(zhuǎn)效果 */
- 使用UIView動畫封裝的轉(zhuǎn)場動畫效果少眷细,這里無法直接使用私有API
- 兩個視圖之間轉(zhuǎn)場可以使用
+ (void)transitionFromView:(UIView *)fromView
toView:(UIView *)toView
duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
completion:(void (^)(BOOL finished))completion;
- 默認(rèn)情況拦盹,轉(zhuǎn)出的視圖會從父視圖移除,轉(zhuǎn)入后重新添加