UICollectionVIew : 스크롤 할 때 셀의 애니메이션을 활성화합니다.

Question

UICollectionView의 항목을 사용자가 목록을 스크롤 할 때 애니메이션으로 표시하려면 (UICollectionViewFlowLayout의 하위 클래스를 사용하고 있습니다).

레이아웃 관리자에서 위치를 지정 했으므로 초기 변환을 지정하고 올바른 시간 (셀이 화면에 처음 나타날 때)에 적용된 애니메이션을 레이아웃 관리자에 지정해야합니다. 내가 의미하는 효과를 보려면 iOS에서 Google Plus 앱을 확인하세요. 셀의 위치에 따라 다른 변형이 이상적입니다.

세포가 표시 될 때 찾을 수있는 방법을 찾지 못했습니다 (willDisplayCell에 해당하는 것과 일치하지 않음) 또는 이에 대한 포인터를 찾아야합니다.

제안 사항?

당신은 약이 스크린 샷에 구글 플러스에서 애니메이션을 만들 수 있습니다 또한

가, 아이 패드에 아이 포토를보십시오. 그들이 UIcollectionView를 사용하고 있는지는 모르겠지만 (아마 iOS5에서 작동했기 때문에), 이것은 내가 찾고있는 효과라면 정렬 일 것입니다. 사진이 오른쪽에서부터 날아가는 것처럼 보입니다.

Answer 1

맞춤 효과 레이아웃과 별도로이 효과를 얻을 수 있습니다. 셀을 대기열에서 제거 될 때

애니메이션 코드는 내부 collectionView:cellForItemAtIndexPath:

가야한다, 그 frame은 레이아웃에 지정된 무엇으로 설정됩니다. 임시 변수에 셀의 최종 frame으로 저장할 수 있습니다. 그런 다음 cell.frame을 화면 외부의 초기 위치로 설정 한 다음 원하는 최종 위치로 애니메이션을 적용 할 수 있습니다. 라인을 따라 무언가 :

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { 

    UICollectionView *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath]; 

    CGRect finalCellFrame = cell.frame; 
    //check the scrolling direction to verify from which side of the screen the cell should come. 
    CGPoint translation = [collectionView.panGestureRecognizer translationInView:collectionView.superview]; 
    if (translation.x > 0) { 
     cell.frame = CGRectMake(finalCellFrame.origin.x - 1000, - 500.0f, 0, 0); 
    } else { 
     cell.frame = CGRectMake(finalCellFrame.origin.x + 1000, - 500.0f, 0, 0); 
    } 

    [UIView animateWithDuration:0.5f animations:^(void){ 
     cell.frame = finalCellFrame; 
    }]; 

    return cell; 
} 

코드는 상기 스크롤링 방향에 따라 화면 상단에서 나오는 수평 UICollectionView에 셀 애니메이션, 및 행 양쪽 것이다. 또한 현재의 indexPath에서 더 복잡한 레이아웃의 다른 위치에서 애니메이션을 적용하거나 프레임과 함께 다른 속성에 애니메이션을 적용하거나 변형을 적용 할 수 있습니다.

Answer 2

컬렉션보기 레이아웃에서 initialLayoutAttributesForAppearingItemAtIndexPath:을 덮어 써야합니다. 여기서 셀이 나타난 후 실제 속성으로 움직일 레이아웃 속성 항목 (변형 포함)의 속성을 설정할 수 있습니다. 표준 레이아웃이 당신에게 충분한 옵션을 제공하지 않는 객체 속성 경우

, 당신은 그것을 서브 클래스 추가 속성을 추가하고, 추가 속성을 데리러 휴대에 applyLayoutAttributes:을 대체 할 수 있습니다.

이 기능은 컬렉션보기에 셀을 추가 할 때만 작동합니다.

컬렉션보기를 아래로 스크롤 할 때 셀에 적용된 변환을 사용하려면 셀에 직접 적용 (cellForItem ...)하거나 레이아웃 속성에서 initialTransform이라는 속성을 적용합니다. 레이아웃 속성을 셀에 적용하면 initialTransform을 확인한 다음 ID를 설정하고 ID 변환으로 이동하도록 애니메이션을 트리거하므로 셀이 처음으로 스크롤되었을 때만 적용됩니다. 화면. 나는 이와 같은 것을 구현하지 않았습니다. 어떻게 할 것인가에 대한 추측입니다.

Answer 3

마크 (Marc)가 주석에서 언급했듯이, 그는 스크롤 뷰를 사용하여 결국 표준 테이블 뷰로이를 수행하는 방법을 보여주고 싶습니다. Google +에서와 같은 효과는 아니지만 쉽게 적용 할 수 있습니다. 세포는 우리가 각 셀에 오프셋 (및 회전)을 할당하고 우리가 이전 설정을 애니메이션보다 표시되는 직전에

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    static CGFloat duration = .5; 
    static NSUInteger xOffset = 50; 
    static NSUInteger yOffset = 200; 
    if(scrollDirection == STAScrollDirectionDown && lastAnimatedIndex < indexPath.row) 
    { 
     cell.frame = CGRectMake(cell.frame.origin.x - xOffset, cell.frame.origin.y+yOffset, cell.frame.size.width, cell.frame.size.height); 
     [UIView animateWithDuration:duration 
         animations:^{ 
      cell.frame = CGRectMake(cell.frame.origin.x + xOffset, cell.frame.origin.y - yOffset, cell.frame.size.width, cell.frame.size.height); 
     } completion:^(BOOL finished) { 
      lastAnimatedIndex = indexPath.row; 
     }]; 
    } 
} 

.

---

좀 더 흥미로운 예 :

-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath 
{ 
    CATransform3D rotation = CATransform3DMakeRotation((90.0*M_PI)/180, .0, 0.5, 0.5); 
    cell.contentView.alpha = 0.8; 
    cell.contentView.layer.transform = rotation; 
    cell.contentView.layer.anchorPoint = CGPointMake(0, 0.5); 

    [UIView animateWithDuration:.5 
        animations:^{ 
         cell.contentView.layer.transform = CATransform3DIdentity; 
         cell.contentView.alpha = 1; 
         cell.contentView.layer.shadowOffset = CGSizeMake(0, 0); 
        } completion:^(BOOL finished) { 
        }]; 
}