Swift – Effet Tinder

Comment puis-je get l'effet Tinder dans Swift?

Je veux dire, j'ai une image et je veux accepter si je glisse vers la droite et rejette si je glisse vers la gauche.

Je peux le faire avec le code ci-dessous:

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

et

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

Mais de cette façon, l'user ne peut pas annuler l'action . Je veux que si l'user balaie à une distance delta du bord (gauche ou droite), il apparaîtrait une image pour laisser l'user maintenant que, s'il termine le mouvement, l'action aura lieu. Sinon, l'user peut, sans terminer le mouvement, revenir à une distance supérieure à delta, et l'action serait annulée.

Je voudrais remercier les personnes qui ont suggéré des solutions. Suivez la solution que j'ai développée avec l'aide de beaucoup de gens de 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) } } } } 

Cette solution utilise:

Imagem -> UIImageView – être accepté ou rejeté

LbResultado -> UITextView – pour montrer à l'user qu'il est dans la zone d'acceptation ou de rejet

Il n'y a pas de calculs mathématiques pour définir la rotation et la traduction. J'ai utilisé des valeurs qui me donnent un effet visuellement bon.

La zone d'action (acceptation et rejet) est lorsque l'user fait glisser l'image de plus de 100 pixels vers la gauche (rejeter) ou vers la droite (accepter). Si l'user termine le mouvement hors de la zone d'action, l'image returnnera à sa position d'origine.

Je serai heureux si quelqu'un suggère des améliorations à ce code.

Il est préférable d'utiliser UIPanGestureRecognizer ici et de gérer ses états, comme vous l'avez déjà compris. Pour la gestion des maps, il serait judicieux de créer un gestionnaire de classs qui gérera les interactions entre les maps (en déplaçant les maps d'arrière-plan en balayant le recto). Vous pouvez regarder la mise en œuvre de la carte et du gestionnaire ici, il y a des implémentations de glisser, de déplacer des maps de fond et de revenir à des animations. https://github.com/Yalantis/Koloda

Essaye ça:

https://github.com/cwRichardKim/TinderSimpleSwipeCards

Vous pouvez find une meilleure solution ici avec la rotation. Voir 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; } }