iOS 动画（一）UIView

Demo 下载

阻尼动画.gif


1、UIView可以进行动画的属性有

@property frame
@property bounds
@property center
@property transform 注:和CAlayer的transform不是同一个东西
@property alpha
@property backgroundColor

2、UIView的静态方法

（1）UIView(UIViewAnimationWithBlocks)

UIView的基本动画

/**
 *  
 *
 *  @param duration 动画持续时间
 *  @param delay    动画延时执行时间
 *  @param options  常规动画属性设置（可以同时选择多个进行设置）
 *  @param animations  需要进行的动画属性设置
 *  @param completion  动画完成回调
 */
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion 
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations 
+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

UIView的阻尼动画

/**
 * 
 *  @param duration 动画持续时间
 *  @param delay    动画延时执行时间
 *  @param dampingRatio  弹性系数0-1
 *  @param velocity      动画初始速度
 *  @param options       常规动画属性设置（可以同时选择多个进行设置）
 *  @param animations    需要进行的动画属性设置
 *  @param completion    动画完成回调
 */
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion

UIView的转场动画

/**
 * 1、 UIView单个视图的转场动画
 *
 *  @param view 需要转场动画的视图
 *  @param duration 动画持续时间
 *  @param options       常规动画属性设置（可以同时选择多个进行设置）
 *  @param animations    需要进行的动画属性设置
 *  @param completion    动画完成回调
 */
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion 

/**
 * 2、 UIView两个视图的切换转场动画
 *   // 添加toView到父视图
 *           (1) [fromView.superview addSubview:toView]; 
 *   // 把fromView从父视图中移除
 *           (2)[fromView.superview removeFromSuperview];
 *  @param  fromView -->  toView   从fromeView切换到toView
 *  @param duration 动画持续时间
 *  @param options       常规动画属性设置（可以同时选择多个进行设置）
 *  @param completion    动画完成回调
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion

Demo

//这个方法跟CoreAnimation中的CASpringAnimation效果差不多
- (void)UIViewSpringAnimationDemo
{
    //usingSpringWithDamping：设置阻力系数，它的范围为 0.0f 到 1.0f ，数值越小「弹簧」的振动效果越明显。
    //initialSpringVelocity：初始的速度，数值越大一开始移动越快。值得注意的是，初始速度取值较高而时间较短时，也会出现反弹情况
    [UIView animateWithDuration:0.4 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0 options:UIViewAnimationOptionCurveLinear animations:^{
        
        self.myView.transform = CGAffineTransformMakeScale(1.2, 1.2);
        
    } completion:nil];
}

(2)UIView(UIViewKeyframeAnimations)

UIView的关键帧动画

/**
 *  UIView帧动画
 *
 *  @param duration 动画持续时间
 *  @param delay 动画持续时间
 *  @param options       常规动画属性设置（可以同时选择多个进行设置）
 *  @param animations    动画属性设置
 *  @param completion    动画完成回调
 */
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion 
/**
 *  UIView添加帧动画
 *
 *  @param frameStartTime 开始时间
 *  @param frameDuration 持续时间
 *  @param animations    动画属性设置
 */
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations;

这个分类只有两个方法，要结合使用，第一个方法主要指定动画的持续时间，第二个方法指定每个小动画在该动画持续时间内的开始时间和结束时间

- (void)UIViewKeyFramesAnimationDemo
{
    //UIView关键帧动画 总的持续时间：1.0
    [UIView animateKeyframesWithDuration:1.0 delay:0.0 options:UIViewKeyframeAnimationOptionCalculationModeCubic animations:^{
        
        //开始时间：1.0*0.0 持续时间：1.0*0.4
        [UIView addKeyframeWithRelativeStartTime:0.0f relativeDuration:0.4f animations:^{
            
        }];
        //开始时间：1.0*0.1 持续时间：1.0*0.5
        [UIView addKeyframeWithRelativeStartTime:0.1f relativeDuration:0.5f animations:^{
        }];
        //开始时间：1.0*0.0 持续时间：1.0*1.0
        [UIView addKeyframeWithRelativeStartTime:0.0f relativeDuration:1.0f animations:^{
        }];
        
    } completion:^(BOOL finished) {
        //过渡动画结束
        
    }];
}

（3） 相关参数设置

1.常规动画属性设置（可以同时选择多个进行设置）
UIViewAnimationOptionLayoutSubviews：动画过程中保证子视图跟随运动。
UIViewAnimationOptionAllowUserInteraction：动画过程中允许用户交互。
UIViewAnimationOptionBeginFromCurrentState：所有视图从当前状态开始运行。
UIViewAnimationOptionRepeat：重复运行动画。
UIViewAnimationOptionAutoreverse ：动画运行到结束点后仍然以动画方式回到初始点。
UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套动画时间设置。
UIViewAnimationOptionOverrideInheritedCurve：忽略嵌套动画速度设置。
UIViewAnimationOptionAllowAnimatedContent：动画过程中重绘视图（注意仅仅适用于转场动画）。  
UIViewAnimationOptionShowHideTransitionViews：视图切换时直接隐藏旧视图、显示新视图，而不是将旧视图从父视图移除（仅仅适用于转场动画）
UIViewAnimationOptionOverrideInheritedOptions ：不继承父动画设置或动画类型。


2.动画速度控制（可从其中选择一个设置）
UIViewAnimationOptionCurveEaseInOut：动画先缓慢，然后逐渐加速。
UIViewAnimationOptionCurveEaseIn ：动画逐渐变慢。
UIViewAnimationOptionCurveEaseOut：动画逐渐加速。
UIViewAnimationOptionCurveLinear ：动画匀速执行，默认值。


3.转场类型（仅适用于转场动画设置，可以从中选择一个进行设置，基本动画、关键帧动画不需要设置）
UIViewAnimationOptionTransitionNone：没有转场动画效果。
UIViewAnimationOptionTransitionFlipFromLeft ：从左侧翻转效果。
UIViewAnimationOptionTransitionFlipFromRight：从右侧翻转效果。
UIViewAnimationOptionTransitionCurlUp：向后翻页的动画过渡效果。    
UIViewAnimationOptionTransitionCurlDown ：向前翻页的动画过渡效果。    
UIViewAnimationOptionTransitionCrossDissolve：旧视图溶解消失显示下一个新视图的效果。    
UIViewAnimationOptionTransitionFlipFromTop ：从上方翻转效果。    
UIViewAnimationOptionTransitionFlipFromBottom：从底部翻转效果。