Dance 1.0.7

你希望将以下类似的代码 pod 'Dance', '~> 1.0' 添加到你的 Podfile 中

target 'MyApp' do
  pod 'Dance', '~> 1.0'
end

然后在终端内运行 pod install，或者从 CocoaPods.app 运行。

或者要测试运行，运行以下命令

pod try Dance

Dance 1.0.7

由
Saoud Rizwan

安装 • 使用 • 调试 • 可动画属性 • 许可协议

Dance 是一个基于 iOS 10 中引入的新类 UIViewPropertyAnimator 构建的强大且直观的动画框架。通过 Dance，对视图进行动画处理就像调用 view.dance.animate { ... } 一样简单，然后可以在可以引用视图的任何地方开始、暂停、倒放、快进和结束动画。Dance 特别宽容，在提供 UIViewPropertyAnimator 带来的 iOS 功能的同时，保持了易用性。

快速入门

import Dance

class MyViewController: UIViewController {

    let circle = UIView()

    override func viewDidLoad() {
        super.viewDidLoad()

        circle.dance.animate(duration: 2.0, curve: .easeInOut) {
            $0.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
            $0.center = self.view.center
            $0.backgroundColor = .blue
            // ... see 'Animatable Properties' for more options
        }.addCompletion { _ in
            self.view.backgroundColor = .green
        }.start(after: 5.0)
    }

    func pauseAnimation() {
        circle.dance.pause()
    }

}

使用 Dance，你可以创建附加到视图上的可引用动画。这意味着你可以在可以引用视图的任何地方调用以下方法：

.pause()
.start()
.reverse()
.setProgress(to:)
.finish(at:)

兼容性

Dance 需要iOS 10+且与 Swift 3 项目兼容。

安装

对于 CocoaPods

platform :ios, '10.0'
target 'ProjectName' do
use_frameworks!

pod 'Dance'

end

或者将 Dance.swift 拖放到你的项目中。

然后在你想使用它的文件中导入 import Dance。

使用

建议查看示例项目——它包含了 Dance 所有功能的详细文档。

注意：在本文档中，circle 将用作要动画的视图。你可以在任何 UIView 或其子类实例上使用 Dance，例如 UILabel、UITextField、UIButton 等。

使用 Dance 很容易。

为视图创建动画，并可选地添加完成块。
开始动画。
暂停暂停、倒放或快进动画。
让动画自行完成，或手动提前完成动画，触发任何完成块。

创建动画

我可以对哪些属性进行动画处理？

UIKit 时间曲线

easeInOut（起始和结束缓慢）
easeIn（起始慢）
easeOut（终止慢）
linear

circle.dance.animate(duration: 2.0, curve: .easeInOut) { (make) in
    make.center = newCenter
}

…交替使用

circle.dance.animate(duration: 2.0, curve: .easeInOut) {
    $0.center = newCenter
}

UITimingCurveProvider

let timingParameters = UISpringTimingParameters(mass: 1.0, stiffness: 0.2, damping: 0.5, initialVelocity: CGVector(dx: 0, dy: 5))

circle.dance.animate(duration: 2.0, timingParameters: timingParameters) {
    $0.center = newCenter
}

自定义立方贝塞尔时间曲线

let controlPoint1 = CGPoint(x: 0, y: 1)
let controlPoint2 = CGPoint(x: 1, y: 0)

circle.dance.animate(duration: 2.0, controlPoint1: controlPoint1, controlPoint2: controlPoint2) {
    $0.center = newCenter
}

_{https://developer.apple.com/videos/play/wwdc2016/216/}

基于弹力的时间信息

circle.dance.animate(duration: 2.0, dampingRatio: 0.5) {
    $0.center = newCenter
}

开始动画

使用.animate { ... }创建动画块后，动画将在调用.start()之前不会启动。

circle.dance.start()

circle.dance.start(after: 5.0) // for a delay (in seconds) before starting the animation

添加完成块

需要多少完成块就添加多少，无论何时需要。当动画完成时，无论是通过播放设定的动画，还是通过调用.finish(at:)，所有完成块都会被触发。

circle.dance.addCompletion { (position) in
    switch position {
    case .start:
        print("Finished the animation at the start position.")
    case .current:
        print("Finished the animation at the current position.")
    case .end:
        print("Finished the animation at the end position.")
    }
}

注意： 不能将完成块添加到已完成的动画。

暂停动画

circle.dance.pause()

circle.dance.pause(after: 5.0) // for a delay (in seconds) before pausing the animation

注意： 这不会渲染到暂停的位置，您必须还要调用.finish(at: .current)来做到这一点。

反转动画

调用此方法将像播放视频倒放一样反转动画。

circle.dance.reverse()

circle.dance.isReversed = true

注意： 调用.reverse()后，完成块中的位置值将保持不变。例如，如果动画反转且视图最终位于其初始位置，则完成闭包的位置参数将是.start，而不是.end。

擦除动画

就像电影一样，您可以使用.progress属性来擦除动画。

circle.dance.setProgress(to: 0.5) // takes value 0-1

circle.dance.progress = 0.5

完成动画

动画将在完成并达到目标值后自动完成，并触发任何完成块。但是，如果您暂停动画或想提前完成该动画，您必须调用.finish(at:)。

circle.dance.finish(at: .current) // or .start, .end

舞步属性

circle.dance.hasAnimation: Bool { get }

circle.dance.progress: CGFloat { get, set }

circle.dance.isRunning: Bool { get }

circle.dance.isReversed: Bool { get, set }

仅供调试使用

circle.dance.state: DanceAnimationState { get } // .inactive, .active

circle.dance.tag: Int { get }

约束如何？

舞步非常适合与约束一起使用。为了动画化约束变化

// update constraints for circle and/or its subviews first
// ...
circle.dance.animate(duration: 2.0, curve: .easeInOut) {
    $0.layoutIfNeeded()
}

通常，大多数开发者会在标准的UIView.animate()块中调用self.view.layoutIfNeeded()。但是这是一种不良实践，因为它会在当前视图中布局所有子视图，而开发者可能只想为某些视图动画化约束变化。使用舞步，调用$0.layoutIfNeeded()只布局正在动画化的视图及其子视图，确保了低能耗影响和高帧率。

函数链式调用

舞步允许您将多个动画命令链式调用来创建优雅且易于阅读的语法。例如

circle.dance.animate(duration: 2.0, curve: .easeInOut) {
    $0.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
    $0.center = self.view.center
    $0.backgroundColor = .blue
}.addCompletion { (position) in
    if position == .end {
        print("Animation reached the target end position!")
    }
}.start(after: 5.0)

circle.dance.pause().setProgress(to: 0.25)

print(circle.dance.pause().progress)

circle.dance.start().reverse()

调试

舞蹈是宽容的，这意味着它会处理你可能犯的任何错误而不会造成任何运行时错误。如果你确实犯了一个错误，例如启动一个不存在的动画，那么Dance将在控制台中打印以下错误：

** Dance Error: view with dance.tag = <tag> does not have an active animation! **

Dance为每个舞蹈动画分配一个舞蹈标签，你可以这样访问

circle.dance.tag

这样你可以跟踪你视图的舞蹈动画，并轻松处理Dance的错误打印日志。

此外，你可以获取视图舞蹈动画的状态

switch circle.dance.state {
case .active:
    // A dance animation has been created for the view and has been started.
    // Note: a paused animation's state will return .active
case .inactive:
    // Either there is no dance animation associated with the view, or an animation exists but hasn't been started.
    // Note: a finished animation is inactive because the animation effectively ceases to exist after it finishes
}

可动画属性

UIView属性	你可以做的更改
frame	修改此属性以更改视图的大小和位置，相对于其父视图的坐标系。如果`transform`属性不包含恒等变换，则修改`bounds`或`center`属性。
bounds	修改此属性以更改视图的大小。
center	修改此属性以更改视图相对于其父视图坐标系的相对位置。
transform	修改此属性以相对于视图中心点进行缩放、旋转或平移视图。使用此属性进行的转换始终在2D空间中执行。（要执行3D转换，必须使用Core Animation动画视图的层对象。）
alpha	修改此属性以逐渐更改视图的不透明度。
backgroundColor	修改此属性以更改视图的背景颜色。
contentStretch	修改此属性以更改视图内容填充可用空间的方式。

_{https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/ViewPG_iPhoneOS/AnimatingViews/AnimatingViews.html}

文档

按住Option点击Dance的任何方法以获取详细文档。

许可

Dance使用MIT许可。如果您有任何问题或希望分享您如何使用Dance，请提交问题。

贡献

Dance尚处于初期阶段，但v1.0提供了在iOS中动画化的革命性新方法的基础。请自由发送你认为会为Dance及其哲学增加功能的任何功能的pull请求。

问题？

请通过电子邮件 [email protected]，或通过twitter @sdrzn 联系我。如果您遇到问题或想添加功能，请创建问题。

致谢

Disco Ball图标由Effach来自Noun Project提供