TweenKit
TweenKit 是一个功能强大的动画库,它允许您对任何东西进行动画处理(或“插值”)。
下载示例项目,以查看这些动画是如何创建的。
TweenKit 的动画有:
- 可逆的
- 可重复的
- 可组文的
- 可序列的
- 可刮擦的
- 快速且易于使用!
示例
示例项目包含了一系列关于如何使用 TweenKit 的例子。运行 Example.xcodeproj
安装
TweenKit 通过 CocoaPods 提供。要安装它,只需将以下行添加到 Podfile 即可。
pod "TweenKit"
导入 TweenKit
在你想使用的TweenKit文件顶部添加 import TweenKit
创建An ActionScheduler
创建一个 ActionScheduler
实例以运行你的动画。你应该保留调度器,因此最好将其作为视图控制器上的属性创建。
let scheduler = ActionScheduler()
操作
TweenKit的动画由“操作”组成。这些是小的动画单元,可以通过串联或分组来构建复杂的动画。一旦创建了动作,就可以告诉调度器运行它。
scheduler.run(action: myAction)
动画视图的frame
任何符合'Tweenable'协议的对象都可以被动画化。
CGRect、CGFloat、Double、Float、UIColor和其他常见对象已经默认实现了'Tweenable'。
我们可以使用TweenKit的InterpolationAction
来动画化视图的frame
let fromRect = CGRect(x: 50, y: 50, width: 40, height: 40)
let toRect = CGRect(x: 100, y: 100, width: 200, height: 100)
let action = InterpolationAction(from: fromRect,
to: toRect,
duration: 1.0,
easing: .exponentialInOut) {
[unowned self] in self.redView.frame = $0
}
scheduler.run(action: action)
分组操作
使用ActionGroup
,可以同时运行多个动画。例如,我们可以同时更改视图的frame和背景颜色。
// Create a move action
let fromRect = CGRect(x: 50, y: 50, width: 40, height: 40)
let toRect = CGRect(x: 100, y: 100, width: 200, height: 100)
let move = InterpolationAction(from: fromRect,
to: toRect,
duration: 2.0,
easing: .elasticOut) {
[unowned self] in self.squareView.frame = $0
}
// Create a color change action
let changeColor = InterpolationAction(from: UIColor.red,
to: UIColor.orange,
duration: 2.0,
easing: .exponentialOut) {
[unowned self] in self.squareView.backgroundColor = $0
}
// Make a group to run them at the same time
let moveAndChangeColor = ActionGroup(actions: move, changeColor)
scheduler.run(action: moveAndChangeColor)
顺序执行操作
使用ActionSequence
,可以按顺序执行多个动画。这一次,我们可以作为'from'参数提供一个闭包,以从视图的当前frame动画化它。
let moveOne = InterpolationAction(from: { [unowned self] in self.squareView.frame },
to: CGRect(x: 120, y: 80, width: 50, height: 50),
duration: 1,
easing: .exponentialInOut) {
[unowned self] in self.squareView.frame = $0
}
let moveTwo = InterpolationAction(from: { [unowned self] in self.squareView.frame },
to: CGRect(x: 70, y: 120, width: 130, height: 130),
duration: 1,
easing: .exponentialInOut) {
[unowned self] in self.squareView.frame = $0
}
let moveTwice = ActionSequence(actions: moveOne, moveTwo)
scheduler.run(action: moveTwice)
重复动作
使用RepeatAction
来重复动作,或者使用RepeatForeverAction
无限重复动作。您可以在任何动作上调用repeated(times:)
和repeatedForever
方法轻松创建这些动作。
let repeatedForever = myAction.repeatedForever()
scheduler.run(action: repeatedForever)
来回动(Yoyo)
如果您想让动作来回移动,可以使用YoyoAction
。您可以通过在任意动作上调用yoyo()
方法轻松创建这些动作。
let move = InterpolationAction(from: { [unowned self] in self.squareView.frame },
to: CGRect(x: 250, y: 100, width: 100, height: 100),
duration: 1,
easing: .exponentialInOut) {
[unowned self] in self.squareView.frame = $0
}
scheduler.run(action: move.yoyo().repeatedForever() )
弧形动作(Arc Actions)
ArcAction
可以为符合Tweenable2DCoordinate
的对象创建圆形动画。
通过在一个Group
中创建一些间隔排列的ArcAction
,我们可以轻松创建一个活动指示器。
// Create an ArcAction for each circle layer
let actions = circleLayers.map{
layer -> ArcAction<CGPoint> in
let action = ArcAction(center: self.view.center,
radius: radius,
startDegrees: 0,
endDegrees: 360,
duration: 1.3) {
[unowned layer] in layer.center = $0
}
action.easing = .sineInOut
return action
}
// Run the actions in a staggered group
let group = ActionGroup(staggered: actions, offset: 0.125)
// Repeat forever
let repeatForever = group.repeatedForever()
// Run the action
scheduler.run(action: repeatForever)
贝塞尔动作(Bezier Actions)
可以使用BezierAction
让对象沿着贝塞尔路径移动。回调函数提供位置和旋转。
BezierAction
可以用于动画任何符合Tweenable2DCoordinate
协议的值。
let action = BezierAction(path: bezierPath, duration: 4.0) {
[unowned self] (postion, rotation) in
self.rocketImageView.center = postion
let rocketRotation = CGFloat(rotation.value)
self.rocketImageView.transform = CGAffineTransform(rotationAngle: rocketRotation)
}
action.easing = .exponentialInOut
scheduler.run(action: action)
可擦除动作(Scrubbable actions)
可擦除动作非常适合构建独特的引导体验。
而不是将动作添加到计划表,创建一个ActionScrubber
实例。
let move = InterpolationAction(from: { [unowned self] in self.squareView.frame },
to: CGRect(x: 130, y: 100, width: 100, height: 100),
duration: 1,
easing: .elasticOut) {
[unowned self] in self.squareView.frame = $0
}
self.actionScrubber = ActionScrubber(action: move)
// Scrub the action in a UISlider callback
func sliderChanged(slider: UISlider) {
actionScrubber.update(t: Double(slider.value))
}
自定义对象动画
通过添加对 Tweenable
协议的支持,任何东西都可以进行动画处理。您决定如何使对象进行“缓动”,这使其成为一种灵活的方法。
例如,通过将 String
符合 Tweenable
,我们可以将一只 蝙蝠 动画成一只 猫
InterpolationAction(from: "bat",
to: "cat",
duration: 4,
easing: .exponentialInOut) {
[unowned self] in self.label.text = $0
}
其它内容
使用 DelayAction
在序列中添加延迟
使用 CallBlockAction
在序列的任何点触发回调
作者
Steve Barnegren
@stevebarnegren
许可
TweenKit 在 MIT 许可下可用。有关更多信息,请参阅 LICENSE 文件。