跟随手指的旋转动画,跟随圆的外部路径的uibutton
我正在寻找一些指导,开始计算跟踪手指运动的动画,并沿着圆的外部路径移动UIButtons的集合
我想它会有一种左轮手枪的感觉。 就像每个人在底部锁定到位
或者喜欢通过其中一个滑动插件滑动
提前致谢
( GitHub上的示例代码)
这并不是那么困难,只涉及很多三角函数。
现在,我现在要描述的不是动画 ,因为你要求它跟踪手指在标题中的位置。 动画将涉及其自己的计时function,但由于您正在使用触摸手势,我们可以使用此事件具有的固有时序,并相应地旋转视图。 (TL; DR:用户保持移动的时间,而不是隐式计时器)。
跟踪手指
首先,让我们定义一个跟踪角度的方便类,我将其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
可以包含在这个视图中(我不确定你是否希望按钮负责旋转?我将使用UIPanGestureRecognizer
,因为它是最方便的方式)。
让我们构建一个视图控制器,它将在我们的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
这取决于你如何连接平移手势,就个人而言,我是在nib文件上创建的。 现在,这个function的主体:
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)); }
关键在于,有两个角度可以跟踪:
- 视角本身的角度
- 手指与视图中心之间形成的角度。
在这种情况下,我们希望视图的角度为originalAngle + deltaFinger
,这就是上面的代码所做的,我只是在结构中封装了所有的状态。
检查半径
如果要跟踪“视图边框”,则应使用CGPointDistance
方法并检查begin.center
和now.finger
之间的距离是否为特定值。
这是你的功课!
抢回来
好的,现在,这部分是一个实际的动画,因为用户不再控制它。
可以通过设置一组角度来实现捕捉,当手指释放手指时(手势结束),快速回到它们,如下所示:
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
变量,只是视图中按钮数量的替身。 该方程实际上非常简单,它只是滥用舍入函数来逼近闭合角度。