Tạo hiệu ứng UICollectionViewCell trên Tap

Question

Tôi muốn bắt đầu một số hoạt ảnh trên UICollectionViewCell khi người dùng chạm vào một ô. Ý tưởng của tôi là chọn ô tương ứng trong didSelectItemAtIndexPath và kích hoạt hoạt ảnh. Tuy nhiên, điều này không hoạt động:

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
// animate the cell user tapped on 
ProductCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ProductReuseID" forIndexPath:indexPath]; 

[UIView animateWithDuration:5.0 
         delay:0 
        options:(UIViewAnimationOptionAllowUserInteraction) 
       animations:^{ 
        NSLog(@"animation start"); 
        [cell.layer setBackgroundColor:[UIColor colorWithRed: 180.0/255.0 green: 238.0/255.0 blue:180.0/255.0 alpha: 1.0].CGColor]; 
       } 
       completion:^(BOOL finished){ 
        NSLog(@"animation end"); 
        [cell.layer setBackgroundColor:[UIColor whiteColor].CGColor]; 
       } 
]; 
} 

Thực tế, hoạt ảnh bắt đầu và kết thúc cùng lúc (mặc dù animateWithDuration được đặt thành 5). nỗ lực tiếp theo là để bỏ qua các hình ảnh động và chỉ cần đặt ví dụ một phong cách biên giới khác nhau: (? có lẽ vì tôi phải vẽ lại các tế bào bằng tay)

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
// animate the cell user tapped on 
ProductCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ProductReuseID" forIndexPath:indexPath]; 

[cell.layer setBorderWidth:5.0f]; 
} 

Tuy nhiên, điều này không thay đổi bất cứ điều gì.

Bạn có ý tưởng nào về cách tạo hoạt ảnh cho UICollectionViewCell khi người dùng nhấn vào nó không?

Trân trọng! Christian

Answer 1

Nó sẽ xuất hiện mà bạn đang thu thập các tế bào sai. Gửi thông báo dequeueReusableCellWithReuseIdentifier:forIndexPath: không không lấy ô được sử dụng trong chế độ xem tại indexPath trong tham số thứ hai, nhưng khử đi ô đã sử dụng trước đó nhưng có thể tái sử dụng; nếu không có ô có thể tái sử dụng, một ô mới sẽ được tạo. Xem Tài liệu tham khảo 1 dưới đây.

Thay thế:

ProductCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"ProductReuseID" forIndexPath:indexPath]; 

Với:

ProductCollectionViewCell* cell = [collectionView cellForItemAtIndexPath:indexPath]; 

Trong mã của bạn ở trên, nên cung cấp cho bạn những tế bào thích hợp để làm việc với.

Đây là ví dụ đầu tiên của bạn, được viết lại.

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath(NSIndexPath *)indexPath 
{ 
    // animate the cell user tapped on 
    UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];  
    [UIView animateWithDuration:5.0 
      delay:0 
      options:(UIViewAnimationOptionAllowUserInteraction) 
       animations:^{ 
        NSLog(@"animation start"); 
        [cell setBackgroundColor:[UIColor colorWithRed: 180.0/255.0 green: 238.0/255.0 blue:180.0/255.0 alpha: 1.0]]; 
       } 
       completion:^(BOOL finished){ 
        NSLog(@"animation end"); 
        [cell setBackgroundColor:[UIColor whiteColor]]; 
       } 
    ]; 
} 

Tài liệu tham khảo:

• http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UICollectionView_class/Reference/Reference.html#//apple_ref/occ/cl/UICollectionView

Answer 2

Bạn có thể tùy chỉnh các hình ảnh động khi chọn/khai thác UICollectionViewCell với thời gian hoạt hình tùy chỉnh bằng cách làm theo các mã. Vì vậy, bạn không cần phải thay đổi màu nền của nó.

Với tùy chọn sau - UIViewAnimationOption

• UIViewAnimationOptionCurveEaseIn
• UIViewAnimationOptionCurveEaseOut

• UIViewAnimationOptionAllowUserInteraction

  UICollectionViewDelegate - Phương pháp didSelectItemAtIndexPath

  UICollectionViewCell *uviCollectionCell = [collectionView cellForItemAtIndexPath:indexPath]; 
  
  [UIView animateWithDuration:0.4 delay:0 options:(UIViewAnimationOptionCurveEaseIn) animations:^{ 
       NSLog(@"animation start"); 
       CALayer *layer = uviCollectionCell.layer; 
       CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity; 
       rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 15.0f * M_PI/180.0f, 1.0f, 0.0f, 0.0f); 
       layer.transform = rotationAndPerspectiveTransform; 
  } completion:^(BOOL finished) { 
       [UIView animateWithDuration:0.3 delay:0 options:(UIViewAnimationOptionCurveEaseOut) animations:^{ 
        NSLog(@"animation end"); 
        CALayer *layer = uviCollectionCell.layer; 
        CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity; 
        rotationAndPerspectiveTransform.m24 = 0; 
        rotationAndPerspectiveTransform =CATransform3DRotate(rotationAndPerspectiveTransform, 0.0f * M_PI/180.0f, 1.0f, 0.0f, 0.0f); 
        layer.transform = rotationAndPerspectiveTransform; 
       } completion:nil]; 
      } 
  ];