前言
UIImageView應(yīng)該是iOS中使用最頻繁的控件舔糖，就如日常吃飯一樣尔破，天天都在重復(fù)敬锐，有時(shí)或許應(yīng)該反思一下，怎么使用這個(gè)控件呆瞻，達(dá)到低能耗，最佳用戶體驗(yàn)径玖。
針對(duì)單張圖片來(lái)說(shuō)痴脾，常見(jiàn)的處理是在圖片準(zhǔn)備顯示時(shí)增加一個(gè)淡出動(dòng)畫(huà)，能使圖片顯示閑的很平滑梳星。
多張圖片也一樣赞赖，在第一張圖片的基礎(chǔ)上淡出原來(lái)的圖片，淡入新的圖片冤灾。也可以說(shuō)是溶解效果前域。
很多人喜歡對(duì)圖片的alpha做淡出動(dòng)畫(huà)，使alpha從0到1動(dòng)畫(huà)改變韵吨。這種動(dòng)畫(huà)有一點(diǎn)不好的是匿垄，在動(dòng)畫(huà)結(jié)束后，圖片會(huì)明顯的出現(xiàn)一閃归粉，這樣使動(dòng)畫(huà)看起來(lái)有點(diǎn)突兀椿疗。比較好的做法時(shí)，在將要顯示時(shí)給圖片做一個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)糠悼。
淡出動(dòng)畫(huà)實(shí)現(xiàn)
下面是其中一種簡(jiǎ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)場(chǎng)動(dòng)畫(huà)函數(shù)來(lái)實(shí)現(xiàn)淡出動(dòng)畫(huà)效果届榄，體驗(yàn)應(yīng)該是是各種動(dòng)畫(huà)中最好的了，而且使用起來(lái)很簡(jiǎn)單倔喂。
在淡出顯示的動(dòng)畫(huà)基礎(chǔ)上铝条，我們引出今天的主角，動(dòng)畫(huà)切換Image席噩。
思路：?jiǎn)螐垐D片淡出我們已經(jīng)實(shí)現(xiàn)班缰，現(xiàn)在做的就是在切換一張新的圖片時(shí)同時(shí)再加入淡出或者說(shuō)溶解效果即可。
動(dòng)畫(huà)切換Image
比較常見(jiàn)的有下面3種實(shí)現(xiàn)：
-
CATransition類(lèi)實(shí)現(xiàn) -
UIView動(dòng)畫(huà)轉(zhuǎn)場(chǎng)API實(shí)現(xiàn) -
CABasicAnimation類(lèi)實(shí)現(xiàn)
CATransition實(shí)現(xiàn)
CATransition類(lèi)是iOS中很好用的控制轉(zhuǎn)場(chǎng)動(dòng)畫(huà)的類(lèi)悼枢，通過(guò)簡(jiǎn)單的配置可以實(shí)現(xiàn)常見(jiàn)而炫酷的動(dòng)畫(huà)效果鲁捏，變換類(lèi)型通過(guò)type字段控制，subtype可以很細(xì)化控制動(dòng)畫(huà)的方向（比如動(dòng)畫(huà)開(kāi)始的上下左右方向）。CATransition繼承至CAAnimation可以對(duì)動(dòng)畫(huà)設(shè)置動(dòng)畫(huà)曲線（timingFunction）给梅，可以通過(guò)代理獲取動(dòng)畫(huà)狀態(tài)（是已經(jīng)開(kāi)始假丧，還是已經(jīng)停止，已經(jīng)是否完成）动羽。
type支持四種類(lèi)型：
- kCATransitionFade // 淡入淡出
- kCATransitionMoveIn // 從某個(gè)方向向終點(diǎn)平移知道覆蓋在上方
- kCATransitionPush // 把原來(lái)的推出去包帚，自己推出去
- kCATransitionReveal // 把原來(lái)的從正上方解開(kāi)，自己在下面
下面是樣板代碼：
- (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)畫(huà)轉(zhuǎn)場(chǎng)
+ (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);
通過(guò)上面的函數(shù)實(shí)現(xiàn)运吓，其實(shí)是對(duì)第一種的高級(jí)封裝渴邦。通過(guò)設(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)畫(huà)一個(gè)重要的類(lèi)拘哨，繼承至CAPropertyAnimation谋梭，可以對(duì)所有的可動(dòng)畫(huà)屬性做動(dòng)畫(huà)，可以通過(guò)fromValue倦青，toValue瓮床，byValue字段控制動(dòng)畫(huà)的進(jìn)度。
在這里我們是對(duì)CALayer的contents屬性做動(dòng)畫(huà)产镐，在改變圖片時(shí)隘庄，創(chuàng)建一個(gè)CABasicAnimation對(duì)象添加到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)容請(qǐng)下載Demo地址
查看（??Bonus： Flip效果??）
喜歡該文章的請(qǐng)打??癣亚，以便鼓勵(lì)我繼續(xù)創(chuàng)作丑掺，非常謝謝。
