TweenKit 1.0.3

TweenKit 1.0.3

测试已测试
Lang语言 SwiftSwift
许可证 MIT
发布最新发布2020 年 9 月
SPM支持 SPM

Steve Barnegren 维护。



TweenKit 1.0.3

TweenKit

CI Status Version License Platform Twitter

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)

basictween

分组操作

使用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)

grouptween

顺序执行操作

使用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)

sequencetween

重复动作

使用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() )

yoyotween

弧形动作(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)

activityindicator

贝塞尔动作(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)

rocket

可擦除动作(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))
}

scrubbabletween

自定义对象动画

通过添加对 Tweenable 协议的支持,任何东西都可以进行动画处理。您决定如何使对象进行“缓动”,这使其成为一种灵活的方法。

例如,通过将 String 符合 Tweenable,我们可以将一只 蝙蝠 动画成一只

InterpolationAction(from: "bat",
                    to: "cat",
                    duration: 4,
                    easing: .exponentialInOut) {
                     [unowned self] in self.label.text = $0
}

battocat

其它内容

使用 DelayAction 在序列中添加延迟

使用 CallBlockAction 在序列的任何点触发回调

作者

Steve Barnegren

[email protected]

@stevebarnegren

许可

TweenKit 在 MIT 许可下可用。有关更多信息,请参阅 LICENSE 文件。