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
手动
将库项目作为子项目添加,并将库设置为目标依赖。以下是我们推荐的步骤
- 克隆此存储库(作为子模块或在不同的目录中,由您自己决定);
- 将
AppstoreTransition.xcodeproj
拖动到子项目中; - 在您的主
.xcodeproj
文件中,选择所需的目标; - 转到 构建阶段,展开“目标依赖”,并添加
AppstoreTransition
; - 在 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。
本项目受到了 这个项目 的启发