跟随手指的旋转动画,沿着圆的外部路径的uibutton

Question

我正在寻找一些指导,开始计算跟踪手指运动的动画,并沿着圆圈的外部路径移动UIButtons的集合

我想它会有一种左轮手枪的感觉.就像每个人在底部锁定到位

或者喜欢通过其中一个滑动插件滑动

提前致谢

Answer 1

(GitHub上的示例代码)

这并不是那么困难,只涉及很多三角函数.

现在,我现在要描述的不是动画,因为你要求它跟踪手指在标题中的位置.动画将涉及其自己的计时功能,但由于您正在使用触摸手势,我们可以使用此事件具有的固有时序,并相应地旋转视图.(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);
}

该UIButtons时,可以包含在此视图中(我不知道,如果你想的按钮负责转动？我会使用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文件上做了它.现在,这个功能的主体:

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(a.y - b.y, a.x - b.x);
}

CGFloat CGPointDistance(CGPoint a, CGPoint b)
{
    return sqrt(pow((a.x - b.x), 2) + pow((a.y - b.y), 2));
}

关键在于,有两个角度可以跟踪:

1. 视角本身的角度
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变量,只是一个替身是在视图中的按钮的数量.该方程实际上非常简单,它只是滥用舍入函数来逼近闭合角度.