本日のおすすめh5特殊効果：最近大人気のH5プルダウン＆アップスライドエフェクト

アプリでは、ページがプルダウンされたときに、プルダウンの画像が拡大に続いて表示されたり、プルダウンを更新するとアニメーションが読み込まれたりするなど、アニメーション効果がよく見られます。このインタラクションの詳細は、さまざまなコンテンツのいたるところで見ることができます。主流の APP と携帯電話のネイティブ システムを統合し、APP のハイライトに個性を加えることができます。

1. 背景

現在の環境では、これらの効果のほとんどはネイティブ実装によって実現されますが、次の理由からネイティブ実装の使用には多くの欠陥があります。

ネイティブ実装サイクルが長い
クロスプラットフォーム実装のコストが高い
既存のプロジェクトに適用するコストが高い
それでは私たちのH5ページは達成できますか？みんなと一緒に探検しましょう。

• まず、ドロップダウンバナー画像を拡大する動的効果を実装しましょう。効果は次のようなものです:

アニメーション要件: トップページがプルダウンされると、バナー画像が拡大され、プルダウンが完了すると、バナー画像が復元されてリバウンドします。

ドロップダウン効果は 2 つの部分に分類できます:

ページのメインコンテンツは全体として下にスライドし、スクロールします。

上部の要素は拡大効果を実行します。
これまで、H5 でページのスクロール効果を実現するには、iScroll などの JS プラグインを使用してスクロールをシミュレートするのが一般的でした。しかし、ここにはいくつかの問題があります:
既存のページの変換は非常に大きく、大規模な使用には適していません

ネイティブスクロールの代わりにスクロールをシミュレートすると未知のバグが発生します
-end 携帯電話 パフォーマンスが低く、エクスペリエンスも低い
これらの問題を解決するには、次の解決策を使用できます:

• 1、ページのネイティブ スクロールを維持し、上部のドロップダウンでのみアニメーションの実行をトリガーします。イベント; 2、JS コピーを使用します。 DOM 構造は、動的効果構造をページ構造から切り離し、相互に影響しません。

この方法では、プルダウン アニメーションは比較的スムーズになり、通常のスクロールには影響しません。ページ。

2. 技術的な実装

上記の技術計画に従って実装される具体的なプロセスは次のとおりです:

ページ上部のドロップダウン イベントを無効にする ------> ページのメイン コンテンツを含めるコンテナをコピーし、同時に拡大します 処理されたコンテンツ ノードはメイン コンテンツの外にあります ------> ページ スライド イベントをバインドします ------> スライド オフセット、スケーリング、その他の数値を計算します操作 ------> 変更された値に応じてメイン コンテンツのトランスフォームが下にスライドし、コピーされたノードが増幅アニメーションで処理されます ------> スライド スクリーン イベントを監視した後、リバウンド アニメーションを実行します。初期状態に戻す

コードの抜粋:

ポイントと説明:

1. ページ上部のドロップダウン イベントを無効にする:

技術的なポイントは、ドロップダウン イベントをデフォルト イベントから取得し、ドロップダウン イベントをアニメーションにバインドします。デフォルトのイベントを防ぐには、通常次のように処理できます:

しかし、この方法には特定の欠陥があります。まず第一に、これはページの通常のスライドを禁止し、ページに多くの干渉とトラブルを引き起こします。第二に、一部の APP の WebView はビューのプルダウンを根本的に防ぐことができず、ページ アニメーションに干渉を引き起こします。

ここでの最善の解決策は、WebView レベルでページのドロップダウンを無効にすることです。

2. 横方向のスライドがプルダウン効果を妨げないように、スライド方向を決定する必要があります。式の計算:

X = 絶対値 (現在の座標 X - 初期座標のスライド。

3. スライドスクリーンオフセット、ズームアニメーション、プルダウンアニメーションの数式計算

4. アニメーションが終了すると、慣性リバウンドアニメーション

慣性をシミュレートするモーションは、前のコード スニペットの to() アニメーション関数によって完了します。以下はカーブモーション関数です:

このメソッドは AlloyTouch コンポーネントから来ています。

5. 最適化すべき既存の問題:

スライディング スクリーン アニメーション効果とネイティブ効果の間にはまだ詳細な違いがあり、特定のアルゴリズムをさらに最適化する必要があります。

3. デモエフェクトのデモンストレーション

この時点で、上部のバナー画像を拡大するアニメーションエフェクトが完成しました。

このように再生できるトップバナー画像に加えて、例えば、トップスライダーカルーセル画像にはプルダウンとズームインのアニメーションも追加しています。ここでの構造はより複雑で、スライダー カルーセルの内容が変更されるため、増幅されたアニメーション部分の内容も変更し続ける必要があります。実装後の効果は次のとおりです:

注: 一部の Android ではパフォーマンスが低く、アニメーション効果に影響を与えるため、この効果は IOS 携帯電話でよりよく体感できます。

さらに、既存の要素をアニメーション化することに加えて、プルダウン時にイースターエッグやブランド要素などの興味深い要素を追加することもできます。実装方法は、コピーする必要がないことを除いて、上記と同じです。 DOM 構造のステップですが、アニメーション化する必要がある DOM 構造を直接記述します。実装後の効果は以下の通りです:

4. プルダウン効果に加えて、上方向にスライドする効果も作成できますか?

プルダウン効果はすでに実装済みなので、引き続きアイデアを広めて他のシナリオでも使用できますか?たとえば、ページが一番下にスライドすると、イースターエッグとして興味深いアニメーションを引き出すことができます。

答えは「はい、やってみよう！」です。

技術的な解決策と実装

ここでのプルダウン効果とアップスライド効果の実装原理は基本的に同じですが、違いは、ページを監視して一番下までスクロールする必要があることです。効果を発動させます。

コードの一部は次のとおりです:

最終的なデモンストレーション効果は次のとおりです:

5. まとめ

経験が最も重要である今日の世界では、当社の製品は次のとおりです。卓越した経験を目指して努力します。さまざまな製品ニーズに直面して、ネイティブ開発、H5 開発、ハイブリッド アプリ開発のいずれであっても、最終的な目標は製品ニーズを完全に解決することです。最良の技術ソリューションのみが存在します。 。

その他の html5 特殊効果については、php 中国語 Web サイトの h5 特殊効果のコラムに注目してください: //m.sbmmt.com/xiazai/js/html5