CSS3を使用してヘッダーアニメーション効果を作成する

Netease Kanyouxi公式サイト（http://kanyouxi.163.com/）（棚から削除されました）は、私が以前（2014年）に取り組んだプロジェクトです。また、アニメーション制作にFlashを放棄し、HTML5を採用した最初のウェブサイトでもありました。当時、メインアニメーションの実際の制作にCSS3を使用した業界でも数少ないウェブサイトの1つでした。もちろん、現在では特にモバイル端末で広く使用されています。CSS3はパフォーマンスの保証です。これからそれを要約して共有します。これにより、私が学んだことを復習できるだけでなく、初心者が上達するのに役立つと思います。

どんなアニメーションですか？

このアニメーションは複雑ではありませんが、変換、回転、移動、キーフレーム、イージング、ループ数などの重要なコンテンツがいくつか含まれています。さて、まずはアニメーション効果を見てみましょう。以下はスクリーン録画アニメーションです。NetEase Kanyouxi の公式サイト (http://kanyouxi.163.com/) (現在は販売終了) にアクセスして見ることもできます。

重要なポイントはいくつかあります。順番に説明します。

• 白い iPhone が上向きにひっくり返って、わずかに揺れます。
• 字幕は右から表示され、白い iPhone は左に押しやられます。
• 白い iPhone が頭に浮かびそうになったとき、黒い iPhone も現れました。
• 「NetEaseでゲームを観る」という大きなタイトルが背景に波のように点滅し、スクロールします。

一つずつ見ていきましょう。

注: これは CSS3 の高度な実践記事です。CSS3 アニメーションについてよく知らない場合は、まずこちらをお読みください: CSS3 アニメーション、1 分でざっと読んでから戻ってきてください。

1. 上に上げて振る

ここにはいくつかの重要な属性があり、詳細な使用法を確認できます: @keyframes、 transform:rotate(deg); transform-origin:x,y;

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

@keyframes iphone-front{
    0% {
        変換:回転(-30度);
        変換元:125px 650px;
        }
    100% {
        変換:回転(0度); 
        変換元:125px 600px;
        }            
}

後で複数のフレームに分割されるため、パーセンテージをフレーム ポイントとして直接使用します。

回転とアンカーポイントを設定します（アンカーポイント transform-origin:x,y;）

変換:回転(-30度);
変換元:125px 650px;

回転は必要ですが、なぜアンカー ポイントを変更するのでしょうか?

アンカー ポイントは cocos2D から借用したもので、変換の起点を指します。

transform のデフォルトのアンカー ポイントは中心、つまり (50%, 50%) なので、transform の Anchor Point プロパティはtransform-originです。デフォルト値は次のとおりです。

変換元:50%,50%

3Dをサポートする変換では、3番目の値zがあり、デフォルトでは0になります。

変更しないと iPhone の中心を回転してしまい、望んでいる効果が得られないので、下の水平方向の中央に移動します。

この画像の幅は 250px、高さは 525px で、下中央は (125px, 525px) です。ただし、テーブル上で揺れる実際の物体をシミュレートするには、少し下に移動する必要があります。試行錯誤した結果、最終的に (125px, 650px) を選択しました。

ジッターとスキューモーフィズムの追加

ジッターは、実際には複数のキー フレームの組み合わせによって生じます。最初の回転は 0 度ではなく、10 度を少し超えた位置にあり、その後 2 つのキー フレーム間を行き来し、振幅が徐々に減少します。キーフレームを追加した後、@keyframes は次のようになります。

@keyframes iphone-front{
    0% {
        変換:回転(-30度);
        変換元:125px 650px;
        }
    50% {
        変換:回転(10度);
        変換元:125px 600px;
        }
    75% {
        変換:回転(-5度);
        }
    100% {
        変換:回転(0度);
        }
}

上記の 33% の位置に、 transform-origin:125px 600px;が追加されていることに注意してください。これは、アンカー ポイントが変更されないと振り子のように感じられ、硬すぎて現実的ではないためです。想像してください。物体が放物線を描いて地面に落ち、地面に衝突し、移動方向を変え、最終的にゆっくりと停止します。したがって、中心点の高さを少し下げて、見た目が「不規則」になるようにします。

キーフレームの時点ではスローモーション効果もシミュレートされます。いわゆるアニメーションの品質とは、イージング効果がどれだけうまく行われているか、そしてそれが物理的な世界の認識に十分近いかどうかを指します。

このフレームポイントは最後のタイムポイントではありませんので、読み続けてください。

2. 字幕が表示され、iPhoneが押しのけられる

字幕が表示される

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

@キーフレームコンテンツ{
    0% { 変換: translate3d(550px,0,0);}
    100% { 変換: translate3d(0,0,0);}
}

iPhone アニメーションが最初に表示され、その後に字幕が表示されるため、アニメーションの遅延は animation-delay で実行されます。

アニメーション遅延:.2s;

しかし、計算せずに 2 つのキーフレーム グループをより適切に同期するには、次のようにすることもできます。

@キーフレームコンテンツ{
    0% { 不透明度: 0;}
    40% { transform: translate3d(550px,0,0); 不透明度: 0;}
    100% { 変換: translate3d(0,0,0); 不透明度: 1; }
}

最初は透明度で非表示にし、40% から開始して、動きの中で徐々に表示することで、プロセスをスムーズにします。

前述のように、字幕を使用して iPhone を中央に押し出す必要があります。どうすればいいでしょうか?

衝突のシミュレーション

プロセス全体で JS を使用するか、衝突判定に Box2D を使用しない限り、純粋な CSS3 ではこれを実行できません。しかし、ここでは単純なウォークスルー アニメーションだけを用意しています。これは人間とコンピューターのインタラクションを必要とせず、移動距離も変更しません。そのため、マジック トリックを使用して 2 つのアニメーションを並行して実行し、キー ノードにキー フレームを埋め込みます。つまり、字幕が iPhone の位置に移動すると、iPhone が動き始めます。

結合された 2 つのキーフレーム グループは次のとおりです。

@keyframes iphone-front{
    0% {transform:rotate(-30deg); transform-origin:125px 650px; 不透明度: 0;}
    20% {transform:rotate(10deg); transform-origin:125px 600px; 不透明度: 1;}
    30% {transform:rotate(-5deg);}
    38% {変換:回転(0度);}
    60% {transform: translate3d(0,0,0); 不透明度: 1;}
    90% {transform: translate3d(-340px,0,0); }
    100% {変換: translate3d(-340px,0,0);}
}
@キーフレームコンテンツ{
    0% { 不透明度: 0;}
    40% { transform: translate3d(550px,0,0); 不透明度: 0;}
    60% { 変換: translate3d(225px,0,0); 不透明度: 1; }
    80% { 変換: translate3d(0,0,0); 不透明度: 1; }
    100% { 変換: translate3d(0,0,0); 不透明度: 1; }
}

/*以下のセレクターは幅や高さなどのアニメーション以外のプロパティ設定を省略しているため、デフォルトで正しい値であると想定します*/
.iphone-フロント{ 
    アニメーション: iphone-front 1.8s 前方へのイーズアウト;
}
。コンテンツ{
    アニメーション: コンテンツ 1.8 秒のイーズアウト;
}

ご覧のとおり、並列アニメーションをより直感的に設定するために、ここでは delay 属性は使用されていません。全員が 60% の位置で会合し、ease-out を使用します。

iPhone の前面のコンテンツの 90% がフレームの 100% で繰り返されるのはなぜですか? animation-fill-modeプロパティにforwardsの値を使用したため、最後のフレームで停止します。100%を書き込まない場合は初期状態に戻ります。

3. ブラックiPhoneが続く

黒い iPhone のアニメーションは、フェードインと移動だけというシンプルなものです。これもまた並列アニメーションですが、今回は遅延を使用できます。出現のおおよその時間を推定し、0.5 秒から開始します。

@keyframes iphone-back{
    0% { 変換: translate3d(97px,0,0); 不透明度: 0;}
    40%{ 不透明度: 0; }
    50%{ 変換: translate3d(0,0,0); 不透明度: 1;}
    100% {不透明度: 1; }
}
.iphone-back-ani{
    アニメーション: iphone-back 1.8s、ease-out 0.5s 早送り;
}

最後のフレームはすでに (0,0,0) であり、変更は発生しないため、コードを繰り返す必要はありません。

translateX(x) の代わりに translate3d(x,y,z); を使用するのはなぜですか?なぜなら、以前は、特にモバイル デバイスでのパフォーマンスが向上するため、この方法の方が効率的であると考える人もいたからです。

マニュアルを参照: transform

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

これには変換は含まれず、前景と背景が重なり合うことが許可され、背景画像は y 軸上で無限ループで緩むことなく連続的に移動します。重要なのは、背景画像が上から下までシームレスに接続されている必要があることです。

@キーフレームタイトル{
    0% { 背景位置: 0 0;}
    100% { 背景位置: 0 -76px;}
}

.title-bg{
    幅: 301ピクセル; 
    高さ: 61px; 
    位置:絶対;
    トップ:0;
    左:0;
    zインデックス:1;
    背景: url(title_text_bg.png) repeat-y;
    アニメーション: タイトル 1.2 秒 リニア;
    アニメーションの反復回数:無限;
}
.title-front{
    幅: 301ピクセル; 
    高さ: 61px;
    位置:絶対;
    トップ:0;
    左:0;
    zインデックス:2;
    背景: url(title_text_front.png) 繰り返しなし;
}

これは最も単純なアプローチであり、ほとんどの状況に適しています。マスクを使用するなど、より高度なものもあります。マスクに興味がある方は、「CSS マスキング」をお読みください。

その他の効果

結論

手書きのアニメーションは時間がかかりますが、現実の原理を理解することができます。ビジュアル制作が必要な場合は、オンラインツール cssanimate を皆さんにおすすめします。他のジェネレーターと比較して、複数のキーフレームを設定でき、マウスをドラッグして直接操作できるのが利点です。お勧めです!

CSS3 を使用したヘッダーアニメーション効果の作成に関するこの記事はこれで終わりです。CSS3 ヘッダーアニメーションに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。