Glympse iPhone アプリを初めて起動すると、Glympse のイントロ画面が表示されます。画面を上下にスクロールするとダイナミックに内容が変化し、アニメーションもとても滑らかです。設定メニューでこのイントロを再生することもできます。
iPhoneでこのような画面位置認識アニメーションページを構築する方法を知りました。この画面は html5+css3 を使用して構築されているのだろうか? このページにいいね!
イントロシーケンスを実装する方法は次のとおりです。
UIScrollViewDelegate はスクロールビュー コンテンツの実際の表示座標を提供しなかったため、UIScrollView から派生した新しいクラスを作成し、setContentOffsetをオーバーライドしました。また、setContentOffset が呼び出されたときにトリガーされ、setContentOffset メソッドに渡された contentOffset 値をリスナーに通知するデリゲート プロトコルも定義しました。 (理想的には、これは iOS の UIScrollViewDelegate デリゲートの一部でした)。
デリゲートの実装者は、スクロールが発生したときに実際のコンテンツ オフセットを受け取ることができるようになりました。ビューがスクロールされ、さまざまなコンテンツが表示されると、contentOffset の垂直座標に基づいてアニメーションをトリガーします。これらのトリガーは、アニメーション UI 要素が表示されたり表示されなくなったりする 2 つの関数呼び出しに関連付けられた垂直ポイント ( Y 値 ) の配列で定義されます。
contentOffset Y 値がトリガー ポイントより大きい場合、特定の UI 要素をビューにアニメーション表示し、アニメーションを「トリガー」として設定しました。アニメーションは通常、ブロックベースのアニメーションを使用したフェードインまたはサイズ変更です。Y 値がトリガー ポイントよりも小さく、アニメーションが以前にトリガーされた場合、フェードアウトなどの別のアニメーションを使用してオブジェクトをビューから外し、マークを「トリガーされていない」としてマークします。
UI 要素が表示されているかどうかを判断するための重要な計算は次のとおりです。
CGPoint point = [contentOffset CGPointValue];
CGFloat visible = _scrollView.bounds.size.height + point.y;
if ( _triggers[ndx].y < visible )
{
if ( !_triggers[ndx].triggered )
{
_triggers[ndx].triggered = true;
// call trigger's function to animate item into view
}
}
else
{
if (_triggers[ndx].triggered)
{
_triggers[ndx].triggered = false;
// call trigger's function to animate item out of view
}
}
これがどれほどスムーズかを見ると、HTML5 ではなくCABasicAnimation
、UIScrollViewDelegate
.
コア アニメーション プログラミング ガイドの紹介とコア アニメーション クックブックを読むことから始めます。