RxAnimated 0.9.0

RxAnimated 0.9.0

测试已测试
Lang语言 SwiftSwift
许可证 MIT
Released最新版本2021年1月
SPM支持 SPM

Marin TodorovRxSwift CommunityKristaps Grinbergs 维护。



 
依赖
RxSwift~> 6.0
RxCocoa~> 6.0
 

  • 作者
  • icanzilb

RxAnimated - 动画绑定

CI Status Version License Platform

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.textUIImageView.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.imageUILabel.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 文件。