ios开发 方形到圆的动画_ios – 跟随手指的旋转动画,沿着圆的外部路径的uibutton...

(

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));

}

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

>视图本身的角度

>手指与视图中心之间形成的角度.

在这种情况下,我们希望视图的角度为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;

}];

}

按钮变量,只是视图中按钮数量的替身.该方程实际上非常简单,它只是滥用舍入函数来逼近闭合角度.