RxAnimated - 动画绑定
RxAnimated 为 RxCocoa 的绑定提供了动画接口。
它提供了一些预定义的动画绑定,并提供了一个灵活的机制,让您可以添加自己的预定义动画并在绑定 RxCocoa 时使用它们。
使用方法
内置动画
当您使用 RxCocoa 绑定值时,您会编写类似以下内容:
textObservable
.bind(to: labelFlip.rx.text)
这会在可观察对象发出新的字符串值时更新标签的文本。但这发生得非常突然,没有任何过渡。使用 RxAnimated,您可以使用 animated
扩展来 使用动画绑定值,如下所示:
textObservable
.bind(animated: labelFlip.rx.animated.flip(.top, duration: 0.33).text)
不同之处在于您使用 bind(animated:)
而不是 bind(to:)
,并在 rx
和您要使用的属性接收器之间插入 animated.flip(.top, duration: 0.33)
(或提供的其他或自定义动画方法),例如上面的示例中的 text
。
相同的内置淡入和翻转动画适用于任何 UIView
元素。并且在特定的属性上,例如 UILabel.rx.text
或 UIImageView.rx.image
上也同样适用。
动画列表
内置动画对象列表
UIView.rx.animated...isHidden
UIView.rx.animated...alpha
UILabel.rx.animated...text
UILabel.rx.animated...attributedText
UIControl.rx.animated...isEnabled
UIControl.rx.animated...isSelected
UIButton.rx.animated...title
UIButton.rx.animated...image
UIButton.rx.animated...backgroundImage
UIImageView.rx.animated...image
NSLayoutConstraint.rx.animated...constant
NSLayoutConstraint.rx.animated...isActive
内置动画列表
UIView.rx.animated.fade(duration: TimeInterval)
UIView.rx.animated.flip(FlipDirection, duration: TimeInterval)
UIView.rx.animated.tick(FlipDirection, duration: TimeInterval)
UIView.rx.animated.animation(duration: TimeInterval, animations: ()->Void)
NSLayoutConstraint.rx.animated.layout(duration: TimeInterval)
请查看示例应用以获得多个示例。
自定义动画
您可以轻松地添加自定义绑定动画,以匹配您应用的视觉风格。
I. (可选) 如果您要为一个没有任何动画绑定的新绑定对象(例如 UIImageView.rx.image
、UILabel.rx.text
等已经包含,但您需要另一个属性)进行动画处理
// This is your class `UILabel`
extension AnimatedSink where Base: UILabel {
// This is your property name `text` and value type `String`
public var text: Binder<String> {
let animation = self.type!
return Binder(self.base) { label, text in
animation.animate(view: label, block: {
guard let label = label as? UILabel else { return }
// Here you update the property
label.text = text
})
}
}
}
II. 添加您的新动画方法
// This is your class `UIView`
extension AnimatedSink where Base: UIView {
// This is your animation name `tick`
public func tick(_ direction: FlipDirection = .right, duration: TimeInterval) -> AnimatedSink<Base> {
// use one of the animation types and provide `setup` and `animation` blocks
let type = AnimationType<Base>(type: RxAnimationType.spring(damping: 0.33, velocity: 0), duration: duration, setup: { view in
view.alpha = 0
view.transform = CGAffineTransform(rotationAngle: direction == .right ? -0.3 : 0.3)
}, animations: { view in
view.alpha = 1
view.transform = CGAffineTransform.identity
})
//return AnimatedSink
return AnimatedSink<Base>(base: self.base, type: type)
}
}
III. 现在,您可以绑定新的动画到订阅。这是通常的绑定 UIImageView.rx.image
的样子
imageObservable
.bind(to: imageView.rx.image)
结果是无动画绑定
如果您以这样的方式使用您的新自定义动画绑定
imageObservable
.bind(to: imageView.rx.animated.tick(.right, duration: 0.33).image)
效果将是
如果您在 UILabel
上使用相同的动画
textObservable
.bind(to: labelCustom.rx.animated.tick(.left, duration: 0.75).text)
无限的创意! (以及良好的品味。)
示例
示例应用演示了几个动画的效果,下载代码库并尝试一下吧。
安装
RxAnimated 依赖于 RxSwift 5 或更高版本。
RxAnimated 可通过 CocoaPods 获得。要安装,只需将以下行添加到您的 Podfile 中
pod "RxAnimated"
许可
RxAnimated 在 MIT 许可下可用。有关更多信息,请参阅 LICENSE 文件。