ios - 跟随圆圈外部路径的 uibuttons 的旋转动画，跟随手指

Question

我正在寻找一些指导来开始制作一个动画，该动画跟踪手指移动并沿着圆圈的外部路径移动一组 UIButtons

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

或者喜欢在这些幻灯片插入之一中滑动

提前致谢

Answer 1

(GitHub 上的示例代码)

其实并没有那么难，只是涉及到很多三角函数。

现在，我现在要描述的是不是动画，因为您要求它跟踪手指在标题中的位置。动画会涉及它自己的计时功能，但由于您使用的是触摸手势，我们可以使用此事件具有的固有计时，并相应地旋转 View 。 (TL;DR:用户记录移动的时间，而不是隐式计时器)。

跟踪手指

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

拨号 View .h

@interface DialView : UIView

@property (nonatomic,assign) CGFloat angle;

@end

拨号 View .m

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

UIButton 可以包含在此 View 中(我不确定您是否希望按钮负责旋转？我将使用 UIPanGestureRecognizer，因为这是最方便的方式)。

让我们在 DialView 中构建将处理平移手势的 View Controller ，我们还保留对 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. 手指与 View 中心之间形成的角度。

在这种情况下，我们希望 View 的角度为 originalAngle + deltaFinger，这就是上面代码所做的，我只是将所有状态封装在一个结构中。

检查半径

如果你想跟踪“ View 的边界”，你应该使用 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 变量只是 View 中按钮数量的替代。这个方程其实 super 简单，就是滥用了舍入函数来逼近闭合角。