指针动画
我因为公司业务的缘故,需要写一个用指针表盘指示金额,月份,并且还要有启动动画!在网上找了找Demo,实在没有合适的,就借鉴前人风采,自己动手搞了一下!
先简单看下效果:
watchAnimation.gif
主要思路就是画图,基本动画,隐式动画,手势处理,函数计算这些东西!
- 画图
UIBezierPath这个类呢主要用于绘图。
之前的项目中需要绘图的部分都是用Core Graphics来绘制,OC是我的第一门语言,所以对于Core Graphics的C语言API不太适应,最近发现原来苹果的UIKit中已经对Core Graphics做了一些简单的封装,UIBezierPath就是其中一个。UIBezierPath已经完全满足了我对绘图的一些基本要求。
UIBezierPath的好处显而易见。
首先它是OC语言的,相对于c语言的Core Graphics来说更为平易近人。 * 其次它能够使用ARC,如果我们直接使用CGPathRef的话,还要自己负责在合适的时候释放。
现在我就根据自己的使用来做一下简单记录。
使用
UIBezierPath的使用相当简单,分为三步:
创建path
// line1 CGFloat radius = w/2 - ZM_SPACE(12);// 半径 UIBezierPath *bgpath = [UIBezierPath bezierPath]; [bgpath addArcWithCenter:point radius:radius startAngle:endA endAngle:startA clockwise:YES]; [ZMHEXCOLOR(0xf1f1f1) set]; [bgpath setLineWidth:9.f];// 线宽 [bgpath setLineCapStyle:kCGLineCapRound];// line的圆角 [bgpath stroke];
添加路径到path
将path绘制出来
UIBezierPath *path1 = [UIBezierPath bezierPath]; [path1 addArcWithCenter:point radius:radius startAngle:endA endAngle:midA clockwise:YES];
- 添加指针
在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮、一个文本标签、一个文本输入框、一个图标等等,这些都是UIView。
其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层,在创建UIView对象时,UIView内部会自动创建一个图层(即CALayer对象),通过UIView的layer属性可以访问这个层
@property(nonatomic,readonly,retain) CALayer *layer;
当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制在自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView的显示
换句话说,UIView本身不具备显示的功能,拥有显示功能的是它内部的图层。
UIView之所以能够显示,完全是因为内部的CALayer对象。因此,通过操作这个CALayer对象,可以很方便地调整UIView的一些界面属性,比如:阴影、圆角大小、边框宽度和颜色等。
在这里我们可以给layer添加一张图片,当然,你可以自己画,你感觉你画的比美工设计的好看的话,就自己画好了!
// 指针 CALayer *needleLayer = [CALayer layer]; // 设置锚点 needleLayer.anchorPoint = CGPointMake(0.5, 1155/1300.f); // 锚点位置 needleLayer.position = CGPointMake(w*0.5, h-ZM_SPACE(15)); // bounds needleLayer.bounds = CGRectMake(0, 0, ZM_SPACE(29), ZM_SPACE(130)); // 添加图片 needleLayer.contents = (id)[UIImage imageNamed:@"zhizhen"].CGImage; [self.layer addSublayer:needleLayer]; needleLayer.transform = CATransform3DMakeRotation(self.currentRadian, 0, 0, 1);
这样呢,基本的表盘,指针都有了,最后要处理手势,动画了!
- 手势:
我们首先要得到触摸的每一个点的坐标,记录上一个点,两个点之间,根据锚点可以计算出移动的角度,然后就可以让指针移动了!
if (pos.x == ZM_circle_X) {
return 0;
}
if (pos.y > ZM_circle_Y && pos.x <= ZM_circle_X) {
return -M_PI_2;
}
if (pos.y > ZM_circle_Y && pos.x > ZM_circle_X) {
return M_PI_2;
}
CGFloat x_space = pos.x - ZM_circle_X;
CGFloat y_space = ZM_circle_Y - pos.y;
CGFloat r_space = sqrt(x_space*x_space + y_space*y_space);
CGFloat result = M_PI_2 - acos(x_space/r_space);
当然具体还有一些细节需要处理,我把这个小Demo放在了github上,有兴趣的可以去下载看看!
https://github.com/zlr1218/RZOLAnimation.git