前言
UIImageView應(yīng)該是iOS中使用最頻繁的控件，就如日常吃飯一樣，天天都在重復(fù)，有時(shí)或許應(yīng)該反思一下，怎么使用這個(gè)控件，達(dá)到低能耗，最佳用戶體驗(yàn)。
針對單張圖片來說，常見的處理是在圖片準(zhǔn)備顯示時(shí)增加一個(gè)淡出動(dòng)畫，能使圖片顯示閑的很平滑。
多張圖片也一樣，在第一張圖片的基礎(chǔ)上淡出原來的圖片，淡入新的圖片。也可以說是溶解效果。
很多人喜歡對圖片的alpha做淡出動(dòng)畫，使alpha從0到1動(dòng)畫改變。這種動(dòng)畫有一點(diǎn)不好的是，在動(dòng)畫結(jié)束后，圖片會(huì)明顯的出現(xiàn)一閃，這樣使動(dòng)畫看起來有點(diǎn)突兀。比較好的做法時(shí)，在將要顯示時(shí)給圖片做一個(gè)轉(zhuǎn)場動(dòng)畫。
淡出動(dòng)畫實(shí)現(xiàn)
下面是其中一種簡單的實(shí)現(xiàn)
@implementation UIImageView (RFWebImage)
- (void)animatedChangeToImage:(UIImage *)img
{
[UIView transitionWithView:self
duration:0.3f
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
self.image = img;
} completion:NULL];
}
@end
思路：在ImageView將要顯示是使用轉(zhuǎn)場動(dòng)畫函數(shù)來實(shí)現(xiàn)淡出動(dòng)畫效果，體驗(yàn)應(yīng)該是是各種動(dòng)畫中最好的了，而且使用起來很簡單。
在淡出顯示的動(dòng)畫基礎(chǔ)上，我們引出今天的主角，動(dòng)畫切換Image。
思路：單張圖片淡出我們已經(jīng)實(shí)現(xiàn)，現(xiàn)在做的就是在切換一張新的圖片時(shí)同時(shí)再加入淡出或者說溶解效果即可。
動(dòng)畫切換Image
比較常見的有下面3種實(shí)現(xiàn)：
-
CATransition類實(shí)現(xiàn) -
UIView動(dòng)畫轉(zhuǎn)場API實(shí)現(xiàn) -
CABasicAnimation類實(shí)現(xiàn)
CATransition實(shí)現(xiàn)
CATransition類是iOS中很好用的控制轉(zhuǎn)場動(dòng)畫的類，通過簡單的配置可以實(shí)現(xiàn)常見而炫酷的動(dòng)畫效果，變換類型通過type字段控制，subtype可以很細(xì)化控制動(dòng)畫的方向（比如動(dòng)畫開始的上下左右方向）。CATransition繼承至CAAnimation可以對動(dòng)畫設(shè)置動(dòng)畫曲線（timingFunction），可以通過代理獲取動(dòng)畫狀態(tài)（是已經(jīng)開始，還是已經(jīng)停止，已經(jīng)是否完成）。
type支持四種類型：
- kCATransitionFade // 淡入淡出
- kCATransitionMoveIn // 從某個(gè)方向向終點(diǎn)平移知道覆蓋在上方
- kCATransitionPush // 把原來的推出去，自己推出去
- kCATransitionReveal // 把原來的從正上方解開，自己在下面
下面是樣板代碼：
- (void)animatedSwichImageMethodOne {
UIImage *toImage = [self getRadomImage];
CATransition *transition = [CATransition animation];
transition.duration = 0.3f;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;
transition.subtype = kCATransitionFromTop;
[self.imageViewOne.layer addAnimation:transition forKey:nil];
[self.imageViewOne setImage:toImage];
}
UIView動(dòng)畫轉(zhuǎn)場
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
通過上面的函數(shù)實(shí)現(xiàn)，其實(shí)是對第一種的高級封裝。通過設(shè)置options為UIViewAnimationOptionTransitionCrossDissolve即可。
下面是樣板代碼：
- (void)animatedSwichImageMethodTwo {
UIImage *toImage = [self getRadomImage];
[UIView transitionWithView:self.imageViewTwo
duration:0.3f
options:UIViewAnimationOptionTransitionCrossDissolve | UIViewAnimationOptionCurveEaseInOut
animations:^{
self.imageViewTwo.image = toImage;
} completion:nil];
}
CABasicAnimation實(shí)現(xiàn)
CABasicAnimation是核心動(dòng)畫一個(gè)重要的類，繼承至CAPropertyAnimation，可以對所有的可動(dòng)畫屬性做動(dòng)畫，可以通過fromValue，toValue，byValue字段控制動(dòng)畫的進(jìn)度。
在這里我們是對CALayer的contents屬性做動(dòng)畫，在改變圖片時(shí)，創(chuàng)建一個(gè)CABasicAnimation對象添加到ImageView的圖層上即可。
下面是樣板代碼：
- (void)animatedSwichImageMethodThree {
UIImage *toImage = [self getRadomImage];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"contents"];
animation.toValue = toImage;
animation.duration = 0.3f;
[self.imageViewThree.layer addAnimation:animation forKey:@"contentsAnimationKey"];
[self.imageViewThree setImage:toImage];
}
更多內(nèi)容請下載Demo地址
查看（??Bonus： Flip效果??）
喜歡該文章的請打??，以便鼓勵(lì)我繼續(xù)創(chuàng)作，非常謝謝。
