iOS旋钮动画-CircleKnob

前段时间和群里的一个设计师配合，根据网上的一个旋钮gif为原型，用代码做出来了。先来看下原型的效果 

在看下下面是我做完后成品的效果，加了一个通过移动光源来对阴影控制的效果，这样看起来更立体点。（那个太阳有点不协调。。。） 
同时附上代码链接https://git.oschina.net/BearXR/CircleKnob 
还有单独的下载包http://download.csdn.net/detail/xiongbaoxr/9419655 

下面开始简单的讲解下构思步骤和部分代码片段 
1，构建底盘 
首先我们要构造两个圆盘和旋钮上的红点 
 
用view画两个圆盘，和一个小的红色控制点。 
注意：红色的控制点我又单独新建了一个view，这样方便待会做手势控制，从而不会影响到后面的view。而且所有view的圆心都要设置好。后面和角度相关的处理会很多的。最好能准确和self.view或者window能有直接的关联。

2，底盘增加点击和拖动的手势 
在这里我们要增加手势，还有起始点，终点的角度。我画了辅助线，便于调试。手势和过渡效果都写好了。所以效果我就直接放上来了。 

3，增加外围的扇环 
由于后面要做阴影，所以除了扇环的底色和效果是用了一个view，其余的每个小格子我都是新开了一个view，并且将旋钮的圆心位置设置为锚点进行旋转。 

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">#pragma mark - 设置外围的扇环形</span>
- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)initSetFanView
{
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGFloat</span> delta_distance = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">26</span>;

    fanView = [[FanView alloc] initWithFrame:CGRectMake(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, knob_width + delta_distance * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>, knob_width + delta_distance * <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>)];
    fanView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.center</span> = knob<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.center</span>;
    fanView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> clearColor];
    fanView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.userInteractionEnabled</span> = <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">NO</span>;
    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> addSubview:fanView];

    fanView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.knobValue</span> = -startAngleValue;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//设置起始点</span>
    fanView<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.lightSource_InWindow</span> = lightSource;
}

- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)drawRect:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">CGRect</span>)rect
{
    contextBack = UIGraphicsGetCurrentContext();
    contextFore = UIGraphicsGetCurrentContext();

    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> drawFan:contextBack
       bezierPath:bezierPathBack
        knobAngle:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">180</span> + endAngleValue
      strokeColor:[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> colorWithRed:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">202</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255.0</span> green:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">207</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255.0</span> blue:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">202</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255.0</span> alpha:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1.0</span>f]];

    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span> drawFan:contextFore
       bezierPath:bezierPathFore
        knobAngle:_knobValue
      strokeColor:[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> colorWithRed:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">174</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255.0</span> green:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">255.0</span> blue:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;