集合视图中的几个动画
Several animations in a collection view
我正在学习动画化集合视图,目前使用 CollectionViewPagingLayout template。
我不仅想在集合视图中使用滑动来导航,还想使用按钮。这个想法是滑动动画不同于按钮动画。
所以重点是 - 如何为一个集合视图配置两种不同的动画?
一个选择的动画完美运行:在 viewDidLoad 中我声明选择的模板:
override func viewDidLoad() {
super.viewDidLoad()
let layout = CollectionViewPagingLayout()
collectionView.collectionViewLayout = layout
collectionView.isPagingEnabled = true
layout.numberOfVisibleItems = nil
}
然后有两个按钮,作用与左右滑动相同。
在 class 结束后,我创建了一个带有一些动画的扩展,例如:
extension TargetCollectionViewCell: ScaleTransformView {
var scaleOptionsDetailed: ScaleTransformViewOptions {
return ScaleTransformViewOptions(
minScale: 0.6,
scaleRatio: 0.4,
translationRatio: CGPoint(x: 0.66, y: 0.2),
maxTranslationRatio: CGPoint(x: 2, y: 0)
)
}
}
但我不明白如何设置第二个动画 - 然后如何调用它。我想要的结果示例如下:对于滑动操作,扩展中的 minScale 参数应为 0.6。当我点击 right/left 按钮时 minScale 参数应该是 0.9.
模板作者提供的readme很详细-但我没有找到线索。我想,某种功能可能会有所帮助 - 或者另一个扩展。但是我试过了,完全没有弄清楚如何写那个方法。
非常感谢您的帮助。
最后,我自己搞定了。如果它对任何人都有用 - 可能的解决方案之一如下:
首先,创建一种动画,例如var animationType = 1
。
然后,在扩展中,做一些案例:
extension TargetCollectionViewCell: ScaleTransformView {
var scaleOptions: ScaleTransformViewOptions {
if animationType == 1 {
return ScaleTransformViewOptions(
minScale: 0.01,
maxScale: 0.01,
scaleRatio: 0,
translationRatio: .zero,
minTranslationRatio: .zero,
maxTranslationRatio: .zero,
shadowEnabled: false,
rotation3d: .init(angle: 0.8, minAngle: -90, maxAngle: 90, x: 0, y: 1, z: 0, m34: -0.001),
translation3d: .init(translateRatios: (0, -1, 0), minTranslateRatios: (0, 0, 1.25), maxTranslateRatios: (0, 0, 1.25)))
} else if animationType == 2 {
return ScaleTransformViewOptions(
minScale: 0.04,
maxScale: 0.04,
scaleRatio: 0,
translationRatio: .zero,
minTranslationRatio: .zero,
maxTranslationRatio: .zero,
shadowEnabled: false,
rotation3d: .init(angle: 0.8, minAngle: -90, maxAngle: 90, x: 0, y: 1, z: 0, m34: -0.001),
translation3d: .init(translateRatios: (0, -1, 0), minTranslateRatios: (0, 0, 1.25), maxTranslateRatios: (0, 0, 1.25)))
} else {
return ScaleTransformViewOptions(
minScale: 0.07,
maxScale: 0.07,
scaleRatio: 0,
translationRatio: .zero,
minTranslationRatio: .zero,
maxTranslationRatio: .zero,
shadowEnabled: false,
rotation3d: .init(angle: 0.8, minAngle: -90, maxAngle: 90, x: 0, y: 1, z: 0, m34: -0.001),
translation3d: .init(translateRatios: (0, -1, 0), minTranslateRatios: (0, 0, 1.25), maxTranslateRatios: (0, 0, 1.25)))
}
return ScaleTransformViewOptions(
)
}
}
在我的示例中,唯一改变的是 minScale/maxScale 参数 - 当然,所有其他选项都可以更改为。
最后一件事 - 向 right/left 按钮添加一行代码,以便它更改动画类型。因此,对于左按钮,您添加:
@IBAction func swipeLeftButton(_ sender: Any) {
...
animationType = 1
}
而不是......你放了一段代码,它描述了一个按钮的基本功能。在我的例子中 - 这是一个向左滑动的命令。
希望对某人有所帮助。
我正在学习动画化集合视图,目前使用 CollectionViewPagingLayout template。
我不仅想在集合视图中使用滑动来导航,还想使用按钮。这个想法是滑动动画不同于按钮动画。
所以重点是 - 如何为一个集合视图配置两种不同的动画?
一个选择的动画完美运行:在 viewDidLoad 中我声明选择的模板:
override func viewDidLoad() {
super.viewDidLoad()
let layout = CollectionViewPagingLayout()
collectionView.collectionViewLayout = layout
collectionView.isPagingEnabled = true
layout.numberOfVisibleItems = nil
}
然后有两个按钮,作用与左右滑动相同。
在 class 结束后,我创建了一个带有一些动画的扩展,例如:
extension TargetCollectionViewCell: ScaleTransformView {
var scaleOptionsDetailed: ScaleTransformViewOptions {
return ScaleTransformViewOptions(
minScale: 0.6,
scaleRatio: 0.4,
translationRatio: CGPoint(x: 0.66, y: 0.2),
maxTranslationRatio: CGPoint(x: 2, y: 0)
)
}
}
但我不明白如何设置第二个动画 - 然后如何调用它。我想要的结果示例如下:对于滑动操作,扩展中的 minScale 参数应为 0.6。当我点击 right/left 按钮时 minScale 参数应该是 0.9.
模板作者提供的readme很详细-但我没有找到线索。我想,某种功能可能会有所帮助 - 或者另一个扩展。但是我试过了,完全没有弄清楚如何写那个方法。
非常感谢您的帮助。
最后,我自己搞定了。如果它对任何人都有用 - 可能的解决方案之一如下:
首先,创建一种动画,例如var animationType = 1
。
然后,在扩展中,做一些案例:
extension TargetCollectionViewCell: ScaleTransformView {
var scaleOptions: ScaleTransformViewOptions {
if animationType == 1 {
return ScaleTransformViewOptions(
minScale: 0.01,
maxScale: 0.01,
scaleRatio: 0,
translationRatio: .zero,
minTranslationRatio: .zero,
maxTranslationRatio: .zero,
shadowEnabled: false,
rotation3d: .init(angle: 0.8, minAngle: -90, maxAngle: 90, x: 0, y: 1, z: 0, m34: -0.001),
translation3d: .init(translateRatios: (0, -1, 0), minTranslateRatios: (0, 0, 1.25), maxTranslateRatios: (0, 0, 1.25)))
} else if animationType == 2 {
return ScaleTransformViewOptions(
minScale: 0.04,
maxScale: 0.04,
scaleRatio: 0,
translationRatio: .zero,
minTranslationRatio: .zero,
maxTranslationRatio: .zero,
shadowEnabled: false,
rotation3d: .init(angle: 0.8, minAngle: -90, maxAngle: 90, x: 0, y: 1, z: 0, m34: -0.001),
translation3d: .init(translateRatios: (0, -1, 0), minTranslateRatios: (0, 0, 1.25), maxTranslateRatios: (0, 0, 1.25)))
} else {
return ScaleTransformViewOptions(
minScale: 0.07,
maxScale: 0.07,
scaleRatio: 0,
translationRatio: .zero,
minTranslationRatio: .zero,
maxTranslationRatio: .zero,
shadowEnabled: false,
rotation3d: .init(angle: 0.8, minAngle: -90, maxAngle: 90, x: 0, y: 1, z: 0, m34: -0.001),
translation3d: .init(translateRatios: (0, -1, 0), minTranslateRatios: (0, 0, 1.25), maxTranslateRatios: (0, 0, 1.25)))
}
return ScaleTransformViewOptions(
)
}
}
在我的示例中,唯一改变的是 minScale/maxScale 参数 - 当然,所有其他选项都可以更改为。
最后一件事 - 向 right/left 按钮添加一行代码,以便它更改动画类型。因此,对于左按钮,您添加:
@IBAction func swipeLeftButton(_ sender: Any) {
...
animationType = 1
}
而不是......你放了一段代码,它描述了一个按钮的基本功能。在我的例子中 - 这是一个向左滑动的命令。
希望对某人有所帮助。