iOS專案開發實戰——使用CALayer實現圖片的淡入淡出效果

     在移動應用開發中，如果兩張圖片之間直接進行切換，會顯得突兀，使用者體驗不佳。如果中間能有淡入淡出效果，就會很不錯。我們就用CALayer來實現一下：

（1）拖入2張圖片，然後程式碼實現如下：

#import "ViewController.h"

@interface ViewController ()

@property(nonatomic,strong) CALayer *imageLayer;


@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  UIImage *image1 = [UIImage imageNamed:@"img1"];
  
  //建立出圖片layer；
  self.imageLayer = [CALayer  layer];
  self.imageLayer.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
  [self.view.layer addSublayer:self.imageLayer];

  self.imageLayer.contents = (__bridge id)(image1.CGImage);

  [self performSelector:@selector(layerAnimation) withObject:nil afterDelay:3.0f];

  
}

- (void) layerAnimation{

  UIImage *image2 = [UIImage imageNamed:@"img2"];
  
  //圖片動畫；
  CABasicAnimation *contentsAnimation = [CABasicAnimation animationWithKeyPath:@"contents"];
  contentsAnimation.fromValue = self.imageLayer.contents;
  contentsAnimation.toValue = (__bridge id)(image2.CGImage);
  contentsAnimation.duration = 2;
  
  //設定layer動畫結束之後的值，（必須設定，否則會恢復到動畫之前的狀態）
  self.imageLayer.contents = (__bridge id)(image2.CGImage);

  //提交動畫；
  [self.imageLayer addAnimation:contentsAnimation forKey:nil];
  
  
}



@end

（2）實現效果如下：

。

。

。

（3）這樣的圖片切換很舒服，淡入淡出時間可以自己設定。

github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！