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

最近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">[笔记]

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

推荐阅读更多精彩内容