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

开篇

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

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

正题

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

云彩的飘动

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

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

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

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

+ (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:^{
                        //
                    }];
                }];
            }];
            
        }];
        
        
        
    }];
}

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

总结

其实技术都是一些很基本的技术,想做出漂亮的动画根据运动轨迹时间慢慢调整就好。 上述的绿色虚线问题找到合理的解决办法时本文会更新,以上连续动画方法是自己摸索而来,大牛有更好的办法会虚心求教欢迎连续,或者加QQ群 139852091 详聊

(不喜勿喷哦)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏進无尽的文章

绘图-几种基本统计图的实现分析

在开发中我们会遇到各种统计图,或者各种绘图,本文通过对基本三大统计图:折线图、柱状图、扇形图的实现来掌握基本统计图的绘制,在下一篇文中会带来复杂一些的绘图案例分...

1791
来自专栏進无尽的文章

浅汇-iOS 动画

        在iOS开发中,制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而...

1362
来自专栏everhad

Android自定义评分控件:RatingStarView

RatingStarView Android自定义的评分控件,类似RatingBar那样的,使用星星图标(full、half、empty)作为rating值的“...

3629
来自专栏IMWeb前端团队

css3的学习笔记

适合初学者以及没看过css3的人快速了解css3的主要内容。 1.opacity ----------------------取值0-1之间,给整个元素和...

1845
来自专栏ShaoYL

Autolayout

3316
来自专栏前端架构与工程

必应首页平铺背景图片的实现方案

近期某个项目中需要实现以下需求: 保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致,则以图片中心为基点等比缩放背景图片,以适应屏幕尺寸。 以上需求...

2135
来自专栏jojo的技术小屋

原 canvas小案例集合(小画板、画的回

作者:汪娇娇 日期:2016.12.8 在现在这个公司呆了4个多月,也是研究了canvas将近4个月,前两周心里就痒痒的想写这方面的博客,但一直没时间。可一直拖...

5558
来自专栏向治洪

React Native仿美团下拉菜单

在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: ? 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如...

53310
来自专栏前端说吧

CSS3-transform变形功能

2145
来自专栏向治洪

React Native仿美团下拉菜单

在很多产品中都会涉及到下拉菜单选择功能,用的最好的当属美团了,其效果如下: ? 要实现上面的效果,在原生中比较好做,直接使用PopWindow组件即可。如果使...

7455

扫码关注云+社区