Question

我正在试图找出与Jelly的应用程序类似的工具UIKit Dynamics（特别是向下滑动以在屏幕外拖动视图）。

我理解UIKit Dynamics是如何工作的，但是没有很好的物理背景，因此无法梳理不同的行为以获得理想的结果！

Answer 1

这种拖动可以使用UIAttachmentBehavior来完成，您可以在UIGestureRecognizerStateBegan上创建附件行为，在UIGestureRecognizerStateChanged上更改锚点。当用户进行平移手势时，这可以实现旋转拖动。

在UIGestureRecognizerStateEnded后，您可以移除UIAttachmentBehavior，但随后应用UIDynamicItemBehavior让动画无缝继续使用用户拖动它时相同的线性和角速度它（不要忘记使用action块来确定视图何时不再与超视图相交，因此您可以删除动态行为，也可能删除视图）。或者，如果您的逻辑确定要将其返回原始位置，则可以使用UISnapBehavior来执行此操作。

坦率地说，基于这个简短的片段，确切地确定他们正在做什么有点困难，但这些是基本的构建块。

例如，假设您创建了一些想要拖离屏幕的视图：

UIView *viewToDrag = [[UIView alloc] initWithFrame:...];
viewToDrag.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:viewToDrag];

UIGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
[viewToDrag addGestureRecognizer:pan];

self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

然后，您可以创建手势识别器将其拖离屏幕：

- (void)handlePan:(UIPanGestureRecognizer *)gesture {
    static UIAttachmentBehavior *attachment;
    static CGPoint               startCenter;

    // variables for calculating angular velocity

    static CFAbsoluteTime        lastTime;
    static CGFloat               lastAngle;
    static CGFloat               angularVelocity;

    if (gesture.state == UIGestureRecognizerStateBegan) {
        [self.animator removeAllBehaviors];

        startCenter = gesture.view.center;

        // calculate the center offset and anchor point

        CGPoint pointWithinAnimatedView = [gesture locationInView:gesture.view];

        UIOffset offset = UIOffsetMake(pointWithinAnimatedView.x - gesture.view.bounds.size.width / 2.0,
                                       pointWithinAnimatedView.y - gesture.view.bounds.size.height / 2.0);

        CGPoint anchor = [gesture locationInView:gesture.view.superview];

        // create attachment behavior

        attachment = [[UIAttachmentBehavior alloc] initWithItem:gesture.view
                                               offsetFromCenter:offset
                                               attachedToAnchor:anchor];

        // code to calculate angular velocity (seems curious that I have to calculate this myself, but I can if I have to)

        lastTime = CFAbsoluteTimeGetCurrent();
        lastAngle = [self angleOfView:gesture.view];

        typeof(self) __weak weakSelf = self;

        attachment.action = ^{
            CFAbsoluteTime time = CFAbsoluteTimeGetCurrent();
            CGFloat angle = [weakSelf angleOfView:gesture.view];
            if (time > lastTime) {
                angularVelocity = (angle - lastAngle) / (time - lastTime);
                lastTime = time;
                lastAngle = angle;
            }
        };

        // add attachment behavior

        [self.animator addBehavior:attachment];
    } else if (gesture.state == UIGestureRecognizerStateChanged) {
        // as user makes gesture, update attachment behavior's anchor point, achieving drag 'n' rotate

        CGPoint anchor = [gesture locationInView:gesture.view.superview];
        attachment.anchorPoint = anchor;
    } else if (gesture.state == UIGestureRecognizerStateEnded) {
        [self.animator removeAllBehaviors];

        CGPoint velocity = [gesture velocityInView:gesture.view.superview];

        // if we aren't dragging it down, just snap it back and quit

        if (fabs(atan2(velocity.y, velocity.x) - M_PI_2) > M_PI_4) {
            UISnapBehavior *snap = [[UISnapBehavior alloc] initWithItem:gesture.view snapToPoint:startCenter];
            [self.animator addBehavior:snap];

            return;
        }

        // otherwise, create UIDynamicItemBehavior that carries on animation from where the gesture left off (notably linear and angular velocity)

        UIDynamicItemBehavior *dynamic = [[UIDynamicItemBehavior alloc] initWithItems:@[gesture.view]];
        [dynamic addLinearVelocity:velocity forItem:gesture.view];
        [dynamic addAngularVelocity:angularVelocity forItem:gesture.view];
        [dynamic setAngularResistance:1.25];

        // when the view no longer intersects with its superview, go ahead and remove it

        typeof(self) __weak weakSelf = self;

        dynamic.action = ^{
            if (!CGRectIntersectsRect(gesture.view.superview.bounds, gesture.view.frame)) {
                [weakSelf.animator removeAllBehaviors];
                [gesture.view removeFromSuperview];

                [[[UIAlertView alloc] initWithTitle:nil message:@"View is gone!" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil] show];
            }
        };
        [self.animator addBehavior:dynamic];

        // add a little gravity so it accelerates off the screen (in case user gesture was slow)

        UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[gesture.view]];
        gravity.magnitude = 0.7;
        [self.animator addBehavior:gravity];
    }
}

- (CGFloat)angleOfView:(UIView *)view
{
    // http://stackoverflow.com/a/2051861/1271826

    return atan2(view.transform.b, view.transform.a);
}

产生（如果不向下拖动则显示快照行为，如果成功将其向下拖动则显示动态行为）：

UIDynamics demo

这只是演示的一个shell，但是它说明了在平移手势期间使用UIAttachmentBehavior，如果您想要将其快速恢复，请使用UISnapBehavior，如果你想要反转手势的话动画，但使用UIDynamicItemBehavior完成将其拖动到屏幕外的动画，但是尽可能平滑地从UIAttachmentBehavior到最终动画的过渡。我还在最后UIDynamicItemBehavior的同时添加了一点引力，以便它平滑地加速离开屏幕（所以它不会花太长时间）。

根据需要自定义此项。值得注意的是，该平移手势处理程序非常笨重，我可能会考虑创建一个自定义识别器来清理该代码。但希望这说明了使用UIKit Dynamics将视图拖离屏幕底部的基本概念。

Answer 2

@Rob的答案很棒（upvote it！），但我会删除手动角速度计算，让UIDynamics使用UIPushBehavior完成工作。只需设置UIPushBehavior的目标偏移量，UIDynamics将为您完成旋转计算。

从@ Rob的相同设置开始：

UIView *viewToDrag = [[UIView alloc] initWithFrame:...];
viewToDrag.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:viewToDrag];

UIGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
[viewToDrag addGestureRecognizer:pan];

self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

但调整手势识别器处理程序以使用UIPushBehavior

- (void)handlePan:(UIPanGestureRecognizer *)gesture {
    static UIAttachmentBehavior *attachment;
    static CGPoint startCenter;

    if (gesture.state == UIGestureRecognizerStateBegan) {
        [self.animator removeAllBehaviors];

        startCenter = gesture.view.center;

        // calculate the center offset and anchor point

        CGPoint pointWithinAnimatedView = [gesture locationInView:gesture.view];

        UIOffset offset = UIOffsetMake(pointWithinAnimatedView.x - gesture.view.bounds.size.width / 2.0,
                                       pointWithinAnimatedView.y - gesture.view.bounds.size.height / 2.0);

        CGPoint anchor = [gesture locationInView:gesture.view.superview];

        // create attachment behavior

        attachment = [[UIAttachmentBehavior alloc] initWithItem:gesture.view
                                               offsetFromCenter:offset
                                               attachedToAnchor:anchor];

        // add attachment behavior

        [self.animator addBehavior:attachment];
    } else if (gesture.state == UIGestureRecognizerStateChanged) {
        // as user makes gesture, update attachment behavior's anchor point, achieving drag 'n' rotate

        CGPoint anchor = [gesture locationInView:gesture.view.superview];
        attachment.anchorPoint = anchor;
    } else if (gesture.state == UIGestureRecognizerStateEnded) {
        [self.animator removeAllBehaviors];

        CGPoint velocity = [gesture velocityInView:gesture.view.superview];

        // if we aren't dragging it down, just snap it back and quit

        if (fabs(atan2(velocity.y, velocity.x) - M_PI_2) > M_PI_4) {
            UISnapBehavior *snap = [[UISnapBehavior alloc] initWithItem:gesture.view snapToPoint:startCenter];
            [self.animator addBehavior:snap];

            return;
        }

        // otherwise, create UIPushBehavior that carries on animation from where the gesture left off

        CGFloat velocityMagnitude = sqrtf((velocity.x * velocity.x) + (velocity.y * velocity.y));
        UIPushBehavior *pushBehavior = [[UIPushBehavior alloc] initWithItems:@[gesture.view] mode:UIPushBehaviorModeInstantaneous];
        pushBehavior.pushDirection = CGVectorMake((velocity.x / 10) , (velocity.y / 10));
        // some constant to limit the speed of the animation
        pushBehavior.magnitude = velocityMagnitude / 35.0;
        CGPoint finalPoint = [gesture locationInView:gesture.view.superview];
        CGPoint center = gesture.view.center;
        [pushBehavior setTargetOffsetFromCenter:UIOffsetMake(finalPoint.x - center.x, finalPoint.y - center.y) forItem:gesture.view];

        // when the view no longer intersects with its superview, go ahead and remove it

        typeof(self) __weak weakSelf = self;

        pushBehavior.action = ^{
            if (!CGRectIntersectsRect(gesture.view.superview.bounds, gesture.view.frame)) {
                [weakSelf.animator removeAllBehaviors];
                [gesture.view removeFromSuperview];

                [[[UIAlertView alloc] initWithTitle:nil message:@"View is gone!" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil] show];
            }
        };
        [self.animator addBehavior:pushBehavior];

        // add a little gravity so it accelerates off the screen (in case user gesture was slow)

        UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[gesture.view]];
        gravity.magnitude = 0.7;
        [self.animator addBehavior:gravity];
    }
}

Answer 3

SWIFT 3.0：

import UIKit

class SwipeToDisMissView: UIView {

var animator : UIDynamicAnimator?

func initSwipeToDismissView(_ parentView:UIView)  {
    let panGesture = UIPanGestureRecognizer(target: self, action: #selector(SwipeToDisMissView.panGesture))
    self.addGestureRecognizer(panGesture)
    animator = UIDynamicAnimator(referenceView: parentView)
}

func panGesture(_ gesture:UIPanGestureRecognizer)  {
    var attachment : UIAttachmentBehavior?
    var lastTime = CFAbsoluteTime()
    var lastAngle: CGFloat = 0.0
    var angularVelocity: CGFloat = 0.0

    if gesture.state == .began {
        self.animator?.removeAllBehaviors()
        if let gestureView = gesture.view {
            let pointWithinAnimatedView = gesture.location(in: gestureView)
            let offset = UIOffsetMake(pointWithinAnimatedView.x - gestureView.bounds.size.width / 2.0, pointWithinAnimatedView.y - gestureView.bounds.size.height / 2.0)
            let anchor = gesture.location(in: gestureView.superview!)
            // create attachment behavior
            attachment = UIAttachmentBehavior(item: gestureView, offsetFromCenter: offset, attachedToAnchor: anchor)
            // code to calculate angular velocity (seems curious that I have to calculate this myself, but I can if I have to)
            lastTime = CFAbsoluteTimeGetCurrent()
            lastAngle = self.angleOf(gestureView)
            weak var weakSelf = self
            attachment?.action = {() -> Void in
                let time = CFAbsoluteTimeGetCurrent()
                let angle: CGFloat = weakSelf!.angleOf(gestureView)
                if time > lastTime {
                    angularVelocity = (angle - lastAngle) / CGFloat(time - lastTime)
                    lastTime = time
                    lastAngle = angle
                }
            }
            self.animator?.addBehavior(attachment!)
        }
    }
    else if gesture.state == .changed {
        if let gestureView = gesture.view {
            if let superView = gestureView.superview {
                let anchor = gesture.location(in: superView)
                if let attachment = attachment {
                    attachment.anchorPoint = anchor
                }
            }
        }
    }
    else if gesture.state == .ended {
        if let gestureView = gesture.view {
            let anchor = gesture.location(in: gestureView.superview!)
            attachment?.anchorPoint = anchor
            self.animator?.removeAllBehaviors()
            let velocity = gesture.velocity(in: gestureView.superview!)
            let dynamic = UIDynamicItemBehavior(items: [gestureView])
            dynamic.addLinearVelocity(velocity, for: gestureView)
            dynamic.addAngularVelocity(angularVelocity, for: gestureView)
            dynamic.angularResistance = 1.25
            // when the view no longer intersects with its superview, go ahead and remove it
            weak var weakSelf = self
            dynamic.action = {() -> Void in
                if !gestureView.superview!.bounds.intersects(gestureView.frame) {
                    weakSelf?.animator?.removeAllBehaviors()
                    gesture.view?.removeFromSuperview()
                }
            }
            self.animator?.addBehavior(dynamic)

            let gravity = UIGravityBehavior(items: [gestureView])
            gravity.magnitude = 0.7
            self.animator?.addBehavior(gravity)
        }
    }
}

func angleOf(_ view: UIView) -> CGFloat {
    return atan2(view.transform.b, view.transform.a)
}
}

实现UIKit Dynamics以将视图拖离屏幕

3 个答案: