iOS專案開發實戰——使用CALayer實現圖片的淡入淡出效果
阿新 • • 發佈:2019-01-23
在移動應用開發中,如果兩張圖片之間直接進行切換,會顯得突兀,使用者體驗不佳。如果中間能有淡入淡出效果,就會很不錯。我們就用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)這樣的圖片切換很舒服,淡入淡出時間可以自己設定。