LoginSignup
20

More than 5 years have passed since last update.

Objective-C で Tween とイージング

Last updated at Posted at 2012-12-26

iOS SDK でアニメーションする場合は UIView animation 系メソッドを使うとか、
Mac でも CALayer を使うとか、色々選択肢があると思います。

始まりの値と終わりの値から途中の値を自動的に算出する Tween を使ってみませんか?
1/60 秒ごとに一回呼び出されるコールバックで、その時その時の値を取り出し、UIView.frame に代入したり、 CATransform に使ったり、alpha にしたり、NSString へ変換してスロットっぽい演出に使ったり、3D 座標空間での値の計算に使ったり、何にでも使えます。

というわけで Flasher にはおなじみの Tween 系ライブラリです。

イージングも一通り用意してあります。

普段使っているオレオレ Tween ライブラリを、
Objective-C プログラマーの皆様へクリスマスプレゼントにしようと思います。

github にプロジェクト一式をアップしました。

ただ書き方がイマイチスマートじゃなくて、
NSInvocation とか使ったらもっとコードを綺麗にと出来ないかなとかありますね。
PushRequest とか頂けたらと思います。(それが僕へのクリスマスプレゼント!)

P.S. 個人ブログにもこのライブラリについての内容を書きました。
こことは違うことを書いていますのでよろしければご覧下さい。
feb19.jp blog - Objective-C で Tween ライブラリ作ったよ!

使い方

1. ご自身のプロジェクトに QuartzCore.framework をリンクしてください。

2. ご自身のプロジェクトに Tween.h/.m TweenObject.h/m をコピーしてください。

3. Tween を実行するクラスに Tween.h と TweenObject.h をインポートしてください。

#import "Tween.h"
#import "TweenObject.h"

4. Tween を実行するタイミングで以下のメソッドを叩いてください。

[Tween addTween:self tweenId:0  startValue:10 endValue:290 time:2 delay:0 easing:@"easeNone" startSEL:nil updateSEL:@selector(update:) endSEL:@selector(end:)];

startValue が開始時の値、endValue が終了時の値、time が Tween にかかる時間、delay が Tween が始まるまでの待機時間です。
easing の部分を @"easeInOutQuint"@"easeOutBack" とかに変えると楽しいかもしれません。
Tween が開始されると、それぞれセレクターが呼び出され、開始時は startSEL、実行中は updateSEL、終了時は endSEL が呼び出されます。

5. コールバックを実装してください。

4 と同じ書き方であれば、update:(TweenObject *)tween や、end:(TweenObject *)tween が呼び出されるので、そこで tween.currentValue を拾って何か値にしてやってください。

self.view.frame  = CGRectMake(tween.currentValue,  0,20,20);

4 で tweenId を指定していれば、コールバックで Tween を見分けることが出来ます。詳しくは github の ViewController.m をご覧ください。

Merry Christmas!

あまりにも些細ですが・・・こんなクリスマスプレゼントはいかがでしょうか。w
メリークリスマス!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20