Apple Watch Face を実装するための純粋な CSS anime_html/css_WEB-ITnose

私たちのブログへようこそ: http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/

Apple watch の量産に伴い、CSS を使用して文字盤アニメーションを実装したいと考えています時間が来ました。

この記事では、キーフレーム アニメーションといくつかのトリックを使用して、Apple ウォッチフェイスのプログレス バー アニメーションを実装します。

デモ

これは次のような最終的な効果です:

CodePen 上の Helkyle (@HelKyle) によるペン Apple Watch アクティビティ ダイヤル CSS を参照してください。

ダイヤル進行状況バー

テーブルのアニメーションは 3 行で構成されています。それらはすべて進行状況バーです。プログレスバーは両側の角が丸くなっています。これを行うには、ちょっとしたトリックを使用します。

まず半円を描きましょう。 HTML コードは次のとおりです:

<div class="dial-container">  <div class="wedge"></div></div>

border-radius 属性とキーフレームを使用して、半月の形状と回転アニメーションを実装します。
(写真は gif です)

.wedge { animation: rotate 4s infinite linear; border-radius: 0 4em 4em 0; background: red; width: 2em; height: 4em; transform-origin: 0% 50%; }@keyframes rotate {  100% { transform: rotateZ(360deg); }}

マスク

いつものように、おそらく CSS3 のクリップ プロパティを使用します。しかし、ブラウザのカーネル互換性の問題により、断念することにしました。ここでは、単純に overflow:hidden を使用します。

ここでは 2 つの要素が使用されており、ダイヤル コンテナーの幅はウェッジの半分だけであり、コンテナーが半円の右側に配置され、ウェッジが回転されます。扇形の効果が現れます。

.dial-container { position: absolute; top: 0; left: 2em; width: 2em; height: 4em; overflow: hidden; }

完全な円を描くには、左側に配置される 2 番目のウェッジと 2 番目のコンテナを作成する必要があります。

円全体

ラッパーを使用して 2 つのコンテナーを配置しました。

<div class="wrapper">  <div class="dial-container container1">    <div class="wedge"></div>  </div>  <div class="dial-container container2">    <div class="wedge"></div>  </div></div>

と位置関係を処理するには、次の CSS を使用します。

.wrapper { position: absolute; width: 4em; height: 4em; left: calc(50% - 2em); }.dial-container { position: absolute; top: 0; bottom: 0; overflow: hidden; width: 2em; }.wedge { background: red; height: 4em; width: 2em; }.container1 { left: 2em; }.container1 .wedge { animation: rotate-bg-1 4s infinite linear; border-radius: 0 4em 4em 0; left: 0; transform-origin: 0 50%; }.container2 { left: 0; }.container2 .wedge { animation: rotate-bg-2 4s infinite linear; border-radius: 4em 0 0 4em; transform-origin: 2em 2em; }/* First animation moves 180 degrees in the first 2 seconds */@keyframes rotate-bg-1 {  50%, 100% { transform: rotateZ(180deg); }}/* Second animation moves 180 degrees in the last 2 seconds */@keyframes rotate-bg-2 {  0%, 50% { transform: rotateZ(0); }  100% { transform: rotateZ(180deg); }}

実行結果:

Progress

次のステップは、ウェッジを進行状況バーに変えることです。疑似クラスを使用して、中央に円を描いてそれを隠すことができます。

<div class="wrapper">  <div class="dial-container container1">    <div class="wedge"></div>  </div>  <div class="dial-container container2">    <div class="wedge"></div>  </div></div>

.wrapper::after { content: ""; background: #fff; border-radius: 50%; width: 3em; height: 3em; position: absolute; top: 0.5em; left: 0.5em; } 

これで、進行状況バーのように見えます。

エッジ処理

Apple Watchのアニメーションは角が丸いのでとても柔らかく見えます。このような丸い角を作成するには、weget で css 属性を使用することはできません。しかし、ちょっとしたトリックを使うことができます。

<div class="wrapper">  <div class="dial-container container1">    <div class="wedge"></div>  </div>  <div class="dial-container container2">    <div class="wedge"></div>  </div>  <div class="marker start"></div>  <div class="marker end"></div></div>

start 要素と end 要素は、プログレス バーの最初と最後に配置するために使用される 2 つの冗長要素です (これにより、角が丸くなります!)

.marker { background: green; border-radius: 50%; height: 0.5em; width: 0.5em; position: absolute; top: 0; left: calc(50% - 0.25em); }.end { animation: rotate-marker 4s infinite linear; transform-origin: 50% 2em; }@keyframes rotate-marker {  100% { transform: rotateZ(360deg); }}

上記の CSS は、終了円を緑色に設定します。そして、transform-origin をコンテナの中点に設定します。

統合されました

このような 3 つのプログレスバーが統合され、Apple watch のアニメーション効果が生成されます。クールですか?

CodePen で Helkyle (@HelKyle) によるペン Apple Watch アクティビティ ダイヤル CSS をご覧ください。