5

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

在此处输入图像描述

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

或喜欢在其中一个滑动插件中滑动

在此处输入图像描述

提前致谢

4

1 回答 1

6

（ GitHub上的示例代码）

这并不难，只是涉及到很多三角函数。

现在，我现在要描述的不是动画，因为您要求它跟踪您的手指在标题中的位置。动画将涉及其自己的计时功能，但由于您使用的是触摸手势，我们可以使用此事件具有的固有计时并相应地旋转视图。（TL；DR：用户保持移动时间，而不是隐式计时器）。

跟踪手指

首先，让我们定义一个方便的类来跟踪角度，我要调用它 DialView。它实际上只是 UIView 的一个子类，具有以下属性：

拨号视图.h

@interface DialView : UIView

@property (nonatomic,assign) CGFloat angle;

@end

拨号视图.m

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

s 可以包含在UIButton此视图中（我不确定您是否希望按钮负责旋转？我将使用 a 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 文件上制作的。现在，这个函数的主体：

我的视图控制器.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变量只是视图中按钮数量的替代。这个方程实际上非常简单，它只是滥用舍入函数来逼近闭角。

于 2013-07-30T05:46:29.087 回答