Swift - Tinder效果 [英] Swift - Tinder effect

问题描述

如何在Swift中实现Tinder效果？

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

$ b b

我可以用下面的代码：

  @IBAction func SwipeRight（sender：UISwipeGestureRecognizer）{
 UIView.animateWithDuration（1）{
 self.Imagem.center = CGPointMake（self.Imagem.center.x  -  150，self.Imagem.center.y）
} 
 //其他接受后的事物
} 
  

和

  @IBAction func SwipeLeft（sender：UISwipeGestureRecognizer）{
 UIView.animateWithDuration（1）{
 self.Imagem.center = CGPointMake（self.Imagem.center .x + 150，self.Imagem.center.y）
} 
 //拒绝后的其他事情
} 
  

但这样用户无法取消操作。我想要的是，如果用户从边缘（左或右）滑动到增量距离，它会出现一个图像，让用户现在，如果他结束运动，将发生的行动。

解决方案

如果没有结束移动，用户可以返回大于delta的距离， p>我想感谢建议解决方案的人。按照我开发的解决方案，来自Stack Overflow的很多人的巨大帮助：

  @IBAction func Arrastei（sender：UIPanGestureRecognizer ）{
 var origem = CGPoint（x：0，y：0）
 var translation：CGPoint = sender.translationInView（Imagem）
 
 var txy：CGAffineTransform = CGAffineTransformMakeTranslation .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 - > UIImageView - 被接受或拒绝

code> - 显示他在接受或拒绝区域的用户

没有数学计算来设置旋转和翻译。

动作（接受和拒绝）区域是当用户将图片向左移动100像素以上时（拒绝）或右（接受）。如果用户结束动作区域的动作，图像将返回到其原始位置。

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

How can I achieve Tinder effect in Swift?

I mean, I have an image and want to accept if I swipe to right and reject if I swipe to left.

I can do it with the code bellow:

@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
}

and

@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
}

But this way the user can't cancel the action. I want that if the user swipes to a delta distance from the edge (left or right), it would appear an image to let the user now that, if he ends the movement, the action will take place. Otherwise, the user can, without ending the movement, go back to a distance bigger than delta, and the action would be cancelled.

解决方案

I would like to thanks the people who suggested solutions. Follow the solution I developed with a huge help of a lot of people from 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)
            }
        }
    }
}

This solution uses:

Imagem --> UIImageView - to be accepted or rejected

LbResultado --> UITextView - to show the user he is in acceptance or rejection area

There is no math calculations to set rotation and translation. I used values that give me a visually good effect.

The action (acceptance and rejection) area is when the user drag image more than 100 pixels to left (reject) or right (accept). If the user ends the movement out the action area, the image will go back to its original position.

I will be glad if someone suggests improvements to this code.

这篇关于Swift - Tinder效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！