UICollectionView의 특정 셀에 애니메이션 적용

Question

뷰 컨트롤러를 시작할 때 특정 셀에 애니메이션을 적용 할 수있는 방법이 있습니까?

위는 collectionView 세포이며, 화면의 출시에가 선택한 두번째 항목을 표시 할 필요가 동시에 애니메이션에 약간의 페이드 왼쪽과 오른쪽 셀을 표시 할 필요가있다. 이 애니메이션을 구현하는 가장 좋은 방법은 무엇입니까? 사용자 정의 회전식 애니메이션을 위해 이미 customflowLayout 애니메이션을 사용하고 있습니다. 내 주요 질문은 viewDidLoad 애니메이션 1과 3 셀을 만드는 방법입니다?

Answer 1

UICollectionViewFlowLayout으로 재생하면 같은 유형의 애니메이션을 만들 수있었습니다.

당신은 최종 결과를 볼 수 있습니다

https://imgur.com/a/lNoD2 기본적으로 나는이 애니메이션을 달성하기 위해 UPCarouselFlowLayout Library을 사용했다.

// UPCarouselFlowLayout.swift 
// UPCarouselFlowLayoutDemo 
// 
// Created by Paul Ulric on 23/06/2016. 
// Copyright © 2016 Paul Ulric. All rights reserved. 

public enum UPCarouselFlowLayoutSpacingMode { 
    case fixed(spacing: CGFloat) 
    case overlap(visibleOffset: CGFloat) 
} 

class CustomLayout: UICollectionViewFlowLayout { 
    fileprivate struct LayoutState { 
    var size: CGSize 
    var direction: UICollectionViewScrollDirection 
    func isEqual(_ otherState: LayoutState) -> Bool { 
     return self.size.equalTo(otherState.size) && self.direction == otherState.direction 
    } 
    } 

    @IBInspectable open var sideItemScale: CGFloat = 0.6 
    @IBInspectable open var sideItemAlpha: CGFloat = 0.0 
    @IBInspectable open var sideItemShift: CGFloat = 0.0 
    @IBInspectable open var sideItemOffsetShift: CGFloat = 50.0 
    open var spacingMode = UPCarouselFlowLayoutSpacingMode.fixed(spacing: 10) 

    fileprivate var state = LayoutState(size: CGSize.zero, direction: .horizontal) 


    override open func prepare() { 
    super.prepare() 

    self.scrollDirection = .horizontal 
    let currentState = LayoutState(size: self.collectionView!.bounds.size, direction: self.scrollDirection) 

    if !self.state.isEqual(currentState) { 
     self.setupCollectionView() 
     self.updateLayout() 
     self.state = currentState 
    } 
    } 

    fileprivate func setupCollectionView() { 
    guard let collectionView = self.collectionView else { return } 
    if collectionView.decelerationRate != UIScrollViewDecelerationRateFast { 
     collectionView.decelerationRate = UIScrollViewDecelerationRateFast 
    } 
    } 

    fileprivate func updateLayout() { 
    guard let collectionView = self.collectionView else { return } 

    let collectionSize = collectionView.bounds.size 
    let isHorizontal = (self.scrollDirection == .horizontal) 

    let yInset = (collectionSize.height - self.itemSize.height)/2 
    let xInset = (collectionSize.width - self.itemSize.width)/2 
    self.sectionInset = UIEdgeInsetsMake(yInset, xInset, yInset, xInset) 

    let side = isHorizontal ? self.itemSize.width : self.itemSize.height 
    let scaledItemOffset = (side - side*self.sideItemScale)/2 
    switch self.spacingMode { 
    case .fixed(let spacing): 
     self.minimumLineSpacing = spacing - scaledItemOffset 
    case .overlap(let visibleOffset): 
     let fullSizeSideItemOverlap = visibleOffset + scaledItemOffset 
     let inset = isHorizontal ? xInset : yInset 
     self.minimumLineSpacing = inset - fullSizeSideItemOverlap 
    } 
    } 

    override open func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool { 
    return true 
    } 

    override open func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { 
    guard let superAttributes = super.layoutAttributesForElements(in: rect), 
     let attributes = NSArray(array: superAttributes, copyItems: true) as? [UICollectionViewLayoutAttributes] 
     else { return nil } 
    return attributes.map({ self.transformLayoutAttributes($0) }) 
    } 

    fileprivate func transformLayoutAttributes(_ attributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes { 
    guard let collectionView = self.collectionView else { return attributes } 
    let isHorizontal = (self.scrollDirection == .horizontal) 

    let collectionCenter = isHorizontal ? collectionView.frame.size.width/2 : collectionView.frame.size.height/2 
    let offset = isHorizontal ? collectionView.contentOffset.x : collectionView.contentOffset.y 
    let normalizedCenter = (isHorizontal ? attributes.center.x : attributes.center.y) - offset 

    let maxDistance = (isHorizontal ? self.itemSize.width : self.itemSize.height) + self.minimumLineSpacing 
    let distance = min(abs(collectionCenter - normalizedCenter), maxDistance) 
    let ratio = (maxDistance - distance)/maxDistance 

    let alpha = ratio * (1 - self.sideItemAlpha) + self.sideItemAlpha 
    let scale = ratio * (1 - self.sideItemScale) + self.sideItemScale 
    let shift = (1 - ratio) * self.sideItemShift 
    let offsetShift = (1 - ratio) * self.sideItemOffsetShift 
    attributes.alpha = alpha 
    attributes.transform3D = CATransform3DScale(CATransform3DIdentity, scale, scale, 1) 
    attributes.zIndex = Int(alpha * 10) 

    if isHorizontal { 
     attributes.center.y = attributes.center.y + shift 

     if normalizedCenter < collectionCenter { 
     attributes.center.x = attributes.center.x - offsetShift 
     } else { 
     attributes.center.x = attributes.center.x + offsetShift 
     } 
    } else { 
     attributes.center.x = attributes.center.x + shift 
    } 

    return attributes 
    } 

    override open func targetContentOffset(forProposedContentOffset proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint { 
    guard let collectionView = collectionView , !collectionView.isPagingEnabled, 
     let layoutAttributes = self.layoutAttributesForElements(in: collectionView.bounds) 
     else { return super.targetContentOffset(forProposedContentOffset: proposedContentOffset) } 

    let isHorizontal = (self.scrollDirection == .horizontal) 

    let midSide = (isHorizontal ? collectionView.bounds.size.width : collectionView.bounds.size.height)/2 
    let proposedContentOffsetCenterOrigin = (isHorizontal ? proposedContentOffset.x : proposedContentOffset.y) + midSide 

    var targetContentOffset: CGPoint 
    if isHorizontal { 
     let closest = layoutAttributes.sorted { abs($0.center.x - proposedContentOffsetCenterOrigin) < abs($1.center.x - proposedContentOffsetCenterOrigin) }.first ?? UICollectionViewLayoutAttributes() 
     targetContentOffset = CGPoint(x: floor(closest.center.x - midSide), y: proposedContentOffset.y) 
    } 
    else { 
     let closest = layoutAttributes.sorted { abs($0.center.y - proposedContentOffsetCenterOrigin) < abs($1.center.y - proposedContentOffsetCenterOrigin) }.first ?? UICollectionViewLayoutAttributes() 
     targetContentOffset = CGPoint(x: proposedContentOffset.x, y: floor(closest.center.y - midSide)) 
    } 

    return targetContentOffset 
    } 
} 

을 그리고 내의 ViewController에서 내가 가진 :

나는 사용자 정의 FlowLayout의에 sideItemOffsetShift 를 추가 컬렉션이로드 될 때 기본적으로

override func viewDidLoad() { 
    super.viewDidLoad() 

    // scroll to index 1 
    let indexPath = IndexPath(item: 1, section: 0) 
    collectionView?.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: false) 

    DispatchQueue.main.async { 
     self.updateCollectionView() 
    } 
    } 

    func updateCollectionView() { 
    if let layout = collectionView?.collectionViewLayout as? CustomLayout { 

     UIView.animate(withDuration: 0.5, animations: { 
     layout.sideItemAlpha = 0.6 
     layout.sideItemOffsetShift = 0 
     self.collectionView?.collectionViewLayout.invalidateLayout() 
     }) 
    } 
    } 

따라서는, 사이드 항목이 숨겨져 있습니다. 그런 다음 updateCollectionView()을 호출하여 sideItemOffsetShift 및 sideItemAlpha으로 업데이트합니다.