首先看一下官方文檔對(duì)UIView動(dòng)畫的一些說(shuō)明
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)生動(dòng)畫效果,也就是說(shuō),這種動(dòng)畫是從屬性的初始值開始,到給定的新值為止。以下幾個(gè)屬性是可動(dòng)畫屬性:frame、bounds、center、alpha、backgroundColor
我們可以使用系統(tǒng)提供的UIView的類方法實(shí)現(xiàn)動(dòng)畫效果,通過(guò)方法中的參數(shù)來(lái)設(shè)置時(shí)長(zhǎng)、延遲等值
+ (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:動(dòng)畫時(shí)長(zhǎng)
delay:延遲時(shí)間
options:動(dòng)畫的展示方式
animation:需要進(jìn)行怎樣的動(dòng)畫
completion:動(dòng)畫完成后執(zhí)行
另外在iOS7之后,又提供了兩個(gè)關(guān)鍵幀動(dòng)畫方法:
+ (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)場(chǎng)動(dòng)畫的方法
參數(shù)
這些方法,傳入不同參數(shù),會(huì)得出不同的動(dòng)畫效果:
option
Repeating
UIViewAnimationOptionRepeat:動(dòng)畫循環(huán)執(zhí)行
UIViewAnimationOptionAutoreverse:動(dòng)畫執(zhí)行完之后會(huì)反向再執(zhí)行一次
如果選擇了動(dòng)畫循環(huán)執(zhí)行這一option,則程序不會(huì)執(zhí)行后續(xù)的completion block代碼塊-
Easing
這一組option給出了動(dòng)畫加速或減速的規(guī)則:
UIViewAnimationOptionCurveEaseInOut先加速后減速,默認(rèn)情況
UIViewAnimationOptionCurveEaseIn由慢到快
UIViewAnimationOptionCurveEaseOut由快到慢
UIViewAnimationOptionCurveLinear勻速
如圖所示,修改view的frame,動(dòng)畫執(zhí)行時(shí)間都是3秒,選擇了不同的option,效果不同:
Ease.gif
同樣,修改alpha時(shí)(如圖是alpha值從1到0.2),效果也類似:
Ease_alpha.gif Transitioning
UIViewAnimationOptionTransitionNone沒(méi)有效果,默認(rèn)
UIViewAnimationOptionTransitionFlipFromLeft從左翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionFlipFromRight從右翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionCurlUp從上往下翻頁(yè)
UIViewAnimationOptionTransitionCurlDown從下往上翻頁(yè)
UIViewAnimationOptionTransitionCrossDissolve舊視圖溶解過(guò)渡到下一個(gè)視圖
UIViewAnimationOptionTransitionFlipFromTop從上翻轉(zhuǎn)效果
UIViewAnimationOptionTransitionFlipFromBottom從上翻轉(zhuǎn)效果
這些參數(shù)只能在視圖切換的時(shí)候使用,比如為一個(gè)UIImageView切換圖片,移動(dòng)view時(shí)不能使用。所以應(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];
}
以上代碼可以實(shí)現(xiàn)如圖效果,圖片從有小哥哥的一面翻到?jīng)]有的一面,動(dòng)畫時(shí)長(zhǎng)3秒:

可以看出,切換圖片的時(shí)候,原來(lái)的圖片會(huì)以view中心為軸翻轉(zhuǎn),而且系統(tǒng)還自動(dòng)加上了陰影效果
- 彈簧效果
這是個(gè)比較有意思的api,可以制作出類似彈簧效果的動(dòng)畫:
+ (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,因?yàn)槭撬p比例,所以該值越低震動(dòng)越強(qiáng)
-
velocity:初始化速度。值越高速度越快
如圖所示是在velocity不變的情況下,不同dampingRatio的效果:
spring.gif


