前言
UIImageView應該是iOS中使用最頻繁的控件，就如日常吃飯一樣，天天都在重復，有時或許應該反思一下，怎么使用這個控件，達到低能耗，最佳用戶體驗。
針對單張圖片來說，常見的處理是在圖片準備顯示時增加一個淡出動畫，能使圖片顯示閑的很平滑。
多張圖片也一樣，在第一張圖片的基礎上淡出原來的圖片，淡入新的圖片。也可以說是溶解效果。
很多人喜歡對圖片的alpha做淡出動畫，使alpha從0到1動畫改變。這種動畫有一點不好的是，在動畫結束后，圖片會明顯的出現一閃，這樣使動畫看起來有點突兀。比較好的做法時，在將要顯示時給圖片做一個轉場動畫。
淡出動畫實現
下面是其中一種簡單的實現
@implementation UIImageView (RFWebImage)
- (void)animatedChangeToImage:(UIImage *)img
{
[UIView transitionWithView:self
duration:0.3f
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
self.image = img;
} completion:NULL];
}
@end
思路：在ImageView將要顯示是使用轉場動畫函數來實現淡出動畫效果，體驗應該是是各種動畫中最好的了，而且使用起來很簡單。
在淡出顯示的動畫基礎上，我們引出今天的主角，動畫切換Image。
思路：單張圖片淡出我們已經實現，現在做的就是在切換一張新的圖片時同時再加入淡出或者說溶解效果即可。
動畫切換Image
比較常見的有下面3種實現：
-
CATransition類實現 -
UIView動畫轉場API實現 -
CABasicAnimation類實現
CATransition實現
CATransition類是iOS中很好用的控制轉場動畫的類，通過簡單的配置可以實現常見而炫酷的動畫效果，變換類型通過type字段控制，subtype可以很細化控制動畫的方向（比如動畫開始的上下左右方向）。CATransition繼承至CAAnimation可以對動畫設置動畫曲線（timingFunction），可以通過代理獲取動畫狀態（是已經開始，還是已經停止，已經是否完成）。
type支持四種類型：
- kCATransitionFade // 淡入淡出
- kCATransitionMoveIn // 從某個方向向終點平移知道覆蓋在上方
- 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動畫轉場
+ (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);
通過上面的函數實現，其實是對第一種的高級封裝。通過設置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實現
CABasicAnimation是核心動畫一個重要的類，繼承至CAPropertyAnimation，可以對所有的可動畫屬性做動畫，可以通過fromValue，toValue，byValue字段控制動畫的進度。
在這里我們是對CALayer的contents屬性做動畫，在改變圖片時，創建一個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];
}
更多內容請下載Demo地址
查看（??Bonus： Flip效果??）
喜歡該文章的請打??，以便鼓勵我繼續創作，非常謝謝。
