首先看一下官方文檔對UIView動畫的一些說明
Changes to several view properties can be animated—that is, changing the property creates an animation starting at the current value and ending at the new value that you specify. The following properties of the UIView class are animatable:
- frame
- bounds
- center
- alpha
- backgroundColor
改變view的一些屬性可以產(chǎn)生動畫效果,也就是說,這種動畫是從屬性的初始值開始,到給定的新值為止。以下幾個屬性是可動畫屬性:frame、bounds、center、alpha、backgroundColor
我們可以使用系統(tǒng)提供的UIView的類方法實現(xiàn)動畫效果,通過方法中的參數(shù)來設(shè)置時長、延遲等值
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL
duration:動畫時長
delay:延遲時間
options:動畫的展示方式
animation:需要進行怎樣的動畫
completion:動畫完成后執(zhí)行
另外在iOS7之后,又提供了兩個關(guān)鍵幀動畫方法:
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0);
以及一些轉(zhuǎn)場動畫的方法
參數(shù)
這些方法,傳入不同參數(shù),會得出不同的動畫效果:
option
Repeating
UIViewAnimationOptionRepeat:動畫循環(huán)執(zhí)行
UIViewAnimationOptionAutoreverse:動畫執(zhí)行完之后會反向再執(zhí)行一次
如果選擇了動畫循環(huán)執(zhí)行這一option,則程序不會執(zhí)行后續(xù)的completion block代碼塊-
Easing
這一組option給出了動畫加速或減速的規(guī)則:
UIViewAnimationOptionCurveEaseInOut先加速后減速,默認情況
UIViewAnimationOptionCurveEaseIn由慢到快
UIViewAnimationOptionCurveEaseOut由快到慢
UIViewAnimationOptionCurveLinear勻速
如圖所示,修改view的frame,動畫執(zhí)行時間都是3秒,選擇了不同的option,效果不同:
Ease.gif
同樣,修改alpha時(如圖是alpha值從1到0.2),效果也類似:
Ease_alpha.gif Transitioning
UIViewAnimationOptionTransitionNone沒有效果,默認
UIViewAnimationOptionTransitionFlipFromLeft從左翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionFlipFromRight從右翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionCurlUp從上往下翻頁
UIViewAnimationOptionTransitionCurlDown從下往上翻頁
UIViewAnimationOptionTransitionCrossDissolve舊視圖溶解過渡到下一個視圖
UIViewAnimationOptionTransitionFlipFromTop從上翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionFlipFromBottom從上翻轉(zhuǎn)效果
這些參數(shù)只能在視圖切換的時候使用,比如為一個UIImageView切換圖片,移動view時不能使用。所以應(yīng)該使用transition開頭的方法
NSArray *optionArray = @[@(UIViewAnimationOptionTransitionNone),
@(UIViewAnimationOptionTransitionFlipFromLeft),
@(UIViewAnimationOptionTransitionFlipFromRight),
@(UIViewAnimationOptionTransitionCurlUp),
@(UIViewAnimationOptionTransitionCurlDown),
@(UIViewAnimationOptionTransitionCrossDissolve),
@(UIViewAnimationOptionTransitionFlipFromTop),
@(UIViewAnimationOptionTransitionFlipFromBottom)];
for (int i = 0;i < TransitionCount;i ++) {
UIImageView *subBall = self.imgArray[i];
[UIView transitionWithView:subBall duration:3 options:[optionArray[i] integerValue] animations:^{
subBall.image = [UIImage imageNamed:@"leilei1"];
} completion:nil];
}
以上代碼可以實現(xiàn)如圖效果,圖片從有小哥哥的一面翻到?jīng)]有的一面,動畫時長3秒:

可以看出,切換圖片的時候,原來的圖片會以view中心為軸翻轉(zhuǎn),而且系統(tǒng)還自動加上了陰影效果
- 彈簧效果
這是個比較有意思的api,可以制作出類似彈簧效果的動畫:
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion;
主要注意一下參數(shù):
- dampingRatio:衰減比例,取值范圍為0 -1,因為是衰減比例,所以該值越低震動越強
-
velocity:初始化速度。值越高速度越快
如圖所示是在velocity不變的情況下,不同dampingRatio的效果:
spring.gif


