モバイル端末リング進行アニメーションソリューション（背景透明・リング透明化・css3版）_html/css_WEB-ITnose

たまたまお正月休みだったので、彼女と買い物に行ったり、鍋を食べたり、映画を見たりしていたら、風のようにこの記事を書き終えました。記事のスタイルは少し乱暴ですが、このアニメーションの実装には依然として多大な労力が必要です。つまり、プログラマ間のコミュニケーションにはあまり多くの説明は必要なく、コードを記述するだけです。

まず、実装したいリングの進行アニメーションについて説明します。 1. 背景が透明なので、オクルージョンの使用方法を考慮する必要がありません。 2. リングの色。は透明なので、2 つの半円リングを使用すると、部分が重なり合うことなく 180 度を超えるリング効果を実現できます。 3. 簡潔に実現するには、純粋な CSS3 を使用するのが最善です。 次に、次の重要な点に注意する必要があります。アニメーション効果はモバイル端末、特にパフォーマンスの低い一部の Android スマートフォンに適用する必要があるため、パフォーマンスの問題を考慮する必要があります。

まずレンダリング:

そこで、渡された計画の最初のバージョンをすぐに思いつきました

: オクルージョンでは実現できないリング アニメーション効果については、2 つの半リングの動きを使用して組み合わせることができます。アニメーション効果は次のとおりです。トランジションとトランスフォームを使用して実装されます。 リングが 50% 未満の場合:

リングが 50% を超える場合、リングは 2 つの重なり合わないリングで構成されます:

したがって、50% を超えるリング回転アニメーションの場合、2 つリングは必須です。アニメーションは最初にリングの左半分が右半分に 180 度回転され、次にリングの右半分が左半分に対応する角度で回転されます。は固定されておらず、特定の進行状況に応じて決定する必要があるため、この解決策は正しいです。ハーフリングの回転角度は js を通じて割り当てられます。次に、PC 上で滑らかな回転アニメーションを確認すると、問題が発生します。 Android フォン、2 つのハーフリング アニメーション間の接続には時間差があります。流暢ではありません！

最初のバージョンの解決策が失敗した根本原因は、リング全体の進行が 2 つの半リングのアニメーションによって形成されているということです。その実装は固定されていません。回転角度のスタイルと js ステートメントの実行により、パフォーマンスの低い Android スマートフォンでは、2 つのリングのアニメーションの実行時間の差を判断することができなくなります。 2 つのアニメーション間の直接的な接続が行き詰まっていることは明らかです。

次に、別の考え方では、純粋な CSS を使用して 2 つの半円アニメーションの実行を制御するソリューションの 2 番目のバージョンがあり、2 つの半円アニメーションが一定の角度で 180 度回転します。制御したいのは

視覚領域の角度です。 角度が 50% 未満の場合は、どの解決策を使用しても達成できるため、ここでは角度が 50% を超える場合についてのみ説明します。 リングの非表示領域の右半分が左半分に回転すると、左半分全体が表示領域になることを上で説明しました。したがって、もちろん、180 度回転すると完全な半円が表示されます。必要に応じて、角度の左半分の可視領域を減らすだけでは十分ではないでしょうか。 (最後の写真は眠すぎるので、別の日に追加します!)

具体的には、右半分に見えるリングを実現するために 2 つのレイヤーを使用し、左半分に見えるリングを実現するために 3 つのレイヤーを使用しました。左から右に 180 度回転し、右から左に回転すると、最終的にはリングの右半分全体が完全に表示されます。ただし、リングの左半分は別のレイヤーによってブロックされているため、見えるのは だけです。私たちが必要とする進歩の対応する角度。

<div class="my-circle" id="my-circle">  <div class="right-outter">    <div class="right-inner"></div>  </div>  <div id="left-outter-patch" class="left-outter-patch">    <div id="left-outter" class="left-outter">      <div id="left-inner" class="left-inner"> </div>    </div>  </div></div>

.my-circle { position: relative; width: 58px; height: 58px; }    .right-outter { position: absolute; width: 29px; height: 58px; top: 0; right: 0; overflow: hidden; transform: rotate(180deg); -webkit-transform: rotate(180deg); }    .right-inner { position: absolute; top: 0; left: 0; width: 50px; height: 50px; border-radius: 50%; border: 4px solid rgba(113, 222, 130, 0.3); clip: rect(0 58px 58px 29px); }    .left-outter { position: absolute; width: 58px; height: 58px; top: 0; left: 0; overflow: hidden; clip: rect(0 58px 58px 29px); }    .left-inner { position: absolute; top: 0; left: 0; width: 50px; height: 50px; border-radius: 50%; border: 4px solid rgba(113, 222, 130, 0.3); clip: rect(0 58px 58px 29px); transform: rotate(180deg); -webkit-transform: rotate(180deg); }    .left-outter-patch { position: absolute; width: 58px; height: 58px; top: 0; left: 0; overflow: hidden; clip: rect(0 58px 58px 29px); }    .test-animation .right-inner { transform: rotate(180deg); -webkit-transform: rotate(180deg); transition: transform 1s linear; -webkit-transition: -webkit-transform 1s linear; }    .test-animation .left-inner { transform: rotate(360deg); -webkit-transform: rotate(360deg); transition: transform 1s linear 1s; -webkit-transition: -webkit-transform 1s linear 1s; }

アニメーションは CSS で固定されており、左半分の表示領域は JS コードで制御されているため、時差の問題はありません

    var degree = 75;    document.getElementById("left-outter-patch").style.transform = "rotate(" + ((degree-50)*360/100) + "deg)";    document.getElementById("left-outter-patch").style.WebkitTransform = "rotate(" + ((degree-50)*360/100) + "deg)";    document.getElementById("left-outter").style.transform  = "rotate(" + (180-(degree-50)*360/100) + "deg)";    document.getElementById("left-outter").style.WebkitTransform  = "rotate(" + (180-(degree-50)*360/100) + "deg)";    document.getElementById("my-circle").className = "my-circle test-animation";

ソースコードと実装効果を表示するには、ここをクリックしてください