[css3] CSS3を使ってヘッダーアニメーション効果を作成する

NetEaseは、ゲームの公式サイト（http://kanyouxi.163.com/）を見て（取り下げられました）、私が行うために使用するプロジェクトです（2014）、また、私たちの最初の放棄Flashは、アニメーションサイトの生産とHTML5を使用して、ときに業界のいくつかの使用CSS3アクティブ絵画ウェブサイトの実際の生産は、もちろん、現在非常に広く使用されて、特にモバイル側にある、CSS3はパフォーマンスの保証である。さて、今回のまとめでは、再確認ができるように、また、初心者の方にも役立つような内容を希望しています。

アニメーションってどんなもの？

このアニメーションはそれほど複雑ではありませんが、transform, rotate, translate, keyframes, jogging, loop timesといったいくつかの重要な要素を含んでいます。さて、まずアニメーションを見てみましょう。ここに収録されているアニメーションは、NetEase Watch Gamesの公式サイト（http://kanyouxi.163.com/）でも見ることができます（ダウンしています）。

画像

ポイントはいくつかあり、順に説明します。

•  白いiPhoneが上に反転し、小さく数回揺れる。
• の字幕が右から現れ、白いiPhoneを左へ押しやる。
• (a)白いiPhoneがほぼ中心まで来たところで、黒いiPhoneが追随する。
• NetEase Watch Games」という大きなタイトルが波打つ背景の中でスクロールしている。

ひとつひとつ見ていきましょう。

注：これはCSS3上級者向けの実践記事です。CSS3アニメーションについてまだよく知らない方は、まずこちらをお読みください。 CSS3 アニメーション , 1分で概要を把握し、戻ってきてください。

1.フリップアップとジッター

ここにはいくつかの重要な属性があり、その使い方の詳細は、以下の内部で見ることができます。 キーフレーム と {コード , {{code {コード

アニメーションのキーフレームを用意する @keyframes

transform:rotate(deg);

後で複数のフレームに細分化されるので、パーセント比をそのままフレームポイントとして使用することにします。

回転とアンカーポイントの設定 transform-origin:x,yを指定します。 )

transform-origin:x,y;

回転は必要だが、なぜAnchor Pointを修正するのか？

アンカーポイントは、cocos2Dから借用したもので、変換の原点となるものです。

トランスフォームのデフォルトのアンカー ポイントは中心である (50%,50%) であるため、トランスフォームの Anchor Point プロパティは次のようになります。 @keyframes iphone-front{ 0% { transform:rotate(-30deg); transform-origin:125px 650px; } 100% { transform:rotate(0deg); transform-origin:125px 600px; } } で、デフォルト値は以下の通りです。

transform:rotate(-30deg);
transform-origin:125px 650px;

3D対応のトランスフォームでは、3つ目の値としてzがあり、デフォルトでは0になります

修正しないとiPhoneの中心を原点として回転してしまい、欲しい効果ではないので、下の水平方向の中心に移動させます。

この画像の横幅は250px、縦幅は525pxです。下部中央は(125px,525px)ですが、テーブルの上で揺れる物理的な物体をシミュレートするためには、もう少し下に移動させる必要があります。試行錯誤の結果、最終的には下図のように(125px,650px)を選びました。

ディザリングと擬人化の追加

ジッターは、実はいくつかのキーフレームの組み合わせの産物なのです。最初の回転は0度ではなく、10度を少し過ぎたところで、その後、振幅を徐々に小さくしながら、片道2回のキーフレームが続きます。キーフレームを追加した後の@keyframesの変化は以下の通りです。

transform-origin

上のフレームの33%の位置で transform-origin:50%,50% アンカーポイントが一定だと、振り子のように硬くて擬人化されていない感じがするので、こう想像してみましょう。何かがある放物線を描いて地面に落ち、地面に衝突して、進行方向を変え、最後にゆっくり止まるので、中心点の高さを少し下げて、" 規則的でない ".

スローアウトジョグ効果も、キーフレームの時点でシミュレートしています。いわゆるアニメーションが気持ちいい、つまりスローモーションの効果がどれだけ出ているか、物理的な世界に近いか、人に知覚を与えることができるかということです。

このフレームポイントは、最後のポイントではないので、ぜひ読んでみてください。

2. 字幕が表示され、iPhoneを押し退ける

字幕が表示される

字幕は別の要素にあるので、新しいキーフレームグループを作成します。

@keyframes iphone-front{
    0% {
        transform:rotate(-30deg);
        transform-origin:125px 650px;
        }
    50% {
        transform:rotate(10deg);
        transform-origin:125px 600px;
        }
    75% {
        transform:rotate(-5deg);
        }
    100% {
        transform:rotate(0deg);
        }
}

iPhoneのアニメーションが先で、その後にキャプションが入るため、アニメーションを遅延させて実行する animation-delay

transform-origin:125px 600px;

しかし、2つのキーフレーム・グループをよりよく同期させ、計算する必要がないようにするために、次のようなことも行っています。

@keyframes content{
    0% { transform: translate3d(550px,0,0);}
    100% { transform: translate3d(0,0,0);}
}

まず透明度で隠し、40％からしか表示させず、移動中に徐々に表示させることでスムーズに処理できるようにします。

また、先ほど字幕でiPhoneを真ん中に少し押すという話がありましたが、どのようにするのでしょうか？

衝突をシミュレートする

純粋なCSS3では、全体をJSで行うか、衝突判定にBox2Dを使用しない限り、できないことだ。しかし、ここでは、人間の操作を必要としない、移動距離を変えない単純なウォークスルー・アニメーションなので、2つのアニメーションが並行して進み、キーフレームをキーノードに埋める、つまり、iPhoneの位置にキャプションが移動して初めてiPhoneが動き出すという仕掛けにしている。

2つのキーフレームを組み合わせたものは、以下の通りです。

animation-delay:.2s;

ご覧の通り、ここではより直感的に並列アニメーションを設定するためにdelayプロパティは使用せず、60%で全員集合、全てease-outイージングアウトを使用しています。

なぜiphone-frontは100%のフレームで90%の内容を繰り返しているのでしょうか？animation-fill-modeプロパティをforwardsという値で使っているからです。つまり、最後のフレームで停止し、100%が書き込まれないと初期状態にフォールバックしてしまいます。

3. 黒いiPhoneは外観に従う

黒いiPhoneのアニメーションはもっとシンプルで、フェード＋移動だけですが、もう一つ平行したアニメーションもあります。今回はディレイを使うことができ、まず出現のおおよその時間を見積もると、0.5秒以降から得ることができます。

最後のフレームのコードは(0,0,0)となり、何の変化も生じなかったはずなので、ここで繰り返す必要はありません。

なぜ translateX(x) ではなく translate3d(x,y,z); を使うのか？以前は、この方が効率的で、特にモバイルでのパフォーマンスが向上すると考えられていたからです。

マニュアルはこちらでご覧ください。 トランスフォーム

4.大きなタイトル背景の波

こちらは転送を伴わないので、前景と背景が一緒に重なり、背景画像が途切れることなく、無限ループで、速度を落とすことなく、Y軸方向に移動します。この背景画像が上下にシームレスに繋がっていることがポイントです。

@keyframes content{
    0% { opacity: 0;}
    40% { transform: translate3d(550px,0,0); opacity: 0;}
    100% { transform: translate3d(0,0,0); opacity: 1; }
}

これは最もシンプルな方法で、ほとんどのケースに適しています。他にも、マスクを使うなど、より高度な方法があります。 CSSマスキング .

その他の効果

画像

結びの言葉

手書きのアニメーションは、時間はかかるが、現実の原理を知ることができる。制作を可視化する必要がある場合は、以下のオンラインツールがおすすめです。 クサニメイト 他のジェネレーターと比べ、このツールの利点は、複数のキーフレームを設定できることと、マウスのドラッグ操作で直接行えることです。

ヘッダーアニメーション効果を作成するためにCSS3の使用に関するこの記事は、より関連するCSS3ヘッダーアニメーションコンテンツは、スクリプトのホームを検索してください以前の記事または以下の関連記事を閲覧を継続し、私はあなたが将来的にもっとスクリプトのホームをサポートして願って！に導入されました。