我因为公司业务的缘故，需要写一个用指针表盘指示金额，月份，并且还要有启动动画！在网上找了找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
网友评论