美文网首页
iOS动画- UIView

iOS动画- UIView

作者: oncezou | 来源:发表于2017-03-17 17:16 被阅读122次

UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持. 系统给UIView添加了很多分类方法可以快速完成一些简单的动画。

UIView动画

UIView(UIViewAnimation)

//开始动画
+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context; 
//提交动画
+ (void)commitAnimations;     
//设置代理                                   
+ (void)setAnimationDelegate:(nullable id)delegate;  
//设置动画开始方法                        
+ (void)setAnimationWillStartSelector:(nullable SEL)selector;     
//设置动画结束方法           
+ (void)setAnimationDidStopSelector:(nullable SEL)selector;   
//设置动画时间:default = 0.2               
+ (void)setAnimationDuration:(NSTimeInterval)duration;     
//设置动画延迟开始时间:default = 0.0         
+ (void)setAnimationDelay:(NSTimeInterval)delay;         
//设置动画延迟开始日期:default = now ([NSDate date])         
+ (void)setAnimationStartDate:(NSDate *)startDate;  
/*
设置动画运动曲线:
UIViewAnimationCurveEaseInOut,  //慢进慢出(默认)
UIViewAnimationCurveEaseIn,     //慢进快出
UIViewAnimationCurveEaseOut,    //快进慢出
UIViewAnimationCurveLinear      //匀速   
*/             
+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;  
//设置重复次数         
+ (void)setAnimationRepeatCount:(float)repeatCount;         
//设置是否反转动画        
+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;  
//设置动画是否从当前状态开始  
+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState;  
//设置视图view的过渡效果, transition指定过渡类型, cache设置YES代表使用视图缓存,性能较好
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;  
+ (void)setAnimationsEnabled:(BOOL)enabled; 

//代理方法
//动画开始,如果设置动画开始方法,会在此时调用
-(void)animationWillStart:(NSString *)animationID context:(void *)context;
//动画结束,如果设置动画结束方法,会在此时调用
-(void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context;              

应用

- (void)animationForView
{
    [UIView beginAnimations:@"animationID" context:nil];
    [UIView setAnimationDuration:0.5f]; //动画时长
    [UIView setAnimationRepeatCount:MAXFLOAT];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
     /*
     转场动画类型UIViewAnimationTransition
     UIViewAnimationTransitionNone,         //没有效果
     UIViewAnimationTransitionFlipFromLeft, //从左水平翻转
     UIViewAnimationTransitionFlipFromRight,//从右水平翻转
     UIViewAnimationTransitionCurlUp,       //翻书上掀
     UIViewAnimationTransitionCurlDown,     //翻书下盖
     */
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.simpleView cache:YES]; //给视图添加过渡效果
    //在这里写你的代码.
    [UIView commitAnimations]; //提交动画
}

UIView(UIViewAnimationWithBlocks)

//前面3种是我们常用的
+ (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 completion:(void (^ __nullable)(BOOL finished))completion 

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations 

//Spring动画(类似CASpringAnimation )
+ (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
//单视图转场动画
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion
//双视图转场动画
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion 

UIViewAnimationOptions是后面3种方法的共同参数


typedef NS_OPTIONS(NSUInteger, UIViewAnimationOptions) {

    UIViewAnimationOptionLayoutSubviews            = 1 <<  0,//进行动画时布局子控件
    UIViewAnimationOptionAllowUserInteraction      = 1 <<  1,//进行动画时允许用户交互
    UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2,//从当前状态开始动画
    UIViewAnimationOptionRepeat                    = 1 <<  3,//无限重复执行动画
    UIViewAnimationOptionAutoreverse               = 1 <<  4,//执行动画回路
    UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5,//忽略嵌套动画的执行时间设置 
    UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6,//忽略嵌套动画的曲线设置 
    UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7,//转场:允许同一个view的多个动画同时进行
    UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8,//转场:移除(添加和移除图层的)动画效果
    UIViewAnimationOptionOverrideInheritedOptions  = 1 <<  9,//不继承父动画设置
    
    UIViewAnimationOptionCurveEaseInOut            = 0 << 16,//时间曲线,慢进慢出(默认值)
    UIViewAnimationOptionCurveEaseIn               = 1 << 16,//时间曲线,慢进
    UIViewAnimationOptionCurveEaseOut              = 2 << 16,//时间曲线,慢出
    UIViewAnimationOptionCurveLinear               = 3 << 16,//时间曲线,匀速
    
    UIViewAnimationOptionTransitionNone            = 0 << 20,//转场,不使用动画
    UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,//转场,从左向右旋转翻页
    UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,//转场,从右向左旋转翻页
    UIViewAnimationOptionTransitionCurlUp          = 3 << 20,//转场,下往上卷曲翻页
    UIViewAnimationOptionTransitionCurlDown        = 4 << 20,//转场,从上往下卷曲翻页
    UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,//转场,交叉消失和出现
    UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,//转场,从上向下旋转翻页
    UIViewAnimationOptionTransitionFlipFromBottom  = 7 << //转场,从下向上旋转翻页20,
}

UIViewAnimationOption主要分为3类(时间线、转场、其他),它是一个位移枚举,可以多值同时使用,但是同一类型的枚举值不能同时使用


Spring动画

- (void)springAnimation
{
    //usingSpringWithDamping:弹簧动画的阻尼值,也就是相当于摩擦力的大小,该属性的值从0.0到1.0之间,越靠近0,阻尼越小,弹动的幅度越大,反之阻尼越大,弹动的幅度越小,如果大道一定程度,会出现弹不动的情况。
    //initialSpringVelocity:弹簧动画的速率,或者说是动力。值越小弹簧的动力越小,弹簧拉伸的幅度越小,反之动力越大,弹簧拉伸的幅度越大。这里需要注意的是,如果设置为0,表示忽略该属性,由动画持续时间和阻尼计算动画的效果
    [UIView animateWithDuration:3.0 delay:0.0 usingSpringWithDamping:0.9 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseIn animations:^{
        self.simpleView.y = self.simpleView.y + 100;
    } completion:^(BOOL finished) {
    }];
}

注:
大家需要注意的一点是,弹簧动画并不只作用于位置的变化,它可以作用于所有动画属性的变化,比如我们在animations的闭包中除了位置的变化外,还有透明度的变化,它也同样有弹簧动画的效果,只不过它没有位置变化那么明显和贴近真实,它会表现出一闪一闪的效果


  • 转场动画在执行过程中不可以被停止,
  • 转场动画在执行过程中不可以用户交互
  • 转场动画在执行过程中不可以控制动画执行进度

单视图转场动画
单视图转场动画只能用作属性动画做不到的转场效果

- (void)signalViewAnimation
{
    //单视图的转场动画需要在动画块中设置视图转场前的内容和视图转场后的内容
    [UIView transitionWithView:self.imageView_1
                      duration:1.0
                       options:UIViewAnimationOptionTransitionCurlUp|UIViewAnimationOptionCurveEaseOut
                    animations:^{
                        self.imageView_1.image = [UIImage imageNamed:@"imageView_1"];
                  } completion:^(BOOL finished) {
                    
                  }];
}

双视图转场动画

- (void)doubleViewAnimation
{
    /**
     *  双视图的转场动画
     *  注意:双视图的转场动画实际上是fromView的父视图在转场同时操作fromView移除和toView添加到父视图的一个过程,
     *  fromView必须要有父视图,toView必须不能有父视图,否则会出问题   比如动画不准等
     */
    [UIView transitionFromView:self.imageView_1
                        toView:self.imageView_2
                      duration:1.0 options:UIViewAnimationOptionCurveEaseOut|UIViewAnimationOptionTransitionFlipFromLeft
                    completion:^(BOOL finished) {
                        
                    }];
}

UIImageView的帧动画

UIImageView可以让一系列的图片在特定的时间内按顺序显示 .

相关属性解析:

animationImages:要显示的图片(一个装着UIImage的NSArray) .

animationDuration:完整地显示一次animationImages中的所有图片所需的时间 .

animationRepeatCount:动画的执行次数(默认为0,代表无限循环) 

相关方法解析:

- (void)startAnimating; 开始动画 .

- (void)stopAnimating;  停止动画 .

- (BOOL)isAnimating;  是否正在运行动画.
//GIF动画
- (void)showAnimation
{
   UIImageView *animatonView = [[UIImageView alloc] init];
   animatonView.frame = CGRectMake(0, 0, 200, 200);
   [self.view addSubview:animatonView];
   NSMutableArray * animationView = [[NSMutableArray alloc] init];
   for (int i = 1; i < 5; i++) {
        UIImage * image = [UIImage imageNamed:[NSString stringWithFormat:@"gif_0%d",i]];
        if (image) {
            [animationView addObject:image];
        }
    }
    animatonView.animationImages = animationView;
    animatonView.animationDuration = 1;
    animatonView.animationRepeatCount = 0;
    //开始动画
    [animatonView startAnimating];
}

值得注意的是:如果设置animationRepeatCount为非0的值,那么从后台切换到前台时,动画会消失
猜想:animationRepeatCount=0时,是在主线程中执行的,非0时,在其他线程执行,app切换到后台,系统会将非主线程的操作关闭。


参考资料:
iOS中的动画
iOS动画-从不会到熟练应用
iOS UIView动画实践(二):Spring Animation与人机交互

相关文章

网友评论

      本文标题:iOS动画- UIView

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