blog

意外と知らないCSSシリーズ アニメーション アニメーションのテクニックと詳細

ほとんどのニーズにおいて、css3の/アニメーションはニーズを満たすことができ、jsの実装と比較すると、開発効率を大幅に向上させ、開発コストを削減することができます。 この値はカンマまたは空白で区切ら...

Feb 3, 2020 · 10 min. read
シェア

はじめに

Webアプリケーションにおいて、フロントエンドの学生はアニメーション効果を実装する際に、一般的にいくつかのオプションを使用する傾向があります：

  1. css3 transition / animation - 遷移アニメーションの実装
  2. setInterval / setTimeout - インターバル時間を設定することにより、イメージの位置を常に変更します。
  3. requestAnimationFrame - コールバック関数を介してイメージの位置を変更し、システムは、このコールバック関数の実行のタイミングを決定し、時間指定の変更のパフォーマンスよりも優れて、フレーム外の現象はありません。

transition / animation ほとんどの需要において、css3はニーズを満たすことができ、jsの実装と比較して、開発効率を大幅に向上させ、開発コストを削減することができます。

この投稿は、要約を行うためのアニメーションの使用に焦点を当てます、あなたがアニメーションで動作する場合は、より多くのニーズを、私はこの記事はあなたが得ることができると信じています：

  • Animation 一般的なアニメーションのプロパティ
  • Animation ノンストップ放送
  • Animation バウンス効果の実装
  • アニメーションはライブストリーミングのようなエフェクトを実装
  • アニメーションとSvgはどのような火花を散らすのでしょうか？
    1. プログレスバーコンポーネント
    2. プログレスバーコンポーネント
  • アニメーション steps() の使用
    1. フレームアニメーションの描画
    2. フレームアニメーションの描画

Animation 一般的なアニメーションのプロパティ

アニメーションの一般的なプロパティを紹介した後、これらのプロパティをよりよく理解し、適用するために、いくつかのDEMOを実装して、これらのプロパティについて詳しく説明します。

Animation ノンストップ放送Online Code

ブロードキャスト効果は、親要素のy軸上のコンテンツの位置を変更することによって達成されます。

@keyframes scroll { 
 0%{
 transform: translate(0, 0);
 }
 100%{
 transform: translate(0, -$height);
 }
}
.ul {
 animation-name: scroll;
 animation-duration: 5s;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
 /* animation: scroll 5s linear infinite; アニメーション・プロパティの概要*/
}

ここでは、ブロードキャスト・スクロール効果の一貫性を維持し、コンテンツのない最後のフレームまでスクロールするのを防ぐために、追加の重複データを

<div class="ul">
 <div class="li">劉さんの友達がBump Labsに加入した。</div>
 <div class="li">デンの友達がBump Labsに加入した。</div>
 <div class="li">李さんの友達がBump Labsに加入した</div>
 <div class="li">王さんの友人がバンプラボに加わった</div>
	<!-- パディングのためのデータを挿入する>
 <div class="li">劉さんの友達がBump Labsに加入した。</div> 
</div>

Animation バウンス効果の実装Online Code

これは、トランジション・アニメーションを複数のステージに分割し、各ステージのトップ属性が異なる位置に留まるようにすることで実現します。

/* アニメーションを定義し、トップを変更する,opacity */
@keyframes animate { 
 0% {
 top: -100%;
 opacity: 0;
 }
 25% {
 top: 60;
 opacity: 1;
 }
 50% {
 top: 48%;
 opacity: 1;
 }
 75% {
 top: 52%;
 opacity: 1;
 }
 100%{
 top: 50%;
 opacity: 1;
 }
}

遷移をより自然にするために、ベジェ曲線が定義され、cubic-bezier()関数によってアニメーションの速度が制御されます。

トランジションアニメーションの実行が終了した後、アニメーションの最後のフレームのプロパティ値を要素に適用させるには animation-fill-mode: forwards 

.popup {
 animation-name: animate;
 animation-duration: 0.5s;
 animation-timing-function: cubic-bezier(0., 1, 1);
 animation-iteration-count: 1;
 animation-fill-mode: forwards;
 /* animation: animate 0.5s cubic-bezier(0., 1, 1) 1 forwards; アニメーション・プロパティの概要*/
}

好きなアニメーションの Online Code

私はほとんどの学生が好きな効果を知っていると信じて、この記事では、主にアイデアの実装について、好きな効果の簡単なバージョンを達成します：

1.バブルを上にオフセットさせるには、まずy方向に動く@keyframesアニメーションを実装する必要があります。

/* アニメーションを定義し、Y軸のオフセット距離を変更する*/
@keyframes animation-y { 
 0%{
 transform: translate(-50%, 100px) scale(0);
 }
 50%{
 transform: translate(-50%, -100px) scale(1.5);
 }
 100%{
 transform: translate(-50%, -300px) scale(1.5);
 }
}

2.バブルが上にオフセットしたときに単調にならないようにするには、x方向に動く別の@keyframesアニメーションを実装します。

/* x軸のオフセット距離を変更するアニメーションを指定する*/
@keyframes animation-x {
 0%{
 margin-left: 0px;
 }
 25%{
 margin-left: 25px;
 }
 75%{
 margin-left: -25px;
 }
 100%{
 margin-left: 0px;
 }
}

私が理解しているのはこういうことです：

  • X軸オフセット距離を変更するためにマージンが変更されますが、変換を変更することによる性能差はあまりありません。
  • トランスフォームを変更する のトランスフォームによって新しいレンダリングレイヤーが作成されたからです。
  • @keyframes animation-y アニメーション属性は、レンダリングレイヤーを独立したグラフィックレイヤーにアップグレードすることを可能にします。これは、ハードウェアアクセラレーションをオンにした場合と同じ効果があり、他のレンダリングレイヤーのペイントやレイアウトに影響を与えません。

レイヤーをレンダリングする

3.バブルアプリケーションに実装された2つの@keyframesをアニメーション化します。

.bubble {
 animation: animation-x 3s -2s linear infinite,animation-y 4s 0s linear 1;
/* バブルのハードウェア・アクセラレーションを有効にする*/
}

4.js操作によるlikeイベントでのバブル要素の動的追加/削除

function like() {
 const likeDom = document.createElement('div');
 likeDom.className = 'bubble'; // スタイルを追加する
 document.body.appendChild(likeDom); // 要素を追加する
 setTimeout( () => {
 document.body.removeChild(likeDom); // 要素を削除する
 }, 4000)
}

Animation steps()

1.まず、svgを使って円周2 * 25 * PI = 751の円を描きます。

<svg with='200' height='200' viewBox="0 0 " >
 <circle cx="50" cy="50" r="25" fill="transparent" stroke-width="4" stroke="#" ></circie>
</svg>

stoke-dasharray:50, 50 (は50と省略できる） 2.実線の円を破線の円として描画します。ここでは、破線を描画する属性を使用する必要があります。

  • この値はカンマまたは空白で区切られた数値の配列で、ダッシュとギャップの長さを指定します。
  • 50(ダッシュ)+ 50(ノッチ)+ 50(段落アンダーライン)= < 751完全な円は描けないので、右側に隙間ができます。
<svg with='200' height='200' viewBox="0 0 " >
 <circle cx="50" cy="50" r="25" fill="transparent" stroke-width="4" stroke-dasharray="50" stroke="#" ></circie>
</svg>

3.stroke-dashoffsetプロパティは、円のダッシュとノッチをオフセットします。

  • stroke-dasharray="157 751 "を設定して、ストロークとギャップの長さを指定します。
  • stroke-dashoffsetの値を変更するkeyframesアニメーションを追加 , 値が正のとき反時計回りにオフセット ᔄ, 値が負のとき時計回りにオフセット ᔃ。
@keyframes loading {
 0%{
 stroke-dashoffset: 0;
 }
 100%{
 stroke-dashoffset: -157; /* 時計回りにオフセットする*/
 }
}
circle{
 animation: loading 1s 0s ease-out infinite;
}

4.ダッシュとギャップの値の変更

  • ローディング・コンポーネントの線を見えるようにするには、50pxのダッシュが必要です。
  • オフセット後にダッシュが完全に消えるためには、ノッチが円周の751以上である必要があります。
  • keyframesアニメーションを追加する際、アニメーションの終了位置がアニメーションの開始位置のまま処理されるようにするためstroke-dashoffsetを修正する:-207( +ノッチの長さ)
  • プログレス・バーは、stroke-dashoffsetプロパティを理解するのに役立つ同様の方法で動作Online Code。
@keyframes loading {
 0%{
 stroke-dashoffset: 0;
 }
 100%{
 stroke-dashoffset: -207; /* アニメーションが開始時と同じ場所で終了するようにする*/
 }
}
circle{
 animation: loading 1s 0s ease-out infinite;
}

練習あるのみです！

animation-timing-function steps() は属性の値です。

animation-timing-function : steps(number[, end | start])
  • steps関数は、次の2つの引数を取るステップ関数を指定します。
  • 最初のパラメータには、2つのキーフレーム間で完了するステップ数を示す整数値を指定します。
  • 2番目のパラメータには、startとendの2つの値があり、デフォルト値はendです。
  • step-start は step(1, start) と同じです。step-end は step(1, end) と同じです。

ステップはキーフレームアニメーションに適用され、1つ目のパラメータは2つのキーフレームをN個のフレームに分割し、2つ目のパラメータは1つのフレームから別のフレームへの間隔を開始フレームで埋めるか終了フレームで埋めるかを決定します。

下のグラフを見ればわかります。

  • step-start step-endはstep(1)と同じです。, end)
  • steps(N, end) はアニメーションをN個のセグメントに分割し、各セグメントが終わるごとにアニメーションがステップし、アニメーションの終わりにはN番目のフレームがスキップされ、N+1フレームに留まります。



Animation タイピング効果Online Code

Animation フレームアニメーションの実装Online Code

  • steps(13) は、@keyframes アニメーションを 13 段階で、各段階が等しい距離で実行することができます。

その効果は以下の通り：

/* コンテナの幅を変更する*/
@keyframes animate-x { 
 0%{
 width: 0;
 }
}
p { 
 width: 125px;
 overflow: hidden;
 border-right: 1px solid transparent;
 animation: animate-x 3s 0s steps(13) 1 forwards; 
}
  • これは十分ではないことがわかりますが、アニメーションのプロセスは、実行後の各ステージが正確に文字の現在のステージを表示することができることを確認するために、文字が切り捨てられるように表示されますが、また、次のことを確認する必要があります。各文字の幅は、アニメーションの各ステージが走る距離に等しい。
  • 各キャラクターの幅は、アニメーションの各ステージが走る距離に等しい（約9.6px )各文字の幅が同じになるようにMonacoフォント属性を設定します。具体的なピクセルはfontSize属性の影響を受けます。例のフォントの幅は約9.6pxで、9.6px * 13（セグメントの数） = 124.8pxなので、コンテナの幅を125pxに設定すると、コンテナの目的を達成できます： .
p { 
 /* Monacoフォントのプロパティを16pxに設定し、各文字の幅が同じになるようにする。.6p */
 font-family: Monaco; 
 /* 9.6px * .8px (125px) */
 width: 125px ;
 font-size: 16px;
 overflow: hidden;
 border-right: 1px solid transparent;
 /* アニメーション animate-x、cursor-xなどを同時に適用する。*/
 animation: animate-x 3s 0s steps(13) 1 forwards,cursor-x 0.4s 0s linear infinite; 
}


.main {
 width: 260px;
 height: 200px;
 background: url(url) no-repeat;
 background-size: 100%;
 background-position: 0 0;
}
  • background-positionを変更する 背景イメージを動かすために@keyframesを追加します。
@keyframes animate { 
 0% {
 background-position: 0 0;
 }
 100% {
 background-position: 0 100%;
 }
}
.main{
 width: 260px;
 height: 200px;
 background: url(url) no-repeat;
 background-size: 100%;
 background-position: 0 0;
 animation: animate 2s 1s steps(47) infinite alternate;
}
  • animation-play-state同時に、cssはアニメーションを一時停止するかどうかをコントロールすることもできます。
input:checked+.main{
 animation-play-state: paused;
}
Read next

Redisの基本

Redisは高性能な非リレーショナルキーバリューライブラリで、分散ロック、キャッシュによく使用されます。 読み込みと書き込みの速度。 スレッドスイッチングのオーバーヘッドを避けるために、シングルスレッドを使用して、多重化NIOの使用、独自のVMを持って、より高速なシステムコールを呼び出します。

Feb 3, 2020 · 2 min read

CSSの概要

Feb 2, 2020 · 12 min read

LeetCode 104. バイナリツリーの最大深度｜Python

Feb 2, 2020 · 3 min read

クロスエントロピーのコスト関数に関する見解

Feb 1, 2020 · 16 min read

JSの世界とメモリー

Feb 1, 2020 · 3 min read

JavaScriptのパラメータ・パス

Feb 1, 2020 · 1 min read