UI进阶 动画

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     // 新建一个现实图片的ImageView
 4     UIImageView * showGIFImageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, 314, 300)];
 5     [self.view addSubview:showGIFImageView];
 6     NSMutableArray *imageArray = [NSMutableArray array];
 7     for (int i = 1; i <= 10; i++) {
 8         [imageArray addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%d.tiff", i]]];
 9     }
10     
11     // 设置GIF图片组
12     showGIFImageView.animationImages = imageArray;
13     // 设置播放速度
14     showGIFImageView.animationDuration = 0.9f;
15     // 设置播放次数，0和负数 -- 无限循环
16     showGIFImageView.animationRepeatCount = 0;
17     // 开始动画
18     [showGIFImageView startAnimating];
19 }

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     self.view.backgroundColor = [UIColor blackColor];
 4     // 加载旋转的菊花效果[UIActivityIndicatorView实现]
 5     // 无需设置frame
 6     UIActivityIndicatorView *indicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
 7     // 显示在视图中间
 8     indicatorView.center = self.view.center;
 9     // 开启动画
10     [indicatorView startAnimating];
11     [self.view addSubview:indicatorView];
12 }

 1 #pragma mark - 改变frame
 2 - (IBAction)changeFrame:(id)sender {
 3     // 第一步：开始UIView动画
 4     [UIView beginAnimations:@"move" context:@"改变frame"];
 5     // 第二步：设置动画时长
 6     [UIView setAnimationDuration:3.0];
 7     // 第三步：设置UIView动画的代理，不需要遵循协议
 8     [UIView setAnimationDelegate:self];
 9     // 第四步：设置相关对象的frame
10     self.testView.frame = CGRectMake(100, 100, 200, 100);
11     // 第五步：结束动画(提交动画效果)
12     [UIView commitAnimations];
13 }
14 
15 #pragma mark - 协议方法
16 #pragma mark - 开始动画
17 // 下面的方法替换了+ (void)setAnimationWillStartSelector:(nullable SEL)selector;方法
18 - (void)animationWillStart:(NSString *)animationID context:(void *)context {
19     NSLog(@"开始ID = %@, context = %@", animationID, context);
20 }
21 
22 #pragma mark - 结束动画
23 // 下面的方法替换了 + (void)setAnimationDidStopSelector:(nullable SEL)selector;方法
24 - (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
25     NSLog(@"结束ID = %@, context = %@", animationID, context);
26 }

1 #pragma mark - 改变背景颜色
2 - (IBAction)changeBackgroundColor:(id)sender {
3     [UIView beginAnimations:@"color" context:@"改变颜色"];
4     [UIView setAnimationDuration:2.0];
5     [UIView setAnimationDelegate:self];
6     self.testView.backgroundColor = [UIColor yellowColor];
7     [UIView commitAnimations];
8 }

1 #pragma mark - 改变透明度
2 - (IBAction)changeAlpha:(id)sender {
3     [UIView beginAnimations:@"alpha" context:@"改变透明度"];
4     [UIView setAnimationDuration:2.0];
5     [UIView setAnimationDelegate:self];
6     self.testView.alpha = 0.2;
7     [UIView commitAnimations];
8 }

 1 #pragma mark - 仿射翻转
 2 - (IBAction)rotationAction:(id)sender {
 3     // 开始动画
 4     [UIView beginAnimations:@"rotation" context:@"仿射翻转"];
 5     // 设置动画时长
 6     [UIView setAnimationDuration:0.9];
 7     // 设置动画块中的动画属性变化的曲线
 8     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
 9     // 设置翻转方向  -- 向上翻页效果
10     [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.testView cache:YES];
11     // 设置动画代理
12     [UIView setAnimationDelegate:self];
13     // 结束动画
14     [UIView commitAnimations];
15 }

 1 #pragma mark - 仿射旋转
 2 - (IBAction)transformAction:(id)sender {
 3     [UIView beginAnimations:@"transform" context:@"仿射旋转"];
 4     [UIView setAnimationDuration:0.7];
 5     // 设置旋转角度
 6     CGAffineTransform tranform = CGAffineTransformMakeRotation(3 * M_PI);
 7     // 设置旋转动画的对象
 8     [self.testView setTransform:tranform];
 9     
10     [UIView setAnimationDelegate:self];
11     [UIView commitAnimations];
12 }

 1 #pragma mark - 简单动画
 2 - (IBAction)simpleBlockAnimation:(id)sender {
 3     // 第一个参数 -- 设置动画时长
 4     // 第二个参数block -- 具体的动画效果
 5     // 第三个参数block -- 动画完成后要做的事情
 6     __weak typeof(self) weakSelf = self;
 7     [UIView animateWithDuration:2.0f animations:^{
 8         // 改变视图中心点
 9         weakSelf.testView.center = weakSelf.view.center;
10     } completion:^(BOOL finished) {
11         NSLog(@"动画已完成");
12     }];
13 }

 1 #pragma mark - 复杂动画
 2 - (IBAction)complexBlockAnimation:(id)sender {
 3     /**
 4      参数1：动画时长
 5      参数2：动画延迟时间
 6      参数3：枚举值 -- 动画效果
 7      参数4：block -- 要实现的动画效果
 8      参数5：block -- 动画完成后要做的事
 9      */
10     __weak typeof(self) weakSelf = self;
11     [UIView animateWithDuration:2.0f delay:1.0f options:UIViewAnimationOptionBeginFromCurrentState animations:^{
12         // 改变尺寸
13         weakSelf.testView.frame = CGRectMake(100, 100, 100, 100);
14     } completion:^(BOOL finished) {
15         NSLog(@"尺寸缩小");
16     }];
17 
18 }

 1 #pragma mark - 关键帧动画
 2 - (IBAction)keyFramesAnimation:(id)sender {
 3     /**
 4      参数1：动画时长
 5      参数2：动画延迟时间
 6      参数3：枚举值 -- 动画效果
 7      参数4：开始动画
 8      */
 9     __weak typeof(self) weakSelf = self;
10     [UIView animateKeyframesWithDuration:2.0f delay:1.0f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
11         /**
12          参数1：帧动画的开始时间
13          参数2：帧动画的持续时间
14          */
15         [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:3.0f animations:^{
16             // 在这里实现想要的动画效果
17             weakSelf.testView.center = weakSelf.view.center;
18         }];
19     } completion:^(BOOL finished) {
20         NSLog(@"帧动画完成");
21     }];
22 }

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     self.title = @"Spring动画";
 4     /**
 5      参数1：动画时长
 6      参数2：延迟时间
 7      参数3：弹簧效果值 0-1 数值越小「弹簧」的振动效果越明显
 8      参数4：表示初始的速度，数值越大一开始移动越快
 9      参数5：枚举值 -- 可选动画效果
10      参数6：动画最终效果
11      参数7：动画完成时要做的事
12      */
13     
14     __weak typeof(self)weakSelf = self;
15     [UIView animateWithDuration:3.0f delay:1.0f usingSpringWithDamping:1.0f initialSpringVelocity:10 options:UIViewAnimationOptionTransitionCurlUp animations:^{
16         weakSelf.testView.center = weakSelf.view.center;
17     } completion:^(BOOL finished) {
18         NSLog(@"中心点位置改变了");
19     }];
20 }

 1 #pragma mark - Layer的常用属性
 2     // 设置图片为圆角
 3     self.testView.layer.cornerRadius = 20;
 4 //    // 子图层是否相对于父图层裁剪,但如果加上这句话，设置的阴影效果就不显示
 5 //    self.testView.layer.masksToBounds = YES;
 6     // 设置阴影的偏移量
 7     self.testView.layer.shadowOffset = CGSizeMake(10, 10);
 8     // 设置layer的阴影颜色
 9     self.testView.layer.shadowColor = [UIColor grayColor].CGColor;
10     // 设置阴影的透明度
11     self.testView.layer.shadowOpacity = 1;
12     // 设置阴影的模糊度
13     self.testView.layer.shadowRadius = 20;
14     
15     // 设置UIView的阴影
16     self.myView.layer.shadowOffset = CGSizeMake(-10, 10);
17     self.myView.layer.shadowColor = [UIColor greenColor].CGColor;
18     self.myView.layer.shadowOpacity = 1;
19     self.myView.layer.shadowRadius = 20;
20     

1     // 动画执行完毕后不从图层上移除,图形不会恢复到动画执行前的状态
2     basicAnimation.removedOnCompletion = NO;
3     // 设置保存动画状态
4     basicAnimation.fillMode = kCAFillModeForwards;

1 - (void)removeAnimationForKey:(NSString *)key;

 1 - (IBAction)animationGroup:(id)sender {
 2     // 平移动画
 3     CABasicAnimation *basic1 = [CABasicAnimation animation];
 4     // y轴平移
 5     basic1.keyPath = @"transform.translation.y";
 6     basic1.toValue = @(400);
 7     // 翻转动画
 8     CABasicAnimation *basic2 = [CABasicAnimation animation];
 9     basic2.keyPath = @"transform.rotation.x";
10     basic2.toValue = @(M_PI);
11     
12     // 旋转动画
13     CABasicAnimation *basic3 = [CABasicAnimation animation];
14     basic3.keyPath = @"cornerRadius";
15     basic3.toValue = @(30);
16 
17     
18     // 创建动画组，管理各个动画
19     CAAnimationGroup *group = [CAAnimationGroup animation];
20     // 数组中存放的是layer层的动画
21     group.animations = @[basic1, basic2, basic3];
22     // 设置动画时长
23     group.duration = 2.0f;
24     // 添加动画到layer层
25     [self.testView.layer addAnimation:group forKey:@"group"];
26 }

 1 - (IBAction)springAnimation:(id)sender {
 2     CASpringAnimation *springAnimation = [CASpringAnimation animation];
 3     
 4     springAnimation.keyPath = @"transform.scale";
 5     springAnimation.fromValue = @1;
 6     springAnimation.toValue = @0.25;
 7     springAnimation.duration = 3.0f;
 8     
 9     [self.testView.layer addAnimation:springAnimation forKey:@"spring"];
10 }