Swift – Tinder效果

如何在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 } 

但是这样用户不能取消操作 。 我想,如果用户从边缘(左边或右边)滑动到三angular距离,它会出现一个图像,让用户现在,如果他结束了运动,行动将发生。 否则,用户可以在不结束运动的情况下返回到大于三angular形的距离,并且动作将被取消。

我想感谢那些提出解决scheme的人。 遵循我开发的解决scheme,来自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) } } } } 

该解决scheme使用:

Imagem – > UIImageView – 被接受或拒绝

LbResultado – > UITextView – 显示用户他在接受或拒绝区域

没有math计算来设置旋转和平移。 我使用的值给了我一个视觉上很好的效果。

动作(接受和拒绝)区域是当用户拖动图像超过100像素左(拒绝)或右(接受)。 如果用户结束了动作区域的移动,图像将回到其原始位置。

如果有人build议对此代码进行改进,我会很高兴。

正如你已经想到的那样,最好在这里使用UIPanGestureRecognizer并pipe理它的状态。 对于pipe理卡片来说,创buildclass级pipe理员来处理卡片之间的交互是很好的解决scheme(在正面滑动时移动背景卡片)。 你可以看看这里的卡片和pipe理器的实现,有拖放,移动背景卡和还原animation的实现。 https://github.com/Yalantis/Koloda

尝试这个:

https://github.com/cwRichardKim/TinderSimpleSwipeCards

你可以在这里find更好的解决scheme。 请参阅DraggableView.m

 -(void)beingDragged:(UIPanGestureRecognizer *)gestureRecognizer { //%%% this extracts the coordinate data from your swipe movement. (ie 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; } }