web-dev-qa-db-ja.com

スクロールしながらUICollectionviewセルをアニメーション化する方法

スクロール時にHorizo​​ntalCollectionviewをアニメーション化するにはどうすればよいですか?セルでアルファを0に変更し、cellForItemAtでアルファを1にアニメーション化しますが、これは、Collectionviewが最初にスクロールされたときにのみ発生します。私が試してみました

UIView.animate(withDuration: 0.8) {
        cell.imageView.alpha = 1
        cell.onboardLabel.alpha = 1
 }

scrollViewDidEndDeceleratingでもこれを実行しようとしましたが、まだ機能していません

 let index = Int(scrollView.contentOffset.x) / Int(scrollView.frame.width)
 let indexPath = IndexPath(item: index, section: 0)
 let cell = collectionView.cellForItem(at: indexPath) as? OnboardingCell

    UIView.animate(withDuration: 0.8) {
        cell?.imageView.alpha = 1
        cell?.onboardLabel.alpha = 1
    }
6
Shags mando

スウィフト4:

UICollectionViewDelegateから次の関数を使用します。

 override func collectionView(_ collectionView: UICollectionView,
                             willDisplay cell: UICollectionViewCell,
                             forItemAt indexPath: IndexPath) {

    cell.alpha = 0
    UIView.animate(withDuration: 0.8) {
        cell.alpha = 1
    }
}
15
Sébastien REMY

まず、どのセルが表示されているかを知る必要があるため、この変数をファイルの先頭に設定します。

var visibleIndexPath: IndexPath? = nil

ScrollViewDidEndDeceleratingで、次のコードを使用してvisibleIndexPathを設定します。

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    var visibleRect = CGRect()

    visibleRect.Origin = collectionView.contentOffset
    visibleRect.size = collectionView.bounds.size

    let visiblePoint = CGPoint(x: visibleRect.midX, y: visibleRect.midY)

    if let visibleIndexPath = collectionView.indexPathForItem(at: visiblePoint) {
        self.visibleIndexPath = visibleIndexPath
    }
}

これでvisibleIndexPathができたので、willDisplayセル関数でセルをアニメーション化できます。

 func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {

        if let visibleIndexPath = self.visibleIndexPath {

            // This conditional makes sure you only animate cells from the bottom and not the top, your choice to remove.
            if indexPath.row > visibleIndexPath.row {

                cell.contentView.alpha = 0.3

                cell.layer.transform = CATransform3DMakeScale(0.5, 0.5, 0.5)

                // Simple Animation 
                UIView.animate(withDuration: 0.5) {
                    cell.contentView.alpha = 1
                    cell.layer.transform = CATransform3DScale(CATransform3DIdentity, 1, 1, 1)
                }
            }
        }
}
1
Fuad Adetoro