CSS3 アニメーション放物線
今日は CSS3 アニメーションについて話します。目標はブロックを放物線で動かすことです。使用される主な CSS3 プロパティには、アニメーション、トランスフォーム、@keyframes、トランジションなどが含まれます。
最初に HTML ファイル test.html:
<!DOCTYPE html><html><head> <link rel="stylesheet" type="text/css" href="animation.css"/></head><body><div class="item"></div> </body></html>
アニメーション属性は @keyframes ルールを通じてアニメーションを作成できるため、放物線を作成したい場合は、単純にいくつかの段階の位置。
CSS ファイル、animation.css:
.item { width:50px; height: 50px; display: inline-block; position: absolute; top: 100px; background-color: red; }div { animation: example 3s linear 1s 1; -webkit-animation: example 3s linear 1s 1; -moz-animation: example 3s linear 1s 1; }@-moz-keyframes example { 0% { transform: translate3d(0px, 0, 0); } 25% { transform: translate3d(100px, -40px, 0); } 50% { transform: translate3d(200px, -56px, 0); } 75% { transform: translate3d(300px, -68px, 0); } 100% { transform: translate3d(400px, -80px, 0); } } @-webkit-keyframes example { 0% { transform: translate3d(0px, 0, 0); } 25% { transform: translate3d(100px, -40px, 0); } 50% { transform: translate3d(200px, -56px, 0); } 75% { transform: translate3d(300px, -68px, 0); } 100% { transform: translate3d(400px, -80px, 0); } } 実行してみると、ひどいとしか言いようがありません。これを書くと間違いなく批判されるでしょう。
まず第一に、この方法は放物線ではなく、いくつかの線分をまとめたものです。パーセンテージを細くすると放物線に似たものになりますが、コーディング時間が大幅に増加し、シミュレーションにすぎません。放物線 JavaScript を使用して各点の座標を計算するには、放物線を使用することをお勧めします。
このバージョンは純粋にネガティブな教材です。
この問題を再解析してください。放物線は実際には水平方向に等速運動し、垂直方向には等加速度です。次に、アイテムの外側に div を配置します。内側の div は水平方向の動きを制御し、外側の div は垂直方向の動きを制御し、イーズインを速度カーブに使用します。
test.html:
<!DOCTYPE html><html><head> <link rel="stylesheet" type="text/css" href="animation.css"/></head><body><div class="wraper"><div class="item"></div></div></body></html>
Then anime.css:
.item, .item2 { width:50px; height: 50px; display: inline-block; position: absolute; top: 100px; left: 0px; background-color: red; }.wraper { animation: vertical-animation 3s ease-in 1s 1; -webkit-animation: vertical-animation 3s ease-in 1s 1; -moz-animation: vertical-animation 3s ease-in 1s 1; }.wraper .item { animation: hor-animation 3s linear 1s 1; -webkit-animation: hor-animation 3s linear 1s 1; -moz-animation: hor-animation 3s linear 1s 1; }@-moz-keyframes hor-animation { 0% { transform: translateX(0px); } 100% { transform: translateX(400px); } } @-webkit-keyframes hor-animation { 0% { transform: translateX(0px); } 100% { transform: translateX(400px); }}@-moz-keyframes vertical-animation { 0% { transform: translateY(0px); } 100% { transform: translateY(400px); } } @-webkit-keyframes vertical-animation { 0% { transform: translateY(0px); } 100% { transform: translateY(400px); } }OK、実行してください。放物線のように見えます。
今の方法では、追加の dom 要素を追加する必要がありますが、追加しない方法はありますか?もちろん、position:absolute のtransition属性を使用して、上と左の変化をそれぞれ制御できます。上の変化の時間曲線はイーズインで、左の変化の時間曲線は直線的です。
これを行うには、item2 をもう 1 つ追加します。
test.html:
<!DOCTYPE html><html><head> <link rel="stylesheet" type="text/css" href="animation.css"/></head><body><div class="wraper"><div class="item"></div></div><div class="item2"></div><script type="text/javascript" src="animation.js"></script></body></html>
animation.css:
.item, .item2 { width:50px; height: 50px; display: inline-block; position: absolute; top: 100px; left: 0px; background-color: red; }.wraper { animation: vertical-animation 3s ease-in 1s 1; -webkit-animation: vertical-animation 3s ease-in 1s 1; -moz-animation: vertical-animation 3s ease-in 1s 1; }.wraper .item { animation: hor-animation 3s linear 1s 1; -webkit-animation: hor-animation 3s linear 1s 1; -moz-animation: hor-animation 3s linear 1s 1; }@-moz-keyframes hor-animation { 0% { transform: translateX(0px); } 100% { transform: translateX(400px); } } @-webkit-keyframes hor-animation { 0% { transform: translateX(0px); } 100% { transform: translateX(400px); }}@-moz-keyframes vertical-animation { 0% { transform: translateY(0px); } 100% { transform: translateY(400px); } } @-webkit-keyframes vertical-animation { 0% { transform: translateY(0px); } 100% { transform: translateY(400px); } }.item2 { top: 150px; left: 0px; transition: top 3s ease-in 1s, left 3s linear 1s; -webkit-transition: top 3s ease-in 1s, left 3s linear 1s; -moz-transition: top 3s ease-in 1s, left 3s linear 1s; } ここでは、item2 の上部と左の属性の変更を制御するために、JavaScript ファイルをもう 1 つ追加する必要があります。
anime.js:
window.onload = function(){ var item2 = document.querySelector(".item2"); item2.style.top = "550px"; item2.style.left = "400px";}OK、実行してください。これも放物線運動になります。
まず第一に、item と item2 の動きは矛盾しており、item は常に item2 より前に移動します。
ページの読み込みの問題でしょうか？ できるだけ同時に移動できるように変更しましょう。
CSS で、最初に項目を一時停止させます。
.wraper { animation: vertical-animation 3s ease-in 1s 1; -webkit-animation: vertical-animation 3s ease-in 1s 1; -moz-animation: vertical-animation 3s ease-in 1s 1; animation-play-state:paused; -webkit-animation-play-state:paused; }.wraper .item { animation: hor-animation 3s linear 1s 1; -webkit-animation: hor-animation 3s linear 1s 1; -moz-animation: hor-animation 3s linear 1s 1; animation-play-state:paused; -webkit-animation-play-state:paused; } ここで、animation-play-state:paused を追加して、アニメーションを最初に一時停止させます。
JavaScriptでアニメーションの実行を制御し、item2の上下を変更します。
さて、もう一度実行すると、アイテムが最初に移動します。それから、項目2はちょっと行き詰まっているような気がします。
ここで、いよいよ本題に入ります。Chrome のデバッグ ツールを開いて、2 つのソリューションの描画時間を観察してみましょう。
1 つ目は遷移バージョン、つまり item2 です
緑色の部分がペイントに約 96 ミリ秒かかっていることがわかります。
次に、アイテムであるアニメーション バージョンを見てみましょう:
なんと、ペイントに費やされる時間はわずか 0.68 ミリ秒です。
インターネットでさらに検索した結果、translate を使用するとハードウェア アクセラレーションがトリガーされることがわかりました。塗装時間を大幅に短縮します。この移行ではハードウェア アクセラレーションが利用されず、複数回の再描画がトリガーされるため、少し引っかかり、十分にスムーズではないように感じられます。
まず、問題を分析するときは、物事の表面的な挙動だけを見たり、表面をシミュレーションしたりするだけではなく、本質を考える必要があります。放物線を作成するのと同じように、運動の軌跡をシミュレートするだけではなく、放物線運動の本質を理解する必要があります。
あと、CSS3って本当に奥が深くてため息しか出ません。また、Tencent ISUX の兄弟の指導にも感謝したいと思います。
http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html
http://www.admin10000.com/document/4339.html
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
