トップ «前の日記(2013-01-05) 最新 次の日記(2013-01-26)» 編集

Cocoa練習帳

iOS/iPhone/iPad/watchOS/tvOS/MacOSX/Android プログラミング, Objective-C, Cocoa, Swiftなど

2012|01|02|03|04|05|06|07|08|09|10|11|12|
2013|01|02|03|04|05|06|07|08|09|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|04|05|06|07|08|09|10|11|12|
2016|01|02|03|04|05|06|07|08|09|10|11|12|
2017|01|02|03|04|05|06|07|08|09|10|11|12|
2018|01|02|03|04|05|06|07|08|09|10|11|12|
2019|01|02|03|04|05|06|07|08|09|10|11|12|
2020|01|02|03|04|05|06|07|08|

2013-01-06 [OSX][iOS]アニメーションの種類(タイミング機能)

既にサンプル・コードでは利用されているが、アニメーションのtimingFunctionプロパティに設定する、タイミング関数について整理してみる。

kCAMediaTimingFunctionLinear
線形に値が変化する。
kCAMediaTimingFunctionEaseIn
最初は徐々に変化し、その後、急激に変化する。
kCAMediaTimingFunctionEaseOut
最初は急激に変化し、その後、減速する。
kCAMediaTimingFunctionEaseIn
最初は徐々に変化し、中盤、急激に変化し、最後は減速する。

タイミング関数は独自に定義できる。

CAMediaTimingFunction # + (id)functionWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y

フリーハンドの部分がきたなくて申し訳ないが、グラフにすると以下の感じ。

ベジエ曲線

ベジエ曲線となるのだが、残念ながら著者にはベジエ曲線を説明できる知識がない。ただ、眺めてみて何となく分かるのは、c1点を手前にすると、最初、急激に変化する。c2点を手前にすると、最後、減速するのだと思う。

独自のタイミング関数の例だ。

- (CATransition *)transitionAnimation
{
    CATransition *animation = [CATransition animation];
    animation.type = kCATransitionMoveIn;
    animation.subtype = kCATransitionFromTop;
    animation.timingFunction = [self getTimingFunction];
    return animation;
}
 
- (CAMediaTimingFunction *)getTimingFunction
{
    CGFloat c1x = 0.5;
    CGFloat c1y = 1.0;
    CGFloat c2x = 0.5;
    CGFloat c2y = 0.0;
    return [[CAMediaTimingFunction alloc] initWithControlPoints:c1x :c1y :c2x :c2y];
}

c1点とc2点の値をどうやって決めればいいのか?先ほどの図を頭に描いてc1点とc2点の値を決めて、動作確認をして期待どおりかを確認していくしかない!?

_ 【Cocoa練習帳】

http://www.bitz.co.jp/weblog/
http://ameblo.jp/bitz/(ミラー・サイト)

トップ «前の日記(2013-01-05) 最新 次の日記(2013-01-26)» 編集