1

iPhoneアプリのGooglePlusアプリには、アプリを下にスクロールするときに画像をアニメーション化するこの方法があります。説明するのは難しいです。アニメーションを理解する最良の方法は、最新のアップデートをダウンロードしてから、ストリームをスクロールすることです。

一言で言えば、スクロールすると画像が動的に読み込まれ、アニメーションの組み合わせ（段階的な表示+スケール）を適用して、画像が画面にゆっくりとフェードインするように見えます。アニメーションは、画像を初めて表示するときにのみ有効になります。つまり、上下にスクロールするときに、画像がすでにストリームに表示されている場合、アニメーションは発生しません。

特にPhoneGapに含まれているiOSデバイス用に構築されたモバイルHTML5アプリでこのアニメーションをシミュレートするための最良の方法は何ですか？誰かがこれをしましたか？動的ローディングは、非常にスムーズであるため、おそらくこのアニメーションの最も興味深い/挑戦的な要素です。

動的ロードは幻想ですか（つまり、実際にはすべての画像をプリロードしますが、スクロール時にアニメーション化しますか）？

ありがとう！

4

3 に答える 3

1

これがどのように機能するかの概念は次のとおりです。

  1. 画像の遅延読み込み用のコード（HTML + JS + CSS）を記述します
  2. 画像読み込みコードを変更して、jqueryfade-in / fade-outまたはease-in / ease-outエフェクトと組み合わせます

このリンクから、画像の遅延読み込みに役立つリンクと提案を見つけることができます。

お役に立てば幸いです。

于 2012-07-18T13:28:32.503 に答える
0

ユーザーがそのdivにスクロールすると、この投稿JQueryフェードインdivをご覧ください。答えとMarcelのjsfiddleの例は、始めるのに十分なはずです。

于 2012-07-11T21:38:00.057 に答える
0

私が言う唯一のことは、他のほとんどの人が言っていることとは異なります。それがアニメーション化される方法です。HTML5コンテキストでは、特にiOSでPhoneGapを使用している場合、jQueryフェードインアウトを使用しているとは思えません。アニメーション。なんで？Webkit-トランジションとトランスフォームはモバイルデバイスのコンテキストでは非常に優れている/スムーズであるため-そしてPhoneGapはWebUIビューを使用するだけです。

前述のように、画像の遅延読み込み（プリロードなど）を行う可能性があります。そのため、このフィドルにはその部分を含めませんでした。ただし、CSS3トランジション/トランスフォームを使用してスケールとフェードイン効果をシミュレートする方法の例を次に示します。特にjQueryフェードカウンター部分と比較した場合、モバイルデバイスでは非常にスムーズです（UIスレッドがフリーズすることもありません）。

http://jsfiddle.net/zXBDd/2/

（このフィドルはWebkitブラウザーで機能します）

iOSデバイスで機能するスクロールのバージョンは次のとおりです。

http://ijitsudesign.com/demos/scrollAnim/scrollExample.html

お役に立てれば！

于 2012-07-18T20:34:06.993 に答える