计算Pan手势到指定点的角度

计算Pan手势到指定点的角度

效果图:

源码:

//
//  RootViewController.m
//  Circle
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "Radian.h"
#import "FrameAccessor.h"

@interface RootViewController ()

@property (nonatomic, strong) CALayer *layer;

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 显示参考用的view
    UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
    showView.layer.borderWidth = .f;
    showView.layer.cornerRadius = .f;
    showView.layer.borderColor = [UIColor redColor].CGColor;
    showView.center = self.view.center;
    [self.view addSubview:showView];

    // 新建layer
    _layer = [CALayer layer];
    _layer.backgroundColor = [UIColor blackColor].CGColor;

    // 重置锚点
    _layer.anchorPoint = CGPointMake(.f, .f);

    // 设置layer的frame值(在showView正中间摆放)
    _layer.frame = CGRectMake(showView.middleX, showView.middleY, , );

    // 添加进showView中
    [showView.layer addSublayer:_layer];

    // 给showView添加手势
    UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
    [panGesture setMaximumNumberOfTouches:];
    [showView addGestureRecognizer:panGesture];
}

- (void)handlePan:(UIPanGestureRecognizer *)recognizer
{
    // 获取触摸点点
    CGPoint translation = [recognizer locationInView:self.view];

    // 计算触摸点到中心点的弧度
    CGFloat angleInRadians = [Radian tanA:translation.y - self.view.center.y
                                        B:translation.x - self.view.center.x];

    // layer的动画
    [CATransaction setDisableActions:YES];
    _layer.transform = CATransform3DMakeRotation(angleInRadians, 0.0, 0.0, 1.0);
}

@end

以下3步非常关键:

引入POP库设计阻尼动画

效果如下:

//
//  RootViewController.m
//  Circle
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "RootViewController.h"
#import "Radian.h"
#import "FrameAccessor.h"
#import "POP.h"

@interface RootViewController ()

@property (nonatomic, strong) CALayer *layer;

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 显示参考用的view
    UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(, , , )];
    showView.layer.borderWidth = .f;
    showView.layer.cornerRadius = .f;
    showView.layer.borderColor = [UIColor redColor].CGColor;
    showView.center = self.view.center;
    [self.view addSubview:showView];

    // 新建layer
    _layer = [CALayer layer];
    _layer.backgroundColor = [UIColor blackColor].CGColor;

    // 重置锚点
    _layer.anchorPoint = CGPointMake(.f, .f);

    // 设置layer的frame值(在showView正中间摆放)
    _layer.frame = CGRectMake(showView.middleX, showView.middleY, , );

    // 添加进showView中
    [showView.layer addSublayer:_layer];

    // 给showView添加手势
    UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
    [panGesture setMaximumNumberOfTouches:];
    [showView addGestureRecognizer:panGesture];
}

- (void)handlePan:(UIPanGestureRecognizer *)recognizer
{
    // 获取触摸点点
    CGPoint translation = [recognizer locationInView:self.view];

    // 将度数转换为弧度
#define   RADIAN(degrees)  ((M_PI * (degrees))/ 180.f)

    // 将弧度转换为度数
#define   DEGREES(radian)  ((radian) * 180.f / M_PI)

    if(recognizer.state == UIGestureRecognizerStateChanged)
    {
        // 计算触摸点到中心点的弧度
        CGFloat angleInRadians = [Radian tanA:translation.y - self.view.center.y
                                            B:translation.x - self.view.center.x];

        POPBasicAnimation *positionAnimation = \
        [POPBasicAnimation animationWithPropertyNamed:kPOPLayerRotation];
        // 设置速度动画
        positionAnimation.toValue = @(angleInRadians);
        positionAnimation.duration = 0.01f;

        // 添加动画
        [_layer pop_removeAnimationForKey:@"kPOPLayerRotation"];
        [_layer pop_addAnimation:positionAnimation
                          forKey:@"kPOPLayerRotation"];
    }

    // 拖拽动作结束
    if(recognizer.state == UIGestureRecognizerStateEnded)
    {
        // 计算触摸点到中心点的弧度
        CGFloat angleInRadians = [Radian tanA:translation.y - self.view.center.y
                                            B:translation.x - self.view.center.x];

        // 计算出移动的速度
        CGPoint velocity = [recognizer velocityInView:self.view];
        CGFloat x = velocity.x;
        CGFloat y = velocity.y;

        // 衰退减速动画
        POPDecayAnimation *positionAnimation = \
        [POPDecayAnimation animationWithPropertyNamed:kPOPLayerRotation];
        positionAnimation.velocity = @(+(x*ABS(cosf(angleInRadians)/.f) +
                                         y*ABS(sinf(angleInRadians)/.f)));

        // 添加动画
        [_layer pop_removeAnimationForKey:@"kPOPLayerRotation"];
        [_layer pop_addAnimation:positionAnimation
                          forKey:@"layerPositionAnimation"];
    }
}

@end

重点地方:

其实,实现这个效果真心挺难的......