iOS的类似Tinder的滑动动画

Question

我已经按照这篇非常有用的教程添加了类似tinder的滑动效果(http://guti.in/articles/creating-tinder-like-animations/)，然而我有一个问题——当图片消失时，我想用另一张图片来替换它。我该在哪里做这个操作？

- Connor

---

最简单的方法是在第一个可拖动视图下面添加另一个可拖动视图。然后你只需要在它们之间交替使用。（当拖动第一个视图时，第二个视图保持原位直到第一个视图被拖走，反之亦然）。因此，有两个相同的视图，你只需交替拖动哪一个，并隐藏哪一个。 - Dima

这个链接可能会为您节省一些时间：https://github.com/modocache/MDCSwipeToChoose - Tim

尝试一下这个 https://github.com/nickypatson/TinderSwipeView - nickypatson

Answer 1

我基于那个教程建立了一个更简单、更全面的项目。特别是，您可以使用一组图像，并根据图像的索引为每张卡片分配一个图像。这些图片是动态的还是静态的呢?

可能现在并没有什么帮助，但无论如何这里有它的链接: https://github.com/cwRichardKim/TinderSimpleSwipeCards

- cwRichardKim

Answer 2

请查看这个使用Swift 4编写的项目：

https://github.com/nickypatson/TinderSwipeView

以下是处理拖动手势的函数：

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

让我们尝试一下这个方法。首先，我们需要创建一个UIPanGestureRecognizer对象，并将其指向self和beingDragged方法。然后，将其添加到手势识别器中。

希望这能起作用。请告诉我。

谢谢。

- nickypatson

Answer 3

这个答案基于cwRichardKim的代码/回复（感谢cwRichardKim！）。我没有找到如何在每张卡片上添加图片的指南。下面是我的方法（在此示例中，图像URL硬编码，但在实际应用程序中可以从云获取图像URL）：

在DraggableView.h中：

@property (nonatomic,strong)UIImageView* photoImageView; //%%% a placeholder for member photo to place on card

在DraggableView.m文件中：

...
@synthesize photoImageView;
... 
// - (id)initWithFrame:(CGRect)frame ...
// add photo to card
        //You need to specify the frame of the view
        UIView *photoView = [[UIView alloc] initWithFrame:CGRectMake(0,0,self.frame.size.width,self.frame.size.width)];
        photoImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"place_holder_image.png"]];
        // UIImageView *imageView = [[UIImageView alloc] initWithImage:photo];
        //specify the frame of the imageView in the superview , here it will fill the superview
        photoImageView.frame = photoView.bounds;
        // add the imageview to the superview
        [photoView addSubview:photoImageView];
        //add the view to the main view
        [self addSubview:photoView];

在 DraggableViewBackground.h 文件中:

@property(retain,nonatomic)NSArray* exampleCardUrls;

in DraggableViewBackground.m:

...
@synthesize exampleCardUrls;
...
exampleCardUrls = [[NSArray alloc]initWithObjects:@"http://images.clipartpanda.com/clipart-people-nTBX8zkgc.jpeg",@"http://epilepsyu.com/wp-content/uploads/2014/01/happy-people.jpg",@"http://alivecampus.com/wp-content/uploads/2014/09/people-02.jpg",@"https://www.google.com/images/srpr/logo11w.png",@"http://modalpoint.com/wp-content/uploads/2014/11/people-blue-stick-people-hi.png", nil];
...
// ... -(DraggableView *)createDraggableViewWithDataAtIndex:(NSInteger)index ...
// retrieve image for cell in background
    NSURL *url = [NSURL URLWithString:exampleCardUrls[index]];
    [self loadImage:url withIndex:index];
...
#pragma mark - cloud, load image
- (void)loadImage:(NSURL *)imageURL withIndex:(NSInteger)index
{
    // create array of objects to pass to next method
    NSMutableArray* params = [[NSMutableArray alloc]init];
    [params addObject:imageURL];
    NSNumber *indexNumber = [NSNumber numberWithInt:index];
    [params addObject:indexNumber];

    NSOperationQueue *queue = [NSOperationQueue new];
    NSInvocationOperation *operation = [[NSInvocationOperation alloc]
                                        initWithTarget:self
                                        selector:@selector(requestRemoteImage:)
                                        object:params];
    [queue addOperation:operation];
}

- (void)requestRemoteImage:(NSMutableArray*)params
{
    // get data from params
    NSURL* imageURL = params[0];

    NSData *imageData = [[NSData alloc] initWithContentsOfURL:imageURL];
    UIImage *image = [[UIImage alloc] initWithData:imageData];
    params[0] = image;

    [self performSelectorOnMainThread:@selector(placeImageInUI:) withObject:params waitUntilDone:YES];
}

- (void)placeImageInUI:(NSArray*)params
{
    // get data from params
    UIImage* image = params[0];
    NSNumber* indexNumber = params[1];
    NSInteger index = [indexNumber integerValue];

    DraggableView* myDraggableView = allCards[index];
    myDraggableView.photoImageView.image = image;
    allCards[index] = myDraggableView;

}

- tmr