CALayer动画---使用CAShapeLayer制作类似微信小视频按钮动画

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

废话少说,直接上代码。工程截图如下图所示。由于对程序进行了封装,所以在主控制器中,只需要给出该customview的frame即可,显示图形的半径等于给出frame的宽度的一半。

例如: CustomView *customView = [[CustomView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)]; 也就是在位置为(0, 0)处创建出一个半径为100/2=50的view。

图1 工程截图

1 CustomView.m文件中实现的代码

@implementation CustomView

- (instancetype)initWithFrame:(CGRect)frame{

self = [super initWithFrame:frame];

if (self) {

//重新设置view的大小 设置为以width为边长的正方形区域

self.frame = CGRectMake(frame.origin.x

, frame.origin.y, frame.size.width, frame.size.width);

self.layer.cornerRadius = self.frame.size.width/2;

self.layer.masksToBounds = YES;

//初始角度

angle = 0;

//添加按键

_button = [UIButton buttonWithType:UIButtonTypeSystem];

_button.frame = CGRectMake(0, 0, self.frame.size.width, frame.size.width);

_button.backgroundColor = [UIColor greenColor];

[self addSubview:_button];

//添加显示文字的lable

_lable = [[UILabel alloc]initWithFrame:_button.frame];

//文字居中

_lable.textAlignment = NSTextAlignmentCenter;

_lable.numberOfLines = 0;

_lable.lineBreakMode = NSLineBreakByWordWrapping;

_lable.text = @"按住拍";

[self addSubview:_lable];

//添加按键不同事件执行的方法

[_button addTarget:self action:@selector(cameraButtonTouchDown:) forControlEvents:UIControlEventTouchDown];

[_button addTarget:self action:@selector(cameraButtonClicked:) forControlEvents:UIControlEventTouchUpInside];

//绘图

[self initLayout];

//定时器设置

_timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(isButtonClicked) userInfo:nil repeats:YES];

//暂停定时器

[_timer setFireDate:[NSDate distantFuture]];

}

return self;

}

- (void)initLayout{

_shapeLayer = [CAShapeLayer layer];

_shapeLayer.strokeColor = [UIColor redColor].CGColor;

_shapeLayer.fillColor = [UIColor clearColor].CGColor;

_shapeLayer.frame = _button.frame;

_shapeLayer.lineWidth = 5.0f;

[self.layer addSublayer:_shapeLayer];

_bPath = [[UIBezierPath alloc]init];

//画圆弧

[_bPath addArcWithCenter:_button.center radius:_button.frame.size.width/2 startAngle:0 endAngle:angle*M_PI/180 clockwise:YES];

_shapeLayer.path = _bPath.CGPath;

}

#PRagma mark 按键被触摸按下 立刻执行方法内的程序

- (void)cameraButtonTouchDown:(UIButton *)sender{

[_timer setFireDate:[NSDate distantPast]];

isClicked = YES;

}

#pragma mark 按键按下后执行的方法 注意:isClicked = NO 只有在按键弹起后才会生效

- (void)cameraButtonClicked:(UIButton *)sender{

isClicked = NO;

}

#pragma mark 定时器方法 重绘角度等

- (void)isButtonClicked{

[_shapeLayer removeFromSuperlayer];

[_bPath removeAllPoints];

if (isClicked) {

if (angle < 360) {

angle = angle + 5;

//重绘

[self initLayout];

_lable.text = [NSString stringWithFormat:@"已加载%%%ld",angle*100/360];

}else{

//关闭定时器

[_timer setFireDate:[NSDate distantFuture]];

UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:@"拍摄完成" message:nil delegate:self cancelButtonTitle:@"取消" otherButtonTitles: @"确定", nil];

[alertView show];

//回到初始状态

angle = 0;

_lable.text = @"按住拍";

[self initLayout];

}

}else{

//关闭定时器

[_timer setFireDate:[NSDate distantFuture]];

//回到初始状态

angle = 0;

_lable.text = @"按住拍";

[self initLayout];

}

}

@end

2 ViewController.m文件中实现的代码

#import "ViewController.h"

#import "CustomView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

CustomView *customView = [[CustomView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];

customView.center = self.view.center;

[self.view addSubview:customView];

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

3 模拟器运行结果截图

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航