円弧軌跡を実現するCSS組み合わせアニメーション_html/css_WEB-ITnose

CSS のアニメーションとトランジションはどちらも、ポイント A からポイント B までの線形アニメーションを実現するのに適しています。ベジェ曲線をどのように調整しても、アニメーションやトランジションを使用して要素を曲線に沿って動かすことはできません。カスタム線形手法は弾性効果を生み出すことができますが、X 軸と Y 軸の相対的な動きは同じです。

もちろん、JavaScript を使用してアニメーションをシミュレートすることもできますが、この制限を回避する簡単な方法があります。

最初に効果を見てみましょう:

単純に要素上でアニメーションまたはトランジションを使用する場合、コンピュータは点 A から点 A までの最短距離を自動的に選択します。ポイントB。では、希望する曲線効果を実現するにはどうすればよいでしょうか?

分割して再組み立てします

物理的な観点から見ると、変位はベクトルであり、それを X 方向と Y 方向の動きに分解します。次のようなアニメーションを作成するとします。

@keyframes straightLine {  50% { transform: translate3D(100px, -100px, 0); }}.dot { animation: straightLine 2.5s infinite linear;}

(0, 0) から (-100, -100) の位置に移動して分割します。 (0, 0) ～ (0, -100) および (0, 0) ～ (-100, 0) の組み合わせです。

おそらくあなたの最初の反応は私と同じになるでしょう。次のように書いてください:

.dot { animation: xAxis 2.5s infinite linear, yAxis 2.5s infinite linear;}@keyframes xAxis {    50% { transform: translateX(100px); }}@keyframes yAxis {    50% { transform: translateY(-100px); }  }

x、y 軸方向に分割その後、動きはアニメーションに結合されます。ただし、transform 属性は繰り返し定義できないため、効果は最後に宣言されたアニメーションに対して有効です。

どのように組み合わせますか?

この方法を試すことができます。同じ要素で実行できない場合は、親要素と子要素のアニメーションに分割します。

親要素は左から右にアニメーションを実行し、子要素は下から上にアニメーションを実行します。

コードをより簡潔に見せるために、擬似要素を使用します。

<div class="demo-dot"></div>

次のステップは、アニメーションをより明確にするために、双方向の同期問題を解決することです。デモではカスタム ベジェを使用します。イーズインやイーズアウトなどの組み込みの時間的手法を使用することもできます。

.demo-dot { animation: xAxis 2.5s infinite cubic-bezier(0.02, 0.01, 0.21, 1);}.demo-dot::after { content: '';  display: block;  width: 20px;  height: 20px;  border-radius: 20px;  background-color: #fff;  animation: yAxis 2.5s infinite cubic-bezier(0.3, 0.27, 0.07, 1.64);}@-webkit-keyframes yAxis {  50% { animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1); transform: translateY(-100px); }}@keyframes yAxis {  50% { animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1); transform: translateY(-100px); }}@-webkit-keyframes xAxis {  50% { animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64); transform: translateX(100px); }}@keyframes xAxis {  50% { animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64); transform: translateX(100px); }}

一連の操作を経て、デザイナーが賞賛するアニメーションを実現できます。

ここで使用されるアニメーションはすべてキーフレーム アニメーションであり、left やbottom などのプロパティを使用して実現することもできます。ただし、このメソッドは毎回再描画をトリガーすることに注意してください。この記事 。 よりスムーズなアニメーションのためのフロントエンドのパフォーマンスの最適化

ps: 疑似要素のアニメーションは、ローエンドの Android マシンでは失敗する可能性があります。

終わり

この記事 Graffiti Code Dragon は翻訳されており、翻訳は非常に優れています。第一に、効果が非常に優れていること、第二に、理解を深めるために、学習の参考のためにいくつかのメモを作成しました。