適用於iOS的類似Tinder的滑動動畫

Question

我已經按照這個非常有用的教程瞭解如何添加類似滑動的滑動（http://guti.in/articles/creating-tinder-like-animations/）;然而，我有一個問題 - 當圖片消失時，我想用另一張圖片替換它。我如何/在哪裏做到這一點？

Answer 1

我基於該教程構建了一個更簡單，更全面的項目。特別是，您可以使用一系列圖像並根據圖像的索引爲每張卡片分配一張圖像。圖像是動態的還是靜態的？

也許不是在這一點上的幫助，但在這裏它是無論如何： https://github.com/cwRichardKim/TinderSimpleSwipeCards

Answer 2

這個答案建立在代碼/從cwRichardKim回覆（謝謝cwRichardKim！）。我沒有找到如何添加圖像到每張卡的指南。下面粘貼我的方法（在此examlple，圖像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; 

在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 3

檢查了這一點，寫在迅速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 
    } 
} 

讓panGestureRecognizer = UIPanGestureRecognizer（目標：自我，動作：#selector（self.beingDragged）） addGestureRecognizer（panGestureRecognizer）

希望這會起作用。讓我知道

感謝