appstore-card-transition 1.0.4

appstore-card-transition 1.0.4

Chelemen Razvan 维护。




appstore-card-transition

Appstore 卡片动画转换。UICollectionView 和 UITableView 卡片扩展动画转换。这个库尝试将 Appstore 转换添加到您自己的应用中。目标是尽可能简单地将转换集成到应用中,同时保持灵活性和可定制性。

顶部消失

底部消失

如何使用

appstore-card-transition 利用 UIViewControllerTransitioningDelegate 实现自定义转换动画。它取选中单元格的初始帧,并将详情视图控制器从这个位置动画转换为最终展开模式。确保详情视图控制器的展开效果良好属于您的责任。

为了关闭详细视图控制器,使用了手势识别,并将详细视图控制器动画缩放回单元格大小,请注意,在显示详情的过程中可以更改单元格的位置,以提供更动态的行为。

大多数参数都是可定制的,并为每个有意义的行为提供了回调。

安装

CocoaPods

CocoaPods 是 Cocoa 项目的依赖管理器。您可以使用以下命令安装它

$ gem install cocoapods

要使用 CocoaPods 将 appstore-card-transition 集成到您的 Xcode 项目中,请在您的 Podfile 中指定它

use_frameworks!

target '<Your Target Name>' do
    pod 'appstore-card-transition'
end

然后,运行以下命令

$ pod repo update
$ pod install

手动

将库项目作为子项目添加,并将库设置为目标依赖。以下是我们推荐的步骤

  1. 克隆此存储库(作为子模块或在不同的目录中,由您自己决定);
  2. AppstoreTransition.xcodeproj 拖动到子项目中;
  3. 在您的主 .xcodeproj 文件中,选择所需的目标;
  4. 转到 构建阶段,展开“目标依赖”,并添加 AppstoreTransition
  5. 在 Swift 中,使用 import AppstoreTransition 即可!

基本使用指南

首先确保您的单元格实现了 CardCollectionViewCell 协议。

extension YourCollectionViewCell: CardCollectionViewCell {    
    var cardContentView: UIView {
        get {
            return containerView
        }
    }
}

如果您希望单元格也响应触摸,则覆盖以下方法

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        animate(isHighlighted: true)
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)
        animate(isHighlighted: false)
    }

    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesCancelled(touches, with: event)
        animate(isHighlighted: false)
    }

您的单元格现在已经全部设置好了,现在转到您的详细视图控制器,并使其符合 CardDetailViewController 协议。

extension YourDetailsViewController: CardDetailViewController {
    
    var scrollView: UIScrollView {
        return contentScrollView // the scrollview (or tableview) you use in your details view controller
    }
    
    
    var cardContentView: UIView {
        return headerView // can be just a view at the top of the scrollview or the tableHeaderView
    }

}

还需要在您的详细视图控制器中连接一个东西。确保在 scrollViewDidScroll 中调用 dismissHandler

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        dismissHandler.scrollViewDidScroll(scrollView)
    }

现在您可以添加实际的转换了。在您的 cellForItemAt 方法中,在您按需配置了单元格之后,确保设置以下项

        cell.settings.cardContainerInsets = UIEdgeInsets(top: 8.0, left: 16.0, bottom: 8.0, right: 16.0) //set this only if your cardContentView has some margins relative to the actual cell content view.
        
        transition = CardTransition(cell: cell, settings: cell.settings) //create the transition
        viewController.settings = cell.settings //make sure same settings are used by both the details view controller and the cell
        //set the transition
        viewController.transitioningDelegate = transition
        viewController.modalPresentationStyle = .custom
        
        //actually present the details view controller
        presentExpansion(viewController, cell: cell, animated: true)

如果您到了这里,现在应该已经有了一个基本的App Store过渡效果。可能还不完美,但这是一个坚实的起点。如果有什么看起来不对劲,检查一下您从详情ViewController来的约束是否与调整大小兼容。

调整和故障排除

调整参数:检查 TransitionSettings 类。最常见的问题动画出现错误的。为了防止这些错误,请确保您的约束设置正确(尤其是顶部的那些)并确保安全区域按预期工作。

接下来,请确保您的 cardContainerInsets 设置正确并且它们反映了要从您的单元格中得到的实际值。

最后,您的scrollview可能需要滚动与实际单元格外观相匹配(例如,它可能需要比单元格更多的顶部内边距)。在这种情况下,您可以在 viewDidLoad 方法中根据需要滚动内容,对于消失动画,您可以使用 TransitionSettings 中的 dismissalScrollViewContentOffset 属性。

定制

大多数情况下,您可能想同时与App Store动画一起动画化其他内容。为此,我们有动作块可用。您可以实现对以下回调的实现以接收传输过程中的更改。

extension YourDetailsViewController: CardDetailViewController {

    func didStartPresentAnimationProgress() { ... }
    func didFinishPresentAnimationProgress() { ... }
    
    func didBeginDismissAnimation() { ... }
    func didChangeDismissAnimationProgress(progress:CGFloat) { ... }
    func didFinishDismissAnimation() { ... }
    func didCancelDismissAnimation(progress:CGFloat) { ... }
    
}

示例

查看示例项目,了解库能做什么及其是如何实现的。

贡献

我们知道这还远非完美,因此任何改进或功能都受欢迎。如果您做出了出色的改变,请毫不犹豫地创建一个pull request。

本项目受到了 这个项目 的启发