GLDTween 0.0.2

GLDTween 0.0.2

×

测试已测试✗
语言语言 Obj-CObjective C
许可证 MIT
发布最新发布2014年12月

由Takayuki Fukatsu维护。

GLDTween 0.0.2

GLDTween 是一个强大的 iOS 动画库。它使您能够通过简单的编码来编写复杂的动画。

GLDTween 是一个为 iOS 设计的简单动画库。您可以用它来简洁且高效地描述高级动画。

创作背景

在 iOS 中，尽管“触摸”非常重要，但在动画方面的编程资源却很匮乏。UIAnimation 对于实现 Apple 所要求的动画质量来说过于薄弱。另一方面，CoreAnimation 强大而复杂，不适合直观地表达代码。

GLDTween 就是为此而开发的。它基于 Flash 的丰富经验和 ActionScript 的传奇动画引擎 Tweener 构建而成，立足于大量的动画表达和技术知识。它通过简单的 API 实现强大的表达。

GLDTween 的特性

简洁的语法

大多数动画都可以用一行代码描述。由于库会自动进行类型转换，因此无需在不同的类型（如 CGPoint 或 CATransform3D）之间进行跨越。

与竞争产品的冗余性

例如，当一个对象在动画运行期间执行另一个动画时，GLDTween 会自动执行相同的属性的合并或覆盖，以防止竞争和冲突。

几乎可以动画化任何东西

GLDTween 支持的常用数值类型可以是任何属性，因此都可以进行动画化。即使是在数值类型中，也可以动画化音乐音量或视频的播放位置！

高度的可扩展性

采用插件方式，无需修改库本身即可进行自定义。可以添加自己的动画函数或特殊计算属性。

针对 UI 或屏幕切换进行优化

这是一个用于执行几个到几十个 UI 元素或屏幕切换的库。不适合动画化像粒子那样的成千上万的元素。

安装

Git 或 Zip

按常规方式下载或用 Push 安装。该库需要一个依赖项是 QuartzCore.framework。

例如，移动视图的情况，您可以如下编写一行代码。

示例代码

在 GLDTween 中，您可以为任意 NSObject 使用 NSDictionary 指定属性动画。使用 NSValue 包装器可以指定 CGPoint、CGSize、CGRect、CGAffineTransform 等属性。

开始动画

在 2 秒内将 UIView 移动到坐标 (200, 300)。

[GLDTween addTween:myView 
            params:@{@"duration": @2.0, // 時間
                     @"delay": @0.0,
                     @"easing": GLDEasingInOutExpo, // 任意のアニメーションカーブ 
                     @"center": [NSValue valueWithCGPoint:CGPointMake(200, 300)] 
            }];

或者使用标准插件的力量，可以将 centerX、centerY 替换为 CGPoint。

[GLDTween addTween:myView 
            params:@{@"duration": @2.0, // 時間
                     @"delay": @0.0,
                     @"easing": GLDEasingInOutExpo, // 任意のアニメーションカーブ 
                     @"centerX": @200, // center.xのショートカット
                     @"centerY": @300, // center.yのショートカット
            }];

删除动画

删除任意 NSObject 运行中的动画。

[GLDTween removeTween:myView];

或者也可以只删除特定属性的动画。

[GLDTween removeTween:myView params:@[@"x", @"width"]];
删除所有内容
[GLDTween removeAllTweens];
动画的一次性停止和重新开始

暂缓运行中的动画。

[GLDTween pauseTween:myView];
一時停止中のアニメーションの再開
[GLDTween resumeTween:myView];
全てを一時停止
[GLDTween pauseAllTweens];
全ての一時停止を再開
[GLDTween resumeAllTweens];

複数のアニメーション

複数のプロパティを同時に指定
[GLDTween addTween:myView 
            params:@{@"duration": @2.0, // 時間
                     @"delay": @0.0,
                     @"easing": GLDEasingInOutExpo, // 任意のアニメーションカーブ 
                     @"width": @100,
                     @"height": @100,
                     @"centerX": @200,
                     @"centerY": @300,
                     @"alpha": @0.0
            }];
複数のオブジェクトに同じ動きをさせる。

パラメータの辞書を再利用することで、同じアニメーションを複数のNSObjectに適用できます。

[GLDTween addTween:myView0 params:myDict];
[GLDTween addTween:myView1 params:myDict];
[GLDTween addTween:myView2 params:myDict];
連続でアニメーション

右に1秒移動してから下に1秒移動する。 2つのアニメーションと、delayのパラメータ指定で連続的なアニメーションも記述できる。

// 右に移動
[GLDTween addTween:myView 
            params:@{@"duration": @1.0, // 時間
                     @"delay": @0.0,
                     @"easing": GLDEasingInOutExpo,
                     @"centerX": @200,
            }];
// 下に移動
[GLDTween addTween:myView 
            params:@{@"duration": @1.0, // 時間
                     @"delay": @1.0, // 1.0秒遅延させて実行
                     @"easing": GLDEasingInOutExpo, 
                     @"centerY": @300,
            }];

アニメーションの上書き、競合

同じ時間帯にアニメーションが競合する場合、２つ目のアニメーションへ自動で上書きされます。 下記の２つのアニメーションではXが競合するので、Xのみ2番目のアニメーションが優先されます。

[GLDTween addTween:myView 
            params:@{@"duration": @3.0, // 時間
                     @"delay": @0.0,
                     @"easing": GLDEasingInOutExpo,
                     @"x": @200,
                     @"y": @100,
            }];
[GLDTween addTween:myView 
            params:@{@"duration": @1.5, // 時間
                     @"delay": @1.0,
                     @"easing": GLDEasingInOutExpo, 
                     @"x": @300,
            }];

アニメ開始時、終了時に特殊な処理を行う

ブロックあるいはセレクターで、イベントハンドリングが可能。ただしNSDictionaryに格納するためにGLDTweenBlockあるいは、GLDTweenSelectorでラップする必要がある。

クロージャによるイベント処理
__weak id s = self;
[GLDTween addTween:myView 
            params:@{@"duration": @1.0, // 時間
                     @"delay": @0.0,
                     @"easing": GLDEasingInOutExpo,
                     @"startBlock": [GLDTweenBlock block:^(void){
                          [s animationDidStart:nil]; // ブロック
                     }],
                     @"completionBlock": [GLDTweenBlock block:^(void){
                          [s animationDidComplete:nil]; // ブロック
                     }]
            }];
セレクターによるイベント処理
[GLDTween addTween:myView 
            params:@{@"duration": @1.0, // 時間
                     @"delay": @0.0,
                     @"easing": GLDEasingInOutExpo,
                     @"startSelector": [GLDTweenSelector selector:@selector(animationDidStart:) withTarget:self],
                     @"completionSelector": [GLDTweenSelector selector:@selector(animationDidComplete:) withTarget:self]
            }];

アニメーション中の操作ロック

locksInteraction、unlocksInteractionパラメータで、アニメーション中のユーザー操作をロックできます。

[GLDTween addTween:myView 
            params:@{@"duration": @1.0, // 時間
                     @"delay": @0.0,
                     @"easing": GLDEasingInOutExpo,
                     @"locksInteraction": @YES, // 追加時に操作系をロック
                     @"unlocksInteraction": @YES // 完了 or 削除時に操作系をアンロック
            }];

指定可能なパラメータ

アニメーションのパラメータは、GLDTween.addTweenの第2引数で指定します。第2引数はNSDictionaryで、あらゆるデータ型を内包可能です。

duration: NSNumber
アニメーションの再生時間（秒）
delay: NSNumber
アニメーション開始までの遅延（秒）
transition: NSString
イージングカーブ（後述）の指定
repeat: NSNumber
繰り返し回数。ディフォルトは0。-1を指定した場合は無限ループ。
locksInteraction: BOOL
アニメーション登録時にユーザーインタラクション（タッチ等）をロック。
unlocksInteraction: BOOL
アニメーション完了/削除時に、ユーザーインタラクション（タッチ等）をアンロック。
x: NSNumber
frame.origin.xの省略記法
y: NSNumber
frame.origin.yの省略記法
width: NSNumber
frame.size.widthの省略記法
height: NSNumber
frame.size.heightの省略記法
frame: CGRect
origin: CGPoint
size: CGSize
center: CGPoint
centerX: NSNumber
centerY: NSNumber
startBlock: GLDTweenBlock
アニメーション開始時に実行されるブロック。GLDTweenBlockでラップすること。
completionBlock: GLDTweenBlock
アニメーション開始時に実行されるブロック。GLDTweenBlockでラップすること。
updateBlock: GLDTweenBlock
アニメーション終了時に実行されるブロック。GLDTweenBlockでラップすること。
repeatBlock: GLDTweenBlock
アニメーション終了時に実行されるブロック。GLDTweenBlockでラップすること。
startSelector: GLDTweenSelector
アニメーション開始時に実行されるセレクター。GLDTweenSelectorでラップすること。
completionSelector: GLDTweenSelector
アニメーション更新時に実行されるセレクター。GLDTweenSelectorでラップすること。
updateSelector: GLDTweenSelector
アニメーションリピート時に実行されるセレクター。GLDTweenSelectorでラップすること。
repeatSelector: GLDTweenSelector
アニメーション終了時に実行されるセレクター。GLDTweenSelectorでラップすること。
その他
CGFloat、CGPoint、CGSize、CGRect、CGAffineTransform、CATransform3D型のプロパティはそのまま指定可能（例えばalpha等）。

対応プロパティ・データタイプ

アニメーション対象として指定したNSObjectサブクラスから、valueForKeyで取得できる下記型のプロパティに対応しています。またNSObjectを拡張した場合、これらの型の値を返す全てのGetter/Setterもアニメーション可能です。

CGFloat
UIView.alpha等
CGPoint
UIView.center、CALayer.position等
CGSize
UIScrollView.contentSize等
CGRect
UIView.frame等
CGAffineTransform
UIView.transform等
CATranform3D
CALayer.transform等
UIColor（対応予定）
UIView.backgroundColor等

指定可能なアニメーションカーブ

いわゆるRobert Pennerによる主要アニメーションカーブは全てサポートしています。

  • GLDEasingNone
  • GLDEasingInSine
  • GLDEasingOutSine
  • GLDEasingInOutSine
  • GLDEasingInQuad
  • GLDEasingOutQuad
  • GLDEasingInOutQuad
  • GLDEasingInCubic
  • GLDEasingOutCubic
  • GLDEasingInOutCubic

プラグインの作成

GLDTweenでは以下の2種類のプラグインを作成可能です。 プラグインの作成方法は後述します。

アニメーション・カーブ
GLDEasingFunctionテンプレートクラスを継承することで、自身で定義したオリジナルのアニメーションカーブを登録できます。
独自プロパティ
GLDSpecialPropertyを継承したアダプタクラスを作ることで、GLDTweenプリセットの対応プロパティだけでなく、様々なプロパティに対応可能です。

対応予定機能

  • オートリバース

TODO

  • コントリビュータを集める
  • サンプルコードを作る
  • TestCaseを書く

已知的問題

  • Swiftから使用する場合、GLDTweenSelectorによるコールバックが正常に作動しません。現段階ではGLDTweenBlockを使用してください。