RazzleDazzle 是一个简单的 AutoLayout 兼容的关键帧动画框架，用于 iOS，用 Swift 编写。非常适合滚动应用简介。

RazzleDazzle 从 JazzHands 发展而来，这是 IFTTT 的一款 Objective-C 滚动关键帧动画库。

JazzHands 在 IF 和 DO for iPhone 和 iPad 中被广泛使用，最著名的是应用简介。

什么是 RazzleDazzle 用于的？

滚动应用简介动画

RazzleDazzle 是将拥有滚动视图的动画添加到您 Swift 应用简介中的一种简单方法。如果您正在向 Objective-C 应用添加滚动简介，请查看 JazzHands！

要了解如何将 JazzHands 和 RazzleDazzle 用于实践，请查看 IF 和 DO for iPhone 和 iPad 的应用简介，以及 IFTTT 的 DO 应用中按钮的滚动动画。

在 AutoLayout 世界中易于分页的 scrollview 布局

RazzleDazzle 的 AnimatedPagingScrollViewController 中的 keep(view: onPage:) 函数是布局一个在应用旋转或用于 iOS9 的新分屏 iPad 视图中时的表现如预期的分页 scrollview 的非常简单的方式，这是使您的应用完全 AutoLayout 准备工作的一个特别棘手的方面。RazzleDazzle 为您设置了一个 AutoLayout 兼容的分页 scrollview 控制器，您要做的只是告诉 RazzleDazzle 您希望哪些页面上的东西.show。

作为额外奖励，因为它建立在动画库之上，您甚至可以告诉 RazzleDazzle 您希望某个视图显示在多个页面上，而其他视图则滚动，通过一个单一的调用 keep(view: onPages:).

演示应用

打开 Example/RazzleDazzle.xcworkspace 并运行 RazzleDazzleDemo，以观看在滚动应用引导界面中移动、缩放、淡入淡出和变换视图的简单示例。

用法

动画分页滚动视图

首先，将 RazzleDazzle 导入您的视图控制器，并从 AnimatedPagingScrollViewController 继承。

import RazzleDazzle

class ViewController: AnimatedPagingScrollViewController {

告诉分页滚动视图控制器应有多少页面。

override func numberOfPages() -> Int {
    return 4
}

在 viewDidLoad 中将您想要动画化的任何视图添加到滚动视图的 contentView。

override func viewDidLoad() {
    super.viewDidLoad()
    contentView.addSubview(firstLabel)
}

为您的视图添加所需的垂直位置和大小约束。

contentView.addConstraint(NSLayoutConstraint(item: firstLabel, attribute: .CenterY, relatedBy: .Equal, toItem: contentView, attribute: .CenterY, multiplier: 1, constant: 0))

告诉动画分页滚动视图控制器保持视图在您想要的页面上。

keepView(firstLabel, onPage: 1)

您甚至可以告诉动画分页滚动视图控制器在多页上保持视图静止，而其他视图可以滚动过它。

keepView(firstLabel, onPages: [1,2])

或者从页面的中心偏移视图的中心

keepView(firstLabel, onPage: 1.25)

请确保如果使用了任何 keepView 功能，不要为视图设置 x-位置 NSLayoutConstraint，因为它将与 RazzleDazzle 生成的动画 x-位置约束冲突。

RazzleDazzle 动画

在 RazzleDazzle 中创建动画通常与在 JazzHands 中创建动画类似。首先，将 RazzleDazzle 导入您的视图控制器。

import RazzleDazzle

然后，创建一个动画器来管理此 UIViewController 中的所有动画。

var animator = Animator()

为想要动画化的视图创建一个动画。可以对视图应用多种类型的动画。在这个例子中，我们将使用 AlphaAnimation，它使视图淡入淡出。

let alphaAnimation = AlphaAnimation(view: viewThatYouWantToAnimate)

将动画注册到动画器中。

animator.addAnimation(alphaAnimation)

为动画添加一些关键帧。让我们在时间 30 到 60 之间淡出这个视图。

alphaAnimation[30] = 1
alphaAnimation[60] = 0

现在，为了动画化视图，告诉动画器当前时间。例如，为了将此动画与 UIScrollView 绑定，在滚动视图的代理方法中通知动画器时间。

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    animator.animate(scrollView.contentOffset.x)
}

这将产生一个效果，使得视图在滚动位置 0 到 30 完全淡入并可见。在滚动位置 30 到 60 之间，视图将淡出到不可见，并在滚动位置大于 60 保持淡出状态。

动画类型

RazzleDazzle 支持几种类型的动画

• AlphaAnimation 动画 alpha 属性 （创建淡入淡出效果）。
• BackgroundColorAnimation 动画 backgroundColor 属性。
• RotationAnimation 动画旋转转换 （用于旋转效果）。
• ScaleAnimation 应用缩放转换 （用于缩放视图大小）。
• TranslationAnimation 应用平移转换 （用于平移视图位置）。
• CornerRadiusAnimation 动画 layer.cornerRadius 属性。
• HideAnimation 动画 hidden 属性 （隐藏和显示视图）。
• LayerStrokeStartAnimation 动画一个 CAShapeLayer 的 strokeStart 属性 （不与 LayerStrokeEndAnimation 一起使用）。
• LayerStrokeEndAnimation 动画一个 CAShapeLayer 的 strokeEnd 属性 （不与 LayerStrokeStartAnimation 一起使用）。
• LayerFillColorAnimation 动画一个 CAShapeLayer 的 fillColor 属性。
• LayerStrokeColorAnimation 动画一个 CAShapeLayer 的 strokeColor 属性。
• PathPositionAnimation 动画一个 UIView 的 layer.position 属性在路径上。
• 标签文本颜色动画用于动画化UILabel的textColor属性。
• 约束常量动画用于动画化一个AutoLayout约束常量。
• 约束倍数动画将AutoLayout约束常量作为另一个视图属性的倍数进行动画化（根据其他视图的大小偏移或调整视图）。
• 滚动视图页面约束动画将AutoLayout约束常量动画化以将视图放置在滚动视图页面上（使用AutoLayout定位scrollView中的视图）。此动画是AnimatedPagingScrollViewController的keepView(view: onPage:)功能执行的主要动画。

创建自定义动画类型

通过创建自己的自定义动画类型来扩展RazzleDazzle非常简单！

自定义动画类型

为了创建你的自定义动画类型，你的类型需要符合Animatable协议。这只需实现一个animate(time:)函数，它接受一个CGFloat时间值并对它执行一些操作。

对于大多数自定义动画，你可能想要从你想在每个关键帧之间插值的具体属性类型中继承Animation。

public class BorderWidthAnimation : Animation<CGFloat>, Animatable {

创建一个属性来存储你将要应用动画的任何视图（或其他对象），并创建一个接受视图作为输入的初始化器。

private let view : UIView

public init(view: UIView) {
    self.view = view
}

可选地，你可以添加一个函数来验证任何输入值，这将在每次添加关键帧时进行检查，例如对于必须从0到1范围的Alpha值。

public override func validateValue(_ value: CGFloat) -> Bool {
    return (value >= 0) && (value <= 1)
}

然后，你只需要在调用animate(time:)函数时对视图做出适当更改。

public func animate(_ time: CGFloat) {
    if !hasKeyframes() {return}
    view.layer.borderWidth = self[time]
}

然后，你可以在你的UIViewController中创建你新动画的实例，给它你想要动画化的视图，将其添加到你的动画器中，并设置一些关键帧，就像上面所示，它将在动画器告诉它动画时对自定义属性动画化。

可插值类型

RazzleDazzle可以动画化符合Interpolatable协议的任何类型。它已经预先配置来支持动画化CGFloats、CGPoints、CGSizes、CGRects和UIColors。

如果你想要动画化的属性的类型不同，只需将该类型扩展以符合Interpolatable，通过添加一个静态函数interpolateFrom(fromValue: toValue: withProgress:)实现，该函数返回两个相同类型实例之间的实例。

extension CGPoint : Interpolatable {
    public static func interpolateFrom(fromValue: CGPoint, to toValue: CGPoint, withProgress progress: CGFloat) -> CGPoint {
        assert((0 <= progress) && (progress <= 1), "Progress must be between 0 and 1")
        let interpolatedX = CGFloat.interpolateFrom(fromValue.x, to: toValue.x, withProgress: progress)
        let interpolatedY = CGFloat.interpolateFrom(fromValue.y, to: toValue.y, withProgress: progress)
        return CGPointMake(interpolatedX, interpolatedY)
    }
}

如果你的属性是CGFloat或其他内置可插值类型之一，你需要创建一个动画类型，告诉RazzleDazzle如何将关键帧值应用到你的视图，如上所述。

注意事项

动画器只能处理一个类型在每个视图上的动画。如果你想在视图上使用多个同一类型的动画，请使用单独动画的一个关键帧而不是两个独立的动画。

RazzleDazzle是用Swift 3.0编写的，所以它只能在Xcode 8及以上版本中编译。如果你想使用这种类型的库与旧版本的Swift集成，你可以使用JazzHands库，这是一个用Objective-C编写的库，并使用桥接头将从Swift 1.2类中访问的方法。

在Android上寻找构建类似RazzleDazzle的漂亮关键帧动画的库吗？看看SparkleMotion。

贡献者

• Laura Skelton，创建者。

贡献

1. 进行Fork操作（https://github.com/[我的-github-用户名]/RazzleDazzle/fork）
2. 创建功能分支（git checkout -b my-new-feature）
3. 提交您的更改（git commit -am '添加一些功能'）
4. 将更改推送到分支（git push origin my-new-feature）
5. 创建新的Pull Request

许可协议

RazzleDazzle 适用于MIT许可证。有关更多信息，请参阅LICENSE文件。

版权所有 2015 IFTTT Inc.