如何使用英雄动画为集合视图单元格设置动画? [英] How to Animate collection view cells using Hero Animation?

问题描述

如何在 iOS 中为集合视图单元格设置动画，例如关闭或从左右门滑动.像这样:

How to animate collection view cells like a closing or a sliding from the left-right door in iOS. like this:

推荐答案

这是动画集合视图单元格的代码，例如关闭的门.此集合有 2 列.我为集合视图单元格大小的 UICollectionViewDelegateFlowLayout 方法添加了代码.您可以根据需要对其进行自定义或更改.

This is code for animation collection view cells like a closing door. This collection has 2 columns. I have added code for UICollectionViewDelegateFlowLayout methods for collection view cell sizes. You can customize it or change it as per your requirement.

这段代码展示了一种生成关门等动画的简单方法.

This code shows a simple way to generate animation like a closing door.

    // MARK: - UICollectionViewDelegateFlowLayout
    extension SettingsViewController: UICollectionViewDelegateFlowLayout {

        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            return CGSize(width:CGFloat(settingsCollectionView.frame.size.width * 0.46), height: settingsCollectionView.frame.size.height * 0.25)
        }

        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
            return 10
        }

        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
            return 10
        }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

            // create a new cell if needed or reuse an old one
            let cell: SettingsCollectionCell = settingsCollectionView.dequeueReusableCell(withReuseIdentifier: identifier, for: indexPath) as! SettingsCollectionCell

            if !cell.isAnimated {

                UIView.animate(withDuration: 0.5, delay: 0.5 * Double(indexPath.row), usingSpringWithDamping: 1, initialSpringVelocity: 0.5, options: indexPath.row % 2 == 0 ? .transitionFlipFromLeft : .transitionFlipFromRight, animations: {

                    if indexPath.row % 2 == 0 {
                        AnimationUtility.viewSlideInFromLeft(toRight: cell)
                    }
                    else {
                        AnimationUtility.viewSlideInFromRight(toLeft: cell)
                    }

                }, completion: { (done) in
                    cell.isAnimated = true
                })
            }

       return cell
    }
}

这是 AnimationUtility 类的代码.

This is code for AnimationUtility class.

class AnimationUtility: UIViewController, CAAnimationDelegate {

    static let kSlideAnimationDuration: CFTimeInterval = 0.4

    static func viewSlideInFromRight(toLeft views: UIView) {
        var transition: CATransition? = nil
        transition = CATransition.init()
        transition?.duration = kSlideAnimationDuration
        transition?.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        transition?.type = kCATransitionPush
        transition?.subtype = kCATransitionFromRight
//        transition?.delegate = (self as! CAAnimationDelegate)
        views.layer.add(transition!, forKey: nil)
    }

    static func viewSlideInFromLeft(toRight views: UIView) {
        var transition: CATransition? = nil
        transition = CATransition.init()
        transition?.duration = kSlideAnimationDuration
        transition?.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        transition?.type = kCATransitionPush
        transition?.subtype = kCATransitionFromLeft
//        transition?.delegate = (self as! CAAnimationDelegate)
        views.layer.add(transition!, forKey: nil)
    }

    static func viewSlideInFromTop(toBottom views: UIView) {
        var transition: CATransition? = nil
        transition = CATransition.init()
        transition?.duration = kSlideAnimationDuration
        transition?.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        transition?.type = kCATransitionPush
        transition?.subtype = kCATransitionFromBottom
//        transition?.delegate = (self as! CAAnimationDelegate)
        views.layer.add(transition!, forKey: nil)
    }

    static func viewSlideInFromBottom(toTop views: UIView) {
        var transition: CATransition? = nil
        transition = CATransition.init()
        transition?.duration = kSlideAnimationDuration
        transition?.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
        transition?.type = kCATransitionPush
        transition?.subtype = kCATransitionFromTop
//        transition?.delegate = (self as! CAAnimationDelegate)
        views.layer.add(transition!, forKey: nil)
    }
}

这篇关于如何使用英雄动画为集合视图单元格设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！