Swift - Tinder效果

Question

如何在Swift中实现Tinder效果？

我的意思是，我有一张图片，想要接受，如果我向右滑动并拒绝，如果我向左滑动。

我可以用下面的代码来完成：

@IBAction func SwipeRight(sender: UISwipeGestureRecognizer) {
    UIView.animateWithDuration(1) {
        self.Imagem.center = CGPointMake(self.Imagem.center.x - 150, self.Imagem.center.y )
    }
    //other things after acception
}

和

@IBAction func SwipeLeft(sender: UISwipeGestureRecognizer) {
    UIView.animateWithDuration(1) {
        self.Imagem.center = CGPointMake(self.Imagem.center.x + 150, self.Imagem.center.y )
    }
    //other things after rejection
}

但这样用户无法取消操作。我希望如果用户从边缘（左侧或右侧）滑动到三角形距离，则会出现一个图像，让用户现在可以看到，如果他结束了移动，则会发生动作。否则，用户可以在不结束移动的情况下返回大于delta的距离，并且操作将被取消。

Answer 1

我要感谢那些提出解决方案的人。在Stack Overflow的很多人的帮助下，遵循我开发的解决方案：

@IBAction func Arrastei(sender: UIPanGestureRecognizer) {
    var origem =  CGPoint(x: 0, y: 0)
    var translation : CGPoint = sender.translationInView(Imagem)

    var txy : CGAffineTransform = CGAffineTransformMakeTranslation(translation.x, -abs(translation.x) / 15)
    var rot : CGAffineTransform = CGAffineTransformMakeRotation(-translation.x / 1500)
    var t : CGAffineTransform = CGAffineTransformConcat(rot, txy);
    Imagem.transform = t

    if (translation.x > 100) {
        LbResultado.textColor = btVerdadeiro.textColor
        LbResultado.text = btVerdadeiro.text
        LbResultado.hidden = false
    } else {
        if (translation.x < -100) {
            LbResultado.textColor = btFalso.textColor
            LbResultado.text = btFalso.text
            LbResultado.hidden = false
        } else {
            LbResultado.hidden = true
        }
    }


    if sender.state == UIGestureRecognizerState.Ended {
        if (translation.x > 100) {
            objJogo.Rodada_Vigente!.Responder(true)
        } else {

            if (translation.x < -100) {
                objJogo.Rodada_Vigente!.Responder(false)
            } else {
                sender.view.transform = CGAffineTransformMakeTranslation(origem.x, origem.y)
                sender.view.transform = CGAffineTransformMakeRotation(0)
            }
        }
    }
}

此解决方案使用：

Imagem - ＆gt; UIImageView - 被接受或拒绝

LbResultado - ＆gt; UITextView - 向用户显示他处于接受或拒绝区域

没有数学计算来设置旋转和平移。我使用了能够带来视觉效果的值。

动作（接受和拒绝）区域是指用户将图像拖动到左侧（拒绝）或右侧（接受）超过100个像素。如果用户结束了移出操作区域的移动，则图像将返回其原始位置。

如果有人建议改进此代码，我会很高兴。

Answer 2

最好在这里使用UIPanGestureRecognizer并管理其状态，正如您已经想到的那样。对于管理卡，创建类管理器将是一个很好的解决方案，它将处理卡之间的交互（在前面滑动时移动背景卡）。你可以在这里查看卡和管理器的实现，有拖动，移动背景卡和恢复动画的实现。 https://github.com/Yalantis/Koloda

Answer 3

试试这个：

https://github.com/cwRichardKim/TinderSimpleSwipeCards

您可以通过轮换找到更好的解决方案。请参阅 DraggableView.m

-(void)beingDragged:(UIPanGestureRecognizer *)gestureRecognizer
{
    //%%% this extracts the coordinate data from your swipe movement. (i.e. How much did you move?)
    xFromCenter = [gestureRecognizer translationInView:self].x; //%%% positive for right swipe, negative for left
    yFromCenter = [gestureRecognizer translationInView:self].y; //%%% positive for up, negative for down

    //%%% checks what state the gesture is in. (are you just starting, letting go, or in the middle of a swipe?)
    switch (gestureRecognizer.state) {
            //%%% just started swiping
        case UIGestureRecognizerStateBegan:{
            self.originalPoint = self.center;
            break;
        };
            //%%% in the middle of a swipe
        case UIGestureRecognizerStateChanged:{
            //%%% dictates rotation (see ROTATION_MAX and ROTATION_STRENGTH for details)
            CGFloat rotationStrength = MIN(xFromCenter / ROTATION_STRENGTH, ROTATION_MAX);

            //%%% degree change in radians
            CGFloat rotationAngel = (CGFloat) (ROTATION_ANGLE * rotationStrength);

            //%%% amount the height changes when you move the card up to a certain point
            CGFloat scale = MAX(1 - fabsf(rotationStrength) / SCALE_STRENGTH, SCALE_MAX);

            //%%% move the object's center by center + gesture coordinate
            self.center = CGPointMake(self.originalPoint.x + xFromCenter, self.originalPoint.y + yFromCenter);

            //%%% rotate by certain amount
            CGAffineTransform transform = CGAffineTransformMakeRotation(rotationAngel);

            //%%% scale by certain amount
            CGAffineTransform scaleTransform = CGAffineTransformScale(transform, scale, scale);

            //%%% apply transformations
            self.transform = scaleTransform;
            [self updateOverlay:xFromCenter];

            break;
        };
            //%%% let go of the card
        case UIGestureRecognizerStateEnded: {
            [self afterSwipeAction];
            break;
        };
        case UIGestureRecognizerStatePossible:break;
        case UIGestureRecognizerStateCancelled:break;
        case UIGestureRecognizerStateFailed:break;
    }
}

Answer 4

查看Swift 4库!!

让panGestureRecognizer = UIPanGestureRecognizer（target：self，action：#selector（self.beingDragged））         addGestureRecognizer（panGestureRecognizer）

func beingDragged（_ gestureRecognizer：UIPanGestureRecognizer）{

    xFromCenter = gestureRecognizer.translation(in: self).x
    yFromCenter = gestureRecognizer.translation(in: self).y
    switch gestureRecognizer.state {
    //%%% just started swiping
    case .began:
        originalPoint = self.center;
        break;

    //%%% in the middle of a swipe
    case .changed:
        let rotationStrength = min(xFromCenter / ROTATION_STRENGTH, ROTATION_MAX)
        let rotationAngel = .pi/8 * rotationStrength
        let scale = max(1 - fabs(rotationStrength) / SCALE_STRENGTH, SCALE_MAX)
        center = CGPoint(x: originalPoint.x + xFromCenter, y: originalPoint.y + yFromCenter)
        let transforms = CGAffineTransform(rotationAngle: rotationAngel)
        let scaleTransform: CGAffineTransform = transforms.scaledBy(x: scale, y: scale)
        self.transform = scaleTransform
        updateOverlay(xFromCenter)
        break;

    case .ended:
        afterSwipeAction()
        break;

    case .possible:break
    case .cancelled:break
    case .failed:break
    }
}

希望这会奏效。让我知道

https://github.com/nickypatson/TinderSwipeView

感谢