iOS 连续动画效果(让APP动起来)

近期工作不忙,来一个需求感觉棒棒的,是一个比较简单的页面,如下图(图1)

图1

作为一个开发者,有一个学习的氛围跟一个交流圈子特别重要这是一个我的iOS交流群:687528266,不管你是小白还是大牛欢迎入驻 ,分享BAT,阿里面试题、面试经验,讨论技术, 大家一起交流学习成长!

应该很简单吧,没什么大的功能,就是一个展示,一个拨打电话,拨打电话不需要说,几行代码搞定,基本UI也不用说了,刚培训完的孩子们都能做,但是如果让这个页面动起来呢,会不会很漂亮呢(方然,这不是屁话么,先看看我做的效果吧,图2)

123.gif

正题

会动得有云彩在飘,对号的缩放,添加绿色线条,我们一个一个的看

云彩的飘动

要做到这个会飘动的云彩,其实很简单,他是一个平移动画,我画了一个简单的图,可以看一下,便于理解嘛

456.gif

只要云彩有透明部分,就可以了,但是当云彩向右移动的时候,屏幕上会有一快没有云彩试图覆盖的区域,尤其是当X等于屏幕的宽的时候

Paste_Image.png

思路:
其实解决这个问题也是很简单的,我用两个imageView,imageView2的初始X值只要为负的屏幕宽,当imageView1移动的时候,让imageView2也跟着一起移动,他们两个以同样的速度来移动就可以了,等到imageView1的x等于屏幕的宽的时候,把imageView1的x值变成0然后继续执行这个动画,同时,当imageView2的X等于屏幕的宽的时候,把它的X变成初始的坐标

789.gif

这样就可以了吧,代码如下:

+ (void)translationAnimationView:(UIView *)view animationDuration:(NSTimeInterval)timer animationBlock:(QuitRentAnimationBlock)block {     
    [UIView animateWithDuration:timer animations:^{         
        view.x = view.x + SCREEN_WIDTH;     
    } completion:^(BOOL finished) {         
        if (finished) {            
            block();         
       }     
    }]; 
}

然后两个imageview分别调用,在完成的block里面继续调用自己

//给云彩1做平移动画
- (void)cloudImageView_1Animation {     
    [QuitRentAnimation translationAnimationView:self.cloudImageView_1 animationDuration:10 animationBlock:^{        self.cloudImageView_1.x = 0;         
        [self cloudImageView_1Animation];     
    }]; 
}
//给云彩2做平移动画
- (void)cloudImageView_2Animation {     
    [QuitRentAnimation translationAnimationView:self.cloudImageView_2 animationDuration:10 animationBlock:^{        self.cloudImageView_2.x = -SCREEN_WIDTH;         
        [self cloudImageView_2Animation];     
    }]; 
}
加好缩放以及绘制绿色虚线

由上面的效果gif可以看出来,加好缩放以及绘制绿色虚线是一个动画完成的
思路:
加好缩放以及绘制绿色虚线,他们是有先后顺序的,UIView动画有一个回调,我们在一个动画完成后再进行另外一个
第一,加号试图是一个缩放动画,做这个缩放动画其实很简单,按照上面的思路,先把他放大一下,再缩小一下,再放大,复原即可,demo如下:

+ (void)scalingAnimationView:(UIView *)view animationBlock:(QuitRentAnimationBlock)block {     
    view.transform = CGAffineTransformMakeScale(1.0, 1.0);      
    [UIView animateWithDuration:0.3 animations:^{           
        view.transform = CGAffineTransformMakeScale(1.2, 1.2);        
     }completion:^(BOOL finish){           
         [UIView animateWithDuration:0.3 animations:^{               
             view.transform = CGAffineTransformMakeScale(0.9, 0.9);           
         }completion:^(BOOL finish){               
             [UIView animateWithDuration:0.3 animations:^{                   
                 view.transform = CGAffineTransformMakeScale(1.1, 1.1);               
             }completion:^(BOOL finish){                  
                 [UIView animateWithDuration:0.3 animations:^{                       
                     view.transform = CGAffineTransformMakeScale(1, 1);                   
                 }completion:^(BOOL finish){                      
                     block();                  
                 }];              
              }];          
          }];      
      }]; 
}

然后是绘制绿色虚线,这地方我遇到了挺多的坑,在现在的放慢gif中可以看出很大的缺点,就是绿色的线没有完全按照灰色的点上走,我目前还没有想到更好的优化方法,先把这个给大家分享出来,大家看一下吧
先创建一个绘制虚线试图

- (void)drawRect:(CGRect)rect{     
    [super drawRect:rect];    
    CGContextRef currentContext = UIGraphicsGetCurrentContext();    
    //设置虚线颜色     
    CGContextSetStrokeColorWithColor(currentContext, self.lineColor.CGColor);    
    //设置虚线宽度     
    CGContextSetLineWidth(currentContext, 2);    
    //设置虚线绘制起点     
    CGContextMoveToPoint(currentContext, 2 * 0.5, 0.0);    
    //设置虚线绘制终点     
    CGContextAddLineToPoint(currentContext, 2 * 0.5, CGRectGetHeight(self.bounds));
    //设置虚线排列的宽度间隔:下面的arr中的数字表示先绘制3个点再绘制1个点     
    CGFloat arr[] = {2,2};    
    //下面最后一个参数“2”代表排列的个数。     
    CGContextSetLineDash(currentContext, 0, arr, 2);    
    CGContextDrawPath(currentContext, kCGPathStroke);    
    CGContextStrokePath(currentContext); 
}

然后继承于这个view,做宽度为1,高度为我们想要的动画,动画代码如下:

//垂直移动动画+ (void)verticalAnimationView:(UIView *)view animationDuration:(NSTimeInterval)timer  animationDistance:(CGFloat)animationDistance animationBlock:(QuitRentAnimationBlock)block {     
    [UIView animateWithDuration:timer animations:^{         
        view.height = view.height + animationDistance;      
     } completion:^(BOOL finished) {        
         if (finished) {             
             block();         
         }     
     }]; 
}

结合上面的思路,把每个动画点起来

//给对号线条,垂直虚线做动画
- (void)quitRentSucessImageViewAnimation {    
    int i = 2;
    //    int i = 2;
    //    int i = 3;     
    CGFloat greenLine_1_Distance;     
    CGFloat greenLine_2_Distance;    
    if (i == 0) {         
        greenLine_1_Distance = 30 * KHeight_Scale;     
    }else if (i == 1){         
        greenLine_1_Distance = 60 * KHeight_Scale;         
        greenLine_2_Distance = 55 * KHeight_Scale;     
    }else if (i == 2){         
        greenLine_1_Distance = 60 * KHeight_Scale;         
        greenLine_2_Distance = 110 * KHeight_Scale;     
    }     
    WEAKSELF     
    [QuitRentAnimation scalingAnimationView:weakSelf.quitRentSucessImageView  animationBlock:^{          
        [self addSubview:self.greenLine1];         
        [self.greenLine1 mas_makeConstraints:^(MASConstraintMaker *make) {             
            make.top.mas_equalTo(weakSelf.quitRentSucessImageView.mas_bottom);             
            make.centerX.mas_equalTo(weakSelf.detainMoneyAccountTitleLabel.mas_right).offset(25/2+5);             
            make.width.mas_equalTo(2);             
            make.height.mas_equalTo(greenLine_1_Distance);         

         }];          
         [QuitRentAnimation verticalAnimationView:weakSelf.greenLine1 animationDuration:0.8 animationDistance:greenLine_1_Distance animationBlock:^{            if (i == 0) return ;              
             weakSelf.houseConnectSucessImageView.image = [UIImage imageNamed:@"icon_pay_money_duihao"];             
             [QuitRentAnimation scalingAnimationView:weakSelf.houseConnectSucessImageView animationBlock:^{                  
                 [weakSelf addSubview:weakSelf.greenLine2];                  
                 [weakSelf.greenLine2 mas_makeConstraints:^(MASConstraintMaker *make) {                     
                     make.top.mas_equalTo(weakSelf.houseConnectSucessImageView.mas_bottom);                     
                     make.centerX.mas_equalTo(weakSelf.detainMoneyAccountTitleLabel.mas_right).offset(25/2+5);                     
                     make.width.mas_equalTo(2);                     
                     make.height.mas_equalTo(greenLine_2_Distance);                 
                }];                 
                [QuitRentAnimation verticalAnimationView:weakSelf.greenLine2 animationDuration:1 animationDistance:greenLine_2_Distance animationBlock:^{                     
                    weakSelf.detainMoneyAccountSucessImageView.image = [UIImage imageNamed:@"icon_pay_money_duihao"];                     
                    [QuitRentAnimation scalingAnimationView:weakSelf.detainMoneyAccountSucessImageView animationBlock:^{                        //                     
                    }];                 
                }];             
            }];          
        }];        
    }]; 
}

我的这个是根据不同的情况让绿色线条到不同的位置,所以比较繁琐,也可能是本人代码风格一向比较乱的原因吧

总结

其实技术都是一些很基本的技术,想做出漂亮的动画根据运动轨迹时间慢慢调整就好。

文/齐广东(简书作者)
原文链接:http://www.jianshu.com/p/9c3ccd2eeafe
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

如果需要以下书籍,加QQ群687528266免费分享

喜欢晓雯!记得关注晓雯哟!晓雯

没有更多推荐了,返回首页