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

废话少说,直接上代码。工程截图如下图所示。由于对程序进行了封装,所以在主控制器中,只需要给出该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 模拟器运行结果截图

时间: 2024-10-14 12:47:24

CALayer动画---使用CAShapeLayer制作类似微信小视频按钮动画的相关文章

移动前端工作的那些事---前端制作之微信小技巧篇

移动前端工作的那些事---前端制作之微信小技巧篇_WebApp赵海洋_新浪博客 移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20:47) 转载▼移动前端工作的那些事---前端制作之微信小技巧篇,布布扣,bubuko.com

[iOS]手把手教你实现微信小视频

本文个人原创,转载请注明出处,谢谢. 前段时间项目要求需要在聊天模块中加入类似微信的小视频功能,这边博客主要是为了总结遇到的问题和解决方法,希望能够对有同样需求的朋友有所帮助. 效果预览: 这里先罗列遇到的主要问题: 视频剪裁  微信的小视频只是取了摄像头获取的一部分画面 滚动预览的卡顿问题  AVPlayer播放视频在滚动中会出现很卡的问题 接下来让我们一步步来实现. Part 1 实现视频录制 1.录制类WKMovieRecorder实现 创建一个录制类WKMovieRecorder,负责视

微信小程序按钮

微信小程序button组件样式 韦弦Zhy关注 22018.07.03 19:21:14字数 438阅读 108,988 button.png 上图下字.png 需要使用微信小程序button组件的open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下: 默认状态 <button>确定</button> 此时,各项值均为默认值,效果如下:有边框以及圆角 默认状态.png 设置其css如下:背景颜色background-co

Android 微信小视频录制功能实现

目录 开发之前 开发环境 相关知识点 开始开发 案例预览 案例分析 搭建布局 视频预览的实现 自定义双向缩减的进度条 录制事件的处理 长按录制 抬起保存 上滑取消 双击放大(变焦) 实现视频的录制 实现视频的停止 完整代码 总结 开发之前 这几天接触了一下和视频相关的控件, 所以, 继之前的微信摇一摇, 我想到了来实现一下微信小视频录制的功能, 它的功能点比较多, 我每天都抽出点时间来写写, 说实话, 有些东西还是比较费劲, 希望大家认真看看, 说得不对的地方还请大家在评论中指正. 废话不多说,

ios设备突破微信小视频6S限制的方法

刷微信朋友圈只发文字和图片怎能意犹未竟,微信小视频是一个很好的补充,音视频到位,流行流行最流行.但小视频时长不能超过6S,没有滤镜等是很大的遗憾.but有人突破限制玩出了花样,用ios设备在朋友圈晒出超时长.带滤镜甚至慢镜头拍摄的小视频.随ytkah一起看看他们是怎么玩的吧 未越狱ios设备在微信朋友圈上传延时.慢动作.滤镜.超时长小视频的方法: 第①步,将iPhone拍摄好的延时.超时长或者慢动作的视频保存到本地电脑,并同时截取一张视频画面保存.(PS:添加滤镜效果可以通过iMovie等App

微信小视频复制到手机本地Android APP 分享

因为需要将拍的宝宝的微信小视频上传到亲宝宝软件,每次去手动找文件比较麻烦,所以做了个微信视频复制到手机本地的APP,做工虽然粗糙,但是绝对实用, 下载地址 http://pan.baidu.com/s/1nuSNkCx 三个页面 首页是相册大图预览 第二页是微信视频预览和复制功能,长按单个视频可以单个复制,也可以按全部复制按钮 第三页是复制完成的视频预览

微信小视频微信卡包功能如约现身6.0版本

前面提到微信5.5版内测,今天微信直接跳过5.x版本升级为微信6.0版本,微信小视频和微信卡包功能如约到来,我们来上手体验一下吧. 微信6.0版微信小视频,可在聊天或朋友圈拍摄一段小视频分享给好友 微信聊天界面的⊕添加小视频 在朋友圈中分享微信小视频 微信卡包,把优惠券.会员卡.机票.电影票等发到微信卡包里,方便使用:此外,新版本中还可为微信钱包设置手势密码

微信小程序的动画效果

前言 由于公司计划有变,所以从H5页面改成去小程序写.所以在着手开发小程序.本人也不是什么前端高手,只是一名写后端偶尔写写前端的渣渣.请前端大神们勿喷. 一.什么是微信小程序? 小程序在我的理解中只是高度封装的H5,封装了各种组件.根据官方的说法小程序运行不是在浏览器当中.姑且算是微信的插件吧. 二.小程序不能操纵DOM 小程序不能直接操纵DOM,鼓励的是数据绑定.例如vue.js这种.所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯.需要一个习惯的过程. 三.小程序不能引用JQ

iOS微信小视频优化心得

小视频是微信6.0版本重大功能之一,在开发过程中遇到不少问题.本文先叙述小视频的产品需求,介绍了几个实现方案,分析每个方案的优缺点,最后总结出最优的解决方案. 小视频播放需求 可以同时播放多个视频 用户操作界面时视频可以继续播放 播放时不能卡住界面,视频滑进界面内后要立即播放 视频在列表内播放是静音播放,点击放大是有声播放 小视频播放方案 1. MPMoviePlayerController MPMoviePlayerController是一个简单易用的视频播放控件,可以播放本地文件和网络流媒体