美文网首页iOS开发文章iOS备忘录动画
雷达波/支付宝咻咻咻/水波扩散效果

雷达波/支付宝咻咻咻/水波扩散效果

作者: 记住你姓李 | 来源:发表于2016-06-22 08:53 被阅读1232次

    最近UI给了个产品图,大致效果就是类似 " 雷达波 " 或者 " 支付宝的咻咻咻 " 那个扩散效果,看到UI的第一眼就是找demo , 这种动画效果一直都是最不愿意写的东西 , 因为暂时实在是没什么项目 , 工作有点闲 , 我就试着自己写写看 . 写出了下面的效果 , 代码很简单 , 就是在一个View上 画了个圆 然后添加到控制器上 设置定时源 让他按比例放大就OK

    未命名.gif
    //
    //  GFWaterView.m
    //  动画
    //
    //  Created by 李国峰 on 16/6/6.
    //  Copyright © 2016年 李国峰. All rights reserved.
    //
    
    #import "GFWaterView.h"
    
    @implementation GFWaterView
    
    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect {
    
        // 半径
        CGFloat rabius = 60;
        // 开始角
        CGFloat startAngle = 0;
        
        // 中心点
        CGPoint point = CGPointMake(100, 100);  // 中心店我手动写的,你看看怎么弄合适 自己在搞一下
        
        // 结束角
        CGFloat endAngle = 2*M_PI;
    
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:point radius:rabius startAngle:startAngle endAngle:endAngle clockwise:YES];
    
        CAShapeLayer *layer = [[CAShapeLayer alloc]init];
        layer.path = path.CGPath;       // 添加路径 下面三个同理
        
        layer.strokeColor = [UIColor redColor].CGColor;
        layer.fillColor = [UIColor clearColor].CGColor;
        
        
        [self.layer addSublayer:layer];
    }
    
    
    @end
    

    然后把这个View 添加到控制器中 按比例放大就OK 同时设置定时源

    //
    //  ViewController.m
    //  雷达波
    //
    //  Created by 李国峰 on 16/6/6.
    //  Copyright © 2016年 李国峰. All rights reserved.
    //
    
    #import "ViewController.h"
    #import "GFWaterView.h"
    
    @interface ViewController ()
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        [NSTimer scheduledTimerWithTimeInterval:0.5 target:self selector:@selector(clickAnimation) userInfo:nil repeats:YES];
    }
    -(void)clickAnimation{
        __block GFWaterView *waterView = [[GFWaterView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
        
        waterView.backgroundColor = [UIColor clearColor];
        
        [self.view addSubview:waterView];
        //    self.waterView = waterView;
        
        
        [UIView animateWithDuration:2 animations:^{
            
            waterView.transform = CGAffineTransformScale(waterView.transform, 2, 2);
            
            waterView.alpha = 0;
            
        } completion:^(BOOL finished) {
            
            [waterView removeFromSuperview];
            NSLog(@"%ld",self.view.subviews.count);
            
        }];
    }
    
    - (void)didReceiveMemoryWarning {
        [super didReceiveMemoryWarning];
        // Dispose of any resources that can be recreated.
    }
    
    @end
    

    技术有待发展 希望能够跟更多大神多多交流
    <a href = "https://github.com/LGFModel/try">[demo]

    为知笔记:自由,开放,共享
    下面是我的笔记共享,涵盖很多基础知识,希望大家多多关注<a href = "https://note.wiz.cn/pages/manage/biz/applyInvited.html?code=j84jy0">[笔记]

    相关文章

      网友评论

      • 0e7b567cbcdf:大神,求带
      • 6c137710598e:为啥不用定时器,直接在ViewDidLoad中调用[self clickAnimation]; 不会出现圆圈和动画呢?延时执行这个方法就可以了,不太明白为什么
      • 做你的小星星:建议楼主看一下CAReplicatorLayer,用这个图层应该更合适!
        记住你姓李:@做你的小星星 谢谢 分享 之前并不知道 会找时间研究下 :joy::joy:
      • 泼茶_:大神,你是怎么变得这么厉害的啊? :kissing_closed_eyes:
      • 音符上的码字员:UIView中并不会造成Block循环引用
        记住你姓李:@yoyu 谢谢提醒 , 之前确实没有写__block 后来出现了个问题 就是 (clickAnimation 执行第四次后) 播放到四次的时候 会中断几次播放 , 当时考虑的是引用了外部属性 在Block中 然后我添加了 __block 得到了解决 后来我又试着去掉 , 结果又正常了 最后还是一直留着了 现在如果吧定时器的频率变的特别快 也会发现这个问题 , 根据我的理解这是 View 释放的慢导致的~~

      本文标题:雷达波/支付宝咻咻咻/水波扩散效果

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