美文网首页
UIView动画

UIView动画

作者: Carson_Zhu | 来源:发表于2018-02-08 00:11 被阅读17次

    简介

    UiView动画是基于高层API封装进行封装的,对UIView的属性进行修改时候所产生的动画.

    API介绍
    • 开始一个动画块
    // animationID 动画块内部应用程序标识用来传递给动画代理消息
    // context 附加的应用程序信息用来传递给动画代理消息
    + (void)beginAnimations:(NSString *)animationID context:(void *)context
    
    • 提交一个动画块
    + (void)commitAnimations; 
    
    • 设置动画块中的动画持续时间(用秒)
    + (void)setAnimationDuration:(NSTimeInterval)duration;
    
    • 代理
    [UIView beginAnimations:@"animation1" context:(__bridge void * _Nullable)(self)];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationWillStartSelector:@selector(animationWillStart:context:)];
    [UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];
    
    - (void)animationWillStart:(NSString *)animationID context:(void *)context {
        if ([animationID isEqualToString:@"animation1"]) {
            NSLog(@"第一个动画开始");
        }
    }
    
    - (void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context {
        if ([animationID isEqualToString:@"animation1"]) {
            NSLog(@"第一个动画结束");
        }
    }
    
    • 设置动画从当前状态开始播放
    // YES那么当动画在运行过程中,当前视图的位置将会作为新的动画的开始状态。
    // NO当前动画结束前新动画将使用视图最後状态的位置作为开始状态。
    + (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState;
    
    • 设置动画块中的动画属性变化的曲线
    // 讨论动画曲线是动画运行过程中相对的速度
    + (void)setAnimationCurve:(UIViewAnimationCurve)curve;
    
    • 在动画块中设置动画的延迟属性
    + (void)setAnimationDelay:(NSTimeInterval)delay;
    
    • 设置动画块中的动画效果是否自动重复播放
    + (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;
    
    • 设置动画在动画模块中的重复次数
    + (void)setAnimationRepeatCount:(float)repeatCount;
    
    • 设置是否激活动画
    // YES激活动画,NO不激活
    // 当动画参数没有被激活那么动画属性的改变将被忽略。默认动画是被激活的。
    + (void)setAnimationsEnabled:(BOOL)enabled;
    
    • 设置在动画块内部动画属性改变的开始时间
    + (void)setAnimationStartDate:(NSDate *)startTime;
    
    • 在动画块中为视图设置过渡
    + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;
    
    基本动画
    + (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations;
    
    + (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion; 
    

    animations修改View属性的Block下面是支持修改的属性

    @property frame
    @property bounds
    @property center
    @property transform
    @property alpha
    @property backgroundColor
    @property contentStretch
    
    延迟动画
    // delay 延迟时间,options 动画效果
    + (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);
    
    • 动画效果相关options
    UIViewAnimationOptionLayoutSubviews            //提交动画的时候布局子控件,表示子控件将和父控件一同动画。
    UIViewAnimationOptionAllowUserInteraction      //动画时允许用户交流,比如触摸
    UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画
    UIViewAnimationOptionRepeat                    //动画无限重复
    UIViewAnimationOptionAutoreverse               //执行动画回路,前提是设置动画无限重复
    UIViewAnimationOptionOverrideInheritedDuration //忽略外层动画嵌套的执行时间
    UIViewAnimationOptionOverrideInheritedCurve    //忽略外层动画嵌套的时间变化曲线
    UIViewAnimationOptionAllowAnimatedContent      //通过改变属性和重绘实现动画效果,如果key没有提交动画将使用快照
    UIViewAnimationOptionShowHideTransitionViews   //用显隐的方式替代添加移除图层的动画效果
    UIViewAnimationOptionOverrideInheritedOptions  //忽略嵌套继承的选项
    
    • 时间函数曲线相关options
    UIViewAnimationOptionCurveEaseInOut            //时间曲线函数,由慢到快
    UIViewAnimationOptionCurveEaseIn               //时间曲线函数,由慢到特别快
    UIViewAnimationOptionCurveEaseOut              //时间曲线函数,由快到慢
    UIViewAnimationOptionCurveLinear               //时间曲线函数,匀速
    
    • 转场动画相关的options
    UIViewAnimationOptionTransitionNone            //无转场动画
    UIViewAnimationOptionTransitionFlipFromLeft    //转场从左翻转
    UIViewAnimationOptionTransitionFlipFromRight   //转场从右翻转
    UIViewAnimationOptionTransitionCurlUp          //上卷转场
    UIViewAnimationOptionTransitionCurlDown        //下卷转场
    UIViewAnimationOptionTransitionCrossDissolve   //转场交叉消失
    UIViewAnimationOptionTransitionFlipFromTop     //转场从上翻转
    UIViewAnimationOptionTransitionFlipFromBottom  //转场从下翻转
    
    弹簧动画
    // dampingRatio 弹簧的阻尼 如果为1动画则平稳减速动画没有振荡。 这里值为 0~1
    // velocity 弹簧的速率。数值越小,动力越小,弹簧的拉伸幅度就越小。反之相反。比如:总共的动画运行距离是200 pt,你希望每秒 100pt 时,值为 0.5;
    + (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);
    
    过渡动画
    • 单个视图过渡
    + (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);
    
    • 两个视图过渡
    + (void)transitionFromView:(UIView *)fromView 
    toView:(UIView *)toView 
    duration:(NSTimeInterval)duration 
    options:(UIViewAnimationOptions)options 
    completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);
    

    实际效果:动画的作用范围为fromView的父视图的frame。动画结束后fromView会被删除,toView会被添加到fromView的父视图。

    关键帧动画
    • UIView添加帧动画
    + (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);
    
    • 帧动画里添加每一个帧动画
    // frameStartTime 相对开始时间
    // frameDuration 相对持续时间
    + (void)addKeyframeWithRelativeStartTime:(double)frameStartTime 
    relativeDuration:(double)frameDuration 
    animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0);
    
    • 关键帧动画独有options
    //选择使用一个简单的线性插值计算的时候关键帧之间的值。
    UIViewKeyframeAnimationOptionCalculationModeLinear
    //选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值。     
    UIViewKeyframeAnimationOptionCalculationModeDiscrete 
    //选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画。  
    UIViewKeyframeAnimationOptionCalculationModePaced   
    //选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值。你不能调整该算法的参数。 这个动画好像会更圆滑一些   
    UIViewKeyframeAnimationOptionCalculationModeCubic    
    //选择计算中间帧使用立方计划而忽略的时间属性动画。相反,时间参数计算隐式地给动画一个恒定的速度。
    UIViewKeyframeAnimationOptionCalculationModeCubicPaced
    
    • 使用
    [UIView animateKeyframesWithDuration:3 delay:1 options:UIViewKeyframeAnimationOptionRepeat  animations:^{
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:.3 animations:^{
            self.animationView.frame = CGRectMake(100, 300, 50, 50);
        }];
        [UIView addKeyframeWithRelativeStartTime:.3 relativeDuration:.6 animations:^{
            self.animationView.frame = CGRectMake(100, 400, 80, 80);
        }];
        [UIView addKeyframeWithRelativeStartTime:.6 relativeDuration:1 animations:^{
            self.animationView.frame = CGRectMake(20, 70, 100, 100);
        }];
    } completion:nil];
    
    删除子视图
    // onViews views操作的view 这会让那个视图变模糊、收缩和褪色, 之后再给它发送 removeFromSuperview 方法。
    // options 只有一个删除 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);
    

    补充一个UIImageView帧动画

    NSArray * imgsArr = @[[UIImage imageNamed:@"1.jpg"],[UIImage imageNamed:@"2.jpg"],[UIImage imageNamed:@"3.jpg"],[UIImage imageNamed:@"4.jpg"],[UIImage imageNamed:@"5.jpg"],[UIImage imageNamed:@"6.jpg"],[UIImage imageNamed:@"7.jpg"]];
    // 设置动画图片数组
    [imageView setAnimationImages:imgsArr];
    // 设置动画持续时间
    [imageView setAnimationDuration:0.5];
    // 设置动画重复次数  (当值为0时,表示无限次)  
    imageView.animationRepeatCount = 5;
    // 开始动画
    [imageView startAnimating];
    

    相关文章

      网友评论

          本文标题:UIView动画

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