UICollectionViewで特定のセルをアニメートする

Question

ビューコントローラの起動時に特定のセルをアニメーション表示する方法はありますか？

上記はcollectionView細胞で、画面の起動時にそれが選択されている第2項目を表示する必要があると同時に、アニメーションのわずかなフェードで左と右のセルを表示する必要があります。このアニメーションを達成する最良の方法は何ですか？私はすでにカスタムカルーセルアニメーションのためのカスタムflowLayoutアニメーションを使用しています。私の主な質問は、1番目と3番目のセルをviewDidLoadでアニメーション化する方法です。

Answer 1

UICollectionViewFlowLayoutで再生すると、同じタイプのアニメーションを作成することができました。

あなたが最終的な結果を表示することができます。

https://imgur.com/a/lNoD2は基本的に私はこのアニメーションを実現するためにUPCarouselFlowLayout Libraryを使用しました。

私は、カスタムFlowLayoutのにsideItemOffsetShiftを追加しました：

// 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中を私は持っている：デフォルトでそう

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を更新します。