Tinder-Like Swipe Animation for iOS

Question

I've followed this very helpful tutorial on how to add tinder-like swiping (http://guti.in/articles/creating-tinder-like-animations/); however, I have one problem- when the picture goes away, I want to replace it with another picture. How/where do I do that?

Answer 1

this answer builds on code/reply from cwRichardKim (thank you cwRichardKim!). i did not find a guide how to add images to each card. pasting my approach below (in this examlple, image url hard coded, but in real app could get image url from cloud):

in DraggableView.h:

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

in 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];

in 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;

}

Answer 2

check this out , written in 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
    }
}

let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(self.beingDragged)) addGestureRecognizer(panGestureRecognizer)

Hope this will work . Let me know

thanks

Answer 3

I built a simpler and more comprehensive project based on that tutorial. In particular, you could use an array of images and assign each card an image based on the index of the image. Will the images be dynamic or static?

Might not help at this point, but here it is anyway: https://github.com/cwRichardKim/TinderSimpleSwipeCards