旋转animation,跟随手指,跟随圈子的外在path的uibuttons

我正在寻找一些小小的指导来开始制定跟踪手指移动的animation,并沿着圆圈的外部path移动一系列UIButton

在这里输入图像说明

我想像它会有一种左轮手枪的感觉。 像每一个locking在底部的地方

或者像滑过这些滑动插入件之一一样

在这里输入图像说明

提前致谢

( GitHub上的示例代码)

这不是那么困难,只涉及到很多三angular函数。

现在,我现在要描述的不是一个animation ,因为你要求它跟踪标题中的手指位置。 animation将涉及自己的计时function,但由于您使用的是触摸手势,因此我们可以使用该事件的固有时间,并相应地旋转视图。 (TL; DR:用户保持移动的时间,而不是一个隐式的定时器)。

跟踪手指

首先,我们定义一个方便的类来跟踪angular度,我将其DialView 。 它实际上只是UIView的一个子类,具有以下属性:

DialView.h

 @interface DialView : UIView @property (nonatomic,assign) CGFloat angle; @end 

DialView.m

 - (void)setAngle:(CGFloat)angle { _angle = angle; self.transform = CGAffineTransformMakeRotation(angle); } 

UIButton可以包含在这个视图中(我不确定是否需要button来负责旋转?我将使用UIPanGestureRecognizer ,因为这是最方便的方式)。

让我们build立视图控制器,它将处理我们的DialView内的平移手势,让我们也保留对DialView的引用。

MyViewController.h

 @class DialView; @interface ViewController : UIViewController // The previously defined dial view @property (nonatomic,weak) IBOutlet DialView *dial; // UIPanGesture selector method - (IBAction)didReceiveSpinPanGesture:(UIPanGestureRecognizer*)gesture; @end 

这取决于你如何挂上平底锅手势,个人而言,我把它放在笔尖文件上。 现在,这个函数的主体:

MyViewController.m

 - (IBAction)didReceiveSpinPanGesture:(UIPanGestureRecognizer*)gesture { // This struct encapsulates the state of the gesture struct state { CGPoint touch; // Current touch position CGFloat angle; // Angle of the view CGFloat touchAngle; // Angle between the finger and the view CGPoint center; // Center of the view }; // Static variable to record the beginning state // (alternatively, use a @property or an _ivar) static struct state begin; CGPoint touch = [gesture locationInView:nil]; if (gesture.state == UIGestureRecognizerStateBegan) { begin.touch = touch; begin.angle = self.dial.angle; begin.center = self.dial.center; begin.touchAngle = CGPointAngle(begin.touch, begin.center); } else if (gesture.state == UIGestureRecognizerStateChanged) { struct state now; now.touch = touch; now.center = begin.center; // Get the current angle between the finger and the center now.touchAngle = CGPointAngle(now.touch, now.center); // The angle of the view shall be the original angle of the view // plus or minus the difference between the two touch angles now.angle = begin.angle - (begin.touchAngle - now.touchAngle); self.dial.angle = now.angle; } else if (gesture.state == UIGestureRecognizerStateEnded) { // (To be Continued ...) } } 

CGPointAngle是我发明的一种方法,它只是atan2一个很好的包装(如果你现在打电话,我正在扔CGPointDistance !):

 CGFloat CGPointAngle(CGPoint a, CGPoint b) { return atan2(ay - by, ax - bx); } CGFloat CGPointDistance(CGPoint a, CGPoint b) { return sqrt(pow((ax - bx), 2) + pow((ay - by), 2)); } 

这里的关键是有两个angular度来跟踪:

  1. 视图本身的angular度
  2. 你的手指和视图中心之间形成的angular度。

在这种情况下,我们希望视图的angular度是originalAngle + deltaFinger ,这就是上面的代码所做的,我只是把所有的状态封装在一个结构中。

检查半径

如果你想跟踪“视图的边界”,你应该使用CGPointDistance方法,并检查begin.centernow.finger之间的距离now.finger是一个特定的值。

这是你的功课!

回弹

好吧,现在,这部分是一个实际的animation,因为用户不再控制它。

捕捉可以通过定义一组angular度来实现,当手指松开手指(手势结束)时,可以像下面这样捕捉它们:

 else if (gesture.state == UIGestureRecognizerStateEnded) { // Number of "buttons" NSInteger buttons = 8; // Angle between buttons CGFloat angleDistance = M_PI*2 / buttons; // Get the closest angle CGFloat closest = round(self.dial.angle / angleDistance) * angleDistance; [UIView animateWithDuration:0.15 animations:^{ self.dial.angle = closest; }]; } 

可变的buttons只是视图中button数量的替代。 实际上这个方程是超级简单的,它只是滥用舍入函数来逼近闭angular。