UIView动画

古城微笑少年丶 2022-03-22 11:20 240阅读 0赞

** UIView 动画可以设置的动画属性:**

1.   位置变化(frame)
2.   大小变化(bounds)
3.   中心点位置(center)
4.   旋转、缩放等(transform)
5.   透明度(alpha)
6.   背景颜色(backgroundColor)
7.   拉伸内容(contentStretch)

UIView的Block动画块，为iOS4.0以后增加，提供更简洁的方式来实现动画。

**常用 Block 块函数：**

// 1、最简单的Block动画：包含时间和动画
        [UIView animateWithDuration:3 animations:^{
            // 执行动画
        }];
        
        // 2、带有动画完成回调的Block动画
        [UIView animateWithDuration:3 animations:^{
            // 执行的动画
        } completion:^(BOOL finished) {
            // 动画执行完毕后的操作
        }];
        
        // 3、可设置延迟时间和过渡效果的Block动画
        [UIView animateWithDuration:3 delay:3 options:UIViewAnimationOptionRepeat animations:^{
            // 执行的动画
        } completion:^(BOOL finished) {
            // 动画执行完毕后的操作
        }];
        
        // 4、Spring动画 iOS7.0后新增Spring动画（iOS系统动画大部分采用Spring Animation，适用于所有可被添加动画效果的属性）
        [UIView animateWithDuration:3 // 动画持续时间
                              delay:3 // 动画延迟执行的时间
             usingSpringWithDamping:0.5 // 震动效果(阻尼值)，范围0~1，数值越小震动效果越明显
              initialSpringVelocity:0.5 // 初始速度，数值越大初始速度越快
                            options:UIViewAnimationOptionAutoreverse // 动画的过渡效果
                         animations:^{
                             //执行的动画
                         }
                         completion:^(BOOL finished) {
                             // 动画执行完毕后的操作
                         }];
        
        // 5、关键帧动画，Keyframes动画 iOS7.0后新增关键帧动画，支持属性关键帧，不支持路径关键帧
        [UIView animateKeyframesWithDuration:3 // 动画持续时间
                                       delay:3 // 动画延迟执行的时间
                                     options:UIViewKeyframeAnimationOptionLayoutSubviews // 动画的过渡效果
                                  animations:^{
                                      // 执行的关键帧动画
                                  }
                                  completion:^(BOOL finished) {
                                      // 动画执行完毕后的操作
                                  }];
        
        // 增加关键帧动画的方法
        [UIView addKeyframeWithRelativeStartTime:2 // 动画开始的时间（占总时间的比例）
                                relativeDuration:2 // 动画持续时间（占总时间的比例）
                                      animations:^{
                                          //执行的动画
                                      }];
        
        // 6、转场动画
        // 6.1 从旧视图转到新视图的动画效果
        [UIView transitionFromView:self.aIcon
                            toView:self.bIcon
                          duration:3
                           options:UIViewAnimationOptionAutoreverse
                        completion:^(BOOL finished) {
                            // 动画执行完毕后的操作
                        }];
        // 在该动画过程中，fromView 会从父视图中移除，并将 toView 添加到父视图中，注意转场动画的作用对象是父视图（过渡效果体现在父视图上）。
        
        // 6.2 单个视图的过渡效果
        [UIView transitionWithView:self.view
                          duration:3
                           options:UIViewAnimationOptionLayoutSubviews
                        animations:^{
                            // 执行的动画
                        } completion:^(BOOL finished) {
                            // 动画执行完毕后的操作
                        }];

**简单示例代码：**

// 从旧视图转到新视图的动画效果
    - (void)testTransition2 {
        UIImageView * newCenterShow = [[UIImageView alloc]initWithFrame:self.aIcon.frame];
        newCenterShow.image = [UIImage imageNamed:@"Service"];
        [UIView transitionFromView:self.aIcon toView:newCenterShow duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
            NSLog(@"动画结束");
        }];
    }
    
    // 单个视图的过渡效果
    - (void)testTransition {
        [UIView transitionWithView:self.aIcon duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
            self.aIcon.image = [UIImage imageNamed:@"2"];
        } completion:^(BOOL finished) {
            NSLog(@"动画结束");
        }];
    }
    
    - (void)testKeyFrame {
        [UIView animateKeyframesWithDuration:4
                                       delay:0
                                     options:UIViewKeyframeAnimationOptionCalculationModeLinear
                                  animations:^{
                                      
                                      [UIView addKeyframeWithRelativeStartTime:0
                                                              relativeDuration:1/4.f
                                                                    animations:^{
                                                                        self.aIcon.backgroundColor = [UIColor redColor];
                                                                    }];
                                      
                                      [UIView addKeyframeWithRelativeStartTime:1/4.f
                                                              relativeDuration:1/4.f
                                                                    animations:^{
                                                                        self.aIcon.backgroundColor = [UIColor purpleColor];
                                                                    }];
                                      
                                      [UIView addKeyframeWithRelativeStartTime:2.0/4.f
                                                              relativeDuration:1/4.f
                                                                    animations:^{
                                                                        self.aIcon.backgroundColor = [UIColor orangeColor];
                                                                    }];
                                      
                                      [UIView addKeyframeWithRelativeStartTime:3.0/4.f
                                                              relativeDuration:1/4.f
                                                                    animations:^{
                                                                        self.aIcon.backgroundColor = [UIColor greenColor];
                                                                    }];
                                  } completion:^(BOOL finished) {
                                      // 完成动画
                                  }];
    }
    
    - (void)testSpring {
        [UIView animateWithDuration:1
                              delay:0
             usingSpringWithDamping:0.5
              initialSpringVelocity:5
                            options:UIViewAnimationOptionCurveEaseIn
                         animations:^{
                             self.bIcon.frame = self.aIcon.frame;
                         } completion:^(BOOL finished) {
                             
                         }];
    }
    
    - (void)testB {
        [UIView animateWithDuration:2
                              delay:0
                            options:UIViewAnimationOptionCurveEaseInOut
                         animations:^{
                             self.bIcon.frame = self.aIcon.frame;
                         } completion:^(BOOL finished) {
                             
                         }];
    }
    
    // 普通动画
    - (void)testA {
        [UIView animateWithDuration:2 animations:^{
            _bIcon.center = _aIcon.center;
            _bIcon.bounds = _aIcon.bounds;
        } completion:^(BOOL finished) {
            
        }];
    }