美文网首页iOS开发技巧
iOS动画——基础动画UIView Animation

iOS动画——基础动画UIView Animation

作者: 天空像天空一样蓝 | 来源:发表于2018-05-10 17:07 被阅读6次

    。。。。没有好的开头,那就直接开始

    iOS动画
    这篇文章我肯可以只看红框圈的,基础动画即可,核心动画将在iOS动画——核心动画Core Animation中提到

    UIView Animation

    1. UIView(UIViewAnimation)

    主要使用下面两个方法设置

    + (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context;
    + (void)commitAnimations; 
    

    具体使用看Demo

    #pragma mark -- UIViewAnimation
    - (void)startAnimation {
        [UIView beginAnimations:@"UIViewAnimation" context:(__bridge void * _Nullable)(self)];
        [UIView setAnimationDuration:2.0];
        [UIView setAnimationDelay:0.0];
        [UIView setAnimationRepeatCount:2];
        [UIView setAnimationRepeatAutoreverses:YES];
        [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
        [UIView setAnimationDelegate:self];
        self.redView.center = CGPointMake(300, 300);
        [UIView commitAnimations];
    }
    

    参数的使用

    //    duration : 动画运行时间
    + (void)setAnimationDuration:(NSTimeInterval)duration;
    //     delay : 动画开始到执行的时间间隔
    + (void)setAnimationDelay:(NSTimeInterval)delay;   
    /* UIViewAnimationCurve 表示动画的变化规律:
         UIViewAnimationCurveEaseInOut: 开始和结束时较慢
         UIViewAnimationCurveEase: 开始时较慢
         UIViewAnimationCurveEaseOut: 结束时较慢
         UIViewAnimationCurveLinear: 整个过程匀速进行
    */
    + (void)setAnimationCurve:(UIViewAnimationCurve)curve;              
    //    repeatCount:动画重复次数
    + (void)setAnimationRepeatCount:(float)repeatCount;    
    //    Autoreverse 执行动画回路,前提是设置动画无限重复
    + (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses; 
    
    1. UIView(UIViewAnimationWithBlocks)

    主要使用接口

    + (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
    
    + (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0
    
    + (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL
    + (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 NS_AVAILABLE_IOS(7_0);
    

    使用见Demo

    #pragma mark -- UIViewAnimationWithBlocks
    - (void)animationWithBlocks {
    //    duration持续时间,delay延迟时间,UIViewAnimationOptions枚举项和completion动画结束的回调
    #if 0
        [UIView animateWithDuration:2.0 animations:^{
            self.redView.center = CGPointMake(300, 300);
        }];
    #elif 0
        [UIView animateWithDuration:2.0 animations:^{
            self.redView.center = CGPointMake(300, 300);
        } completion:^(BOOL finished) {
            self.redView.center = CGPointMake(300, 500);
        }];
    #elif 0
        [UIView animateWithDuration:3.0
                              delay:2.0
                            options:UIViewAnimationOptionCurveEaseOut
                         animations:^{
            self.redView.center = CGPointMake(300, 300);
        } completion:^(BOOL finished) {
            self.redView.center = CGPointMake(300, 500);
        }];
    #elif 1
    //    springDamping:弹性阻尼,取值范围时 0 到 1,越接近 0 ,动画的弹性效果就越明显;如果设置为 1,则动画不会有弹性效果。
    //    initialSpringVelocity:视图在动画开始时的速度,>= 0。
        [UIView animateWithDuration:3.0
                              delay:1.0
             usingSpringWithDamping:0.2
              initialSpringVelocity:10
                            options:UIViewAnimationOptionCurveEaseOut
                         animations:^{
                             self.redView.center = CGPointMake(300, 300);
                         } completion:nil];
    #endif
    }
    

    参数解释

    duration :持续时间
    delay :延迟时间
    UIViewAnimationOptions :枚举项
    {
    - 动画效果相关
    UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
    UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸
    UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画 
    UIViewAnimationOptionRepeat //动画无限重复 
    UIViewAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复 
    UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间 
    UIViewAnimationOptionOverrideInheritedCurve //忽略外层动画嵌套的时间变化曲线 
    UIViewAnimationOptionAllowAnimatedContent //通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照 
    UIViewAnimationOptionShowHideTransitionViews //用显隐的方式替代添加移除图层的动画效果 
    UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套继承的选项
    - 时间函数曲线相关
    UIViewAnimationOptionCurveEaseInOut //时间曲线函数,由慢到快 
    UIViewAnimationOptionCurveEaseIn //时间曲线函数,由慢到特别快 
    UIViewAnimationOptionCurveEaseOut //时间曲线函数,由快到慢 
    UIViewAnimationOptionCurveLinear //时间曲线函数,匀速
    - 转场动画相关
    UIViewAnimationOptionTransitionNone //无转场动画 
    UIViewAnimationOptionTransitionFlipFromLeft //转场从左翻转 
    UIViewAnimationOptionTransitionFlipFromRight //转场从右翻转 
    UIViewAnimationOptionTransitionCurlUp //上卷转场 
    UIViewAnimationOptionTransitionCurlDown //下卷转场 
    UIViewAnimationOptionTransitionCrossDissolve //转场交叉消失 
    UIViewAnimationOptionTransitionFlipFromTop //转场从上翻转 
    UIViewAnimationOptionTransitionFlipFromBottom //转场从下翻转
    }
    completion :动画结束的回调
    springDamping:弹性阻尼,取值范围时 0 到 1,越接近 0 ,动画的弹性效果就越明显;如果设置为 1,则动画不会有弹性效果。
    initialSpringVelocity:视图在动画开始时的速度,>= 0。
    

    还有两个转场动画,

    view: 需要转换的视图
    + (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
    fromView: 开始的视图
    toView:转换后的视图
    + (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
    
    1. UIView (UIViewKeyframeAnimations)

    关键帧动画

    + (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
    + (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0); 
    

    Demo

    #pragma mark -- UIViewKeyframeAnimations
    - (void)viewKeyframeAnimations {
    #if 0
        [UIView animateKeyframesWithDuration:3.0
                                       delay:1.0
                                     options:UIViewKeyframeAnimationOptionLayoutSubviews
                                  animations:^{
                                      self.redView.center = CGPointMake(300, 300);
                                  } completion:nil];
    #elif 1
        [UIView animateKeyframesWithDuration:3.0
                                       delay:1.0
                                     options:UIViewKeyframeAnimationOptionLayoutSubviews
                                  animations:^{
                                      [UIView addKeyframeWithRelativeStartTime:0.8
                                                              relativeDuration:0.2
                                                                    animations:^{
                                                                        self.redView.center = CGPointMake(300, 500);
                                                                    }];
                                  } completion:nil];
    #endif
    }
    

    参数说明

    duration: 持续时间
    delay: 等待时间
    relativeStartTime:是相对起始时间,表示该关键帧开始执行的时刻在整个动画持续时间中的百分比,取值范围是[0-1]
    relativeDuration:是相对持续时间,表示该关键帧占整个动画持续时间的百分比,取值范围也是[0-1]
    UIViewKeyframeAnimationOptions:枚举
    {
    UIViewKeyframeAnimationOptionLayoutSubviews //提交动画的时候布局子控件,表示子控件将和父控件一同动画。 
    UIViewKeyframeAnimationOptionAllowUserInteraction //动画时允许用户交流,比如触摸 
    UIViewKeyframeAnimationOptionBeginFromCurrentState //从当前状态开始动画 
    UIViewKeyframeAnimationOptionRepeat //动画无限重复 
    UIViewKeyframeAnimationOptionAutoreverse //执行动画回路,前提是设置动画无限重复 
    UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间 
    UIViewKeyframeAnimationOptionOverrideInheritedOptions //忽略嵌套继承的�选项 关键帧动画独有 
    UIViewKeyframeAnimationOptionCalculationModeLinear //选择使用一个简单的线性插值计算的时候关键帧之间的值。 
    UIViewKeyframeAnimationOptionCalculationModeDiscrete //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。 
    UIViewKeyframeAnimationOptionCalculationModePaced //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。 
    UIViewKeyframeAnimationOptionCalculationModeCubic //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。 这个动画好像会更圆滑一些.. 
    UIViewKeyframeAnimationOptionCalculationModeCubicPaced //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。
    }
    

    特别的两个

    + (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation NS_AVAILABLE_IOS(7_0);
    + (void)performSystemAnimation:(UISystemAnimation)animation onViews:(NSArray<__kindof UIView *> *)views options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
    

    网上查阅资料:
    1.删除视图上的子视图 animation这个枚举只有一个删除值...
    views操作的view 这会让那个视图变模糊、收缩和褪色, 之后再给它发送 removeFromSuperview 方法。
    2.在动画block中不执行动画的代码.

        {
            UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)];
            view.backgroundColor = [UIColor orangeColor];
            UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)];
            [view addSubview:view_1];
            view_1.backgroundColor = [UIColor redColor]; [self.view addSubview:view];
            [UIView animateKeyframesWithDuration:3
                                           delay:3
                                         options:UIViewKeyframeAnimationOptionRepeat|UIViewKeyframeAnimationOptionAutoreverse
                                      animations:^{
                                          view.frame = CGRectMake(100, 100, 50, 50);
                                          [UIView performWithoutAnimation:^{
                                              view.backgroundColor = [UIColor blueColor];
                                          }];
                                      } completion:^(BOOL finished) {
                                          
                                      }];
            [UIView performSystemAnimation:UISystemAnimationDelete
                                   onViews:@[view_1]
                                   options:0
                                animations:^{
                                    view_1.alpha = 0;
                                }
                                completion:^(BOOL finished) {
                                }];
            
        }
    

    Demo 地址

    Core Animation

    后续。。。iOS动画——核心动画Core Animation

    相关文章

      网友评论

        本文标题:iOS动画——基础动画UIView Animation

        本文链接:https://www.haomeiwen.com/subject/bixtdftx.html