美文网首页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">[笔记]

相关文章

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

    最近UI给了个产品图,大致效果就是类似 " 雷达波 " 或者 " 支付宝的咻咻咻 " 那个扩散效果,看到UI的第一...

  • CSS3 雷达搜索

    H5火热以后,很多搜索效果简直亮瞎眼,最喜欢的就是雷达这一款的,本篇demo类似支付宝咻一咻效果。 效果图 上传不...

  • 咻···咻···咻···

    2018年10月1日9:00至10月7日18:00 我们一起赋予这段时间意义和价值 徐敬东老师倾心分享,不断带给大...

  • 咻咻咻

    本来不想写的 好累好累了 今天该完成的完成了 早起背单词记账步数✅ 工作上帖子没发 该打 100条哇 约了客户 没...

  • iOS核心动画实现仿支付宝咻咻、雷达效果

    今天闲余时间写了一个类似支付宝咻咻或者说雷达效果。望大神勿笑、写的粗糙。 更新了下文章,贴出Demo地址(已更新一...

  • ios咻一咻,雷达功能

    demo有详细的注释,菜鸟一名互相学习=-=。 demo地址

  • 咻咻咻 duang

    咻咻咻 duang听到这个声音有没有觉得很耳熟呢,不错,这就是陈翔六点半啊。 第一次看六点半的视频还是在上大学的时...

  • 咻咻

    学习一门技能,为自己保驾护航。 关于怎么样选择人生道路。目前的职业生涯。和以后的职业发展成长的增值。

  • 仿支付宝咻一咻效果

    昨天写了一个气泡波纹效果,觉得不够实用,今天写一个仿支付宝【咻一咻】的效果,之前想在网上找找,可是没有找到。先看效...

  • 咻咻咻的涵涵宝

    咻咻咻是咻咻咻,涵涵宝是涵涵宝 涵涵宝喜欢咻咻咻,咻咻咻喜欢涵涵宝 小孩子呵呵笑,咻咻咻和涵涵宝?! ...

网友评论

  • 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