在 UICollectionView 中为特定单元格设置动画

Posted 2023-03-10

【中文标题】在 UICollectionView 中为特定单元格设置动画

【英文标题】：Animating particular cells in UICollectionView

【发布时间】：2017-10-03 16:37:49

【问题描述】：

有没有办法在视图控制器启动时为特定单元格设置动画？

上面是一个collectionView单元格，在屏幕启动时需要显示第二个项目被选中，同时需要显示左右单元格，动画有轻微的淡入淡出。实现此动画的最佳方法是什么？我已经为自定义轮播动画使用了自定义 flowLayout 动画。我的主要问题是如何在 viewDidLoad 上制作第一个和第三个单元格动画？

【问题讨论】：

如果您对使用 3rd 方库有任何想法，我的建议是“github.com/nicklockwood/iCarousel”。它有多种动画风格。

@Bharath 我已经在使用我自己的自定义布局流程来制作滑动轮播动画。我的问题是如何在 viewDidLoad 上制作第一个和第三个单元格动画

【参考方案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。

【讨论】：

那些@IBInspectables在IB中显示在哪里？找不到它们：-/ 这甚至可以用于自定义布局吗？