CSS3 アニメーションを使用して太陽系の惑星の公転をシミュレートする_html/css_WEB-ITnose

この記事では、CSS3 アニメーションを使用して太陽系の惑星の公転のアニメーションを描画する方法を紹介し、それを改良して楕円軌道を描画する方法について説明します。次に、アニメーションを使用して JD.com と Renren の実際のケースを分析し、最後に CSS3 のクリップパスを組み合わせて特別なアニメーションを作成します。

太陽系の最終的なレンダリングは次のとおりです:

CSS3のアニメーションはキーフレームの形式で作成されます。まず、アニメーションの実行時間を設定し、次に、キーフレームを画面上のいくつかの位置に挿入します。プロセッサは、キーフレームで設定された内容に基づいてトランジション アニメーションを実行します。アニメーションは、多くの場合、transform 属性と組み合わせて作成されます。簡単な例を見てみましょう。下の図に示すように、div を使用して左から右に移動させます (アニメーションがない場合は、次のページを更新してください)

CSS を使用して静的な画像を描画しますまずアニメーションのプロパティを追加します。プロジェクト全体の完全なコードについては、このデモを参照してください。 HTMLは以下の通りです:

<div class='space'>    <div class='wheel'>        <span class='line'></span>     </div></div>

ホイールにアニメーション属性を追加します、

.wheel{<br />　　animation: move 3s linear infinite;<br />}<br />

これは、アニメーションの名前がmove、タイムラインが3s、速度が一定、再生回数が指定されていることを意味します。は無制限です。すると移動のキーフレームは以下の通りです:

@keyframes move{<br />        100%{            transform: translateX(350px);        }    }

つまり、再生が最後まで到達したら、X 軸の右に 350px 移動します。 0%で値は0、100%で350px、時間は3s、スピードカーブ属性もあり、この情報を元にトランジションアニメーションが作られています。指定された速度が線形の場合、アニメーションのトランジション効果は均一であり、均一な速度で右に移動します。デフォルトの速度カーブはイーズで、徐々に緩やかになり、中間の再生は速くなります。

次に、ホイールに回転効果を追加します。回転する必要がある回転数を取得するには、走行距離をホイールの円周で割ります。つまり、375 / (25 * 3.1415926 * 2) * 360 = 859.4 度です。間隔が右に移動すると、回転の効果も追加されるため、変換に追加の回転属性を追加します。

transform: translateX(350px) rotate(859.4deg);

以上です:

これは CSS3 のアニメーションで、サイズ、回転、変位、および変形のベベルを組み合わせると、2 ～ 3 行のコードで多くの興味深い効果を作成できます。

次に、太陽系の生成について説明します。上記との違いは、惑星は太陽の周りを公転しますが、車輪は自分の中心の周りを公転するため、回転基点が異なります。変換の基点がデフォルトで独自の中心になっていることがわかります。そのため、変換の惑星の中心点、transform-origin を変更する必要があります。完全なデモ。太陽系の HTML 構造は次のとおりです:

    <div class="galaxy">        <div class='sun'></div>        <div class='mercury'></div>        <div class='venus'></div>        <div class='earth'></div>    </div>

太陽は div 銀河の中央に位置し、他の惑星は太陽の右側に一列に並んでいます。ギャラクシーの幅と高さを 1300px に設定します。太陽画像のサイズは100px*100pxなので、太陽の左と上の値は(1300 - 100) / 2 = 600pxとなり、太陽は中央に位置します。水星が太陽の右側に位置するように、水星の左の値を 700 ピクセル、上の値を 625 ピクセルに設定します。次に、transform-origin:

transform-origin: -50px 25px;

を設定します。transform-origin の原点は要素の左上隅なので、左に (700 - 1300 / 2) = 50px 移動し、下に 60 / 2 = 移動します。 30px (60 は水星高度)、水星変換の基点は太陽の中心となり、これに基づいて回転が実行されます:

animation: rotation 2.4s linear infinite;@keyframes rotation{    to{        transform: rotate(1turn);    }}

ここでは同義の属性が 0% と 100% に変更されていることに注意してください。を from と to にそれぞれ置き換えると、 360deg を 1turn に置き換えます。

他の惑星もこのように設定されており、計算が少し面倒です。公転周期は地球の10秒を基準とし、その他の値は比例換算します。このようにして、太陽系の公転図を作成することができます。原理は非常に簡単ですが、効果は非常に優れています。

惑星の軌道は実際には楕円であり、上では真円が使用されていることに注意してください。そこで、楕円軌道を作成する方法について説明します。完全なデモを確認してください。効果図は以下の通りです。

上の楕円をY軸上で平坦化します。 原理は以下の図のようになります。楕円上の地球の初期位置とその他の短軸の交点で、transform-origin を半径 800px の円の中心の位置に設定しますが、実行時間は 50%、つまり、初期位置と逆の場合は、キーフレームを挿入します。ディスプレイスメント変換を実行し、y 軸の負の方向に 200px 移動します。これにより、半楕円軌道が形成されます。100% に達すると、徐々に戻ります。前の半楕円とは対照的に、完全な楕円軌道を完成させることができます。

楕円を実行するには、このエフェクトのタイムカーブをイーズインアウトのエフェクトに設定する必要があるため、translateY のエフェクトを設定するには、地球の外側に div のレイヤーをラップする必要があります。よりスムーズに。 HTML の構造は次のとおりです。

<div class='planet'>        <div class='origin-circle'></div>        <div class='sun'></div>        <div class='track'></div>        <div class='moveY'>            <div class='earth'></div>        </div></div>

　　给moveY添加一个translateY的动画，其它的一样。

.moveY{　　animation: moveY 2s ease-in-out infinite alternate; /*  */}<br />@keyframes moveY{<br />　　to{<br />　　　　transform: translateY(-200px);<br />　　}<br />}

　　注意这里将moveY的周期设置为旋转的一半，同时使用了一个transition-direction为alternate的属性，alternate意为交替，效果等同于

@keyframes moveY{    0%，100%{       transform: translateY(0px);    }　　50%{　　　　transform: translateY(-200px);　　}}

　　细心的读者会发现，这里的运行轨迹并不是严格的椭圆，旋转是匀速的，但是在y轴上的投影即在y轴上的速度是一条曲线，这条曲线理论上可以用贝赛尔曲线模拟出来，animation的速度参数改用cubic-bezier去模拟，ease-in-out等同于cubic-bezier(0.4,0,0.6,1)。通过一些数学换算理论上是可以模拟的，这里不再深入讨论。

　　还可以继续优化，让地球自转，自转的方法，可以在地球的div外面再包多一个div，让公转的动画由外层的div实现，而自转由地球的div完成。读者可以自行尝试。

　　接下来，讨论人人网、京东使用animation做动画的实例。

　　打开人人网的公共主页，当鼠标放到四个图标上面和离开的时候会有波浪形的动画：

　　这个动画研究下源代码，可以发现是用了一张长图，由很多张小图组成，每张小图就是这个动画的一帧。当鼠标hover时，添加一个active类，这个类的css里面使用animation，改变这张长图的translate位移，如下：

.active{    animation: movedown 500ms steps(12) forwards; }@keyframes moveup{    to{        background-position: 0 -1800px;    }}

 

　　上面设置动画的名称为movedown，播放时间500ms，forwars的意思是播放完成后，动画保持最后一帧的样式，相反的是backwards，和刚开始播放的时候一样，默认值是none，不会保持动画的样式。这个动画的重点在于steps，steps(12)的目的是设置播放12帧，这张长图用来播放hover动画是由12图小图组成的，对应12帧，因此每播放一帧，background-position的位置刚好指向下张小图的位置，这样就连成了一个连贯的逐帧动画。类似的动画可以见这个（来自jsfiddle），这个是实时的动画，老的浏览器可能会不支持。

 

　　第二个案例是京东首页的时钟，下面是一个实时的demo：

 

 

 

 

 

　　这个案例的技术手段是用了animation结合transform的rotate，跟上面的太阳系的技术手段一样，这里不再叙述，主要是位置的计算比较琐碎，源码可见这里。

　　上面的案例都是用了transform，下面使用clip-path做一些比较有趣的动画。关于clip-path的描述，可见笔者的另外一篇文章: 《使用css3新属性clip-path制作小图标》。这里简单作下说明，clip-path是用来裁剪的，如对一个div应用clip-path: circle(40% at 50% 50%)??裁剪的路径为一个圆，圆心在div的(50%, 50%)的位置，半径为40%，效果就是让这个div的可见区域为这个圆，圆外的像素浏览器都不会进行渲染。

　　使用transform可以做一些位移、大小、旋转的动画，而使用clip-path能够做一些形状变化的动画。效果如下，当鼠标放上去的时候，从一个圆沿半径方向逐渐外扩直至显示完整的照片。右下图为实时演示，请尝试把鼠标放上去（请使用chrome/safari浏览器）

 

　　html结构就是一张照片：

 

<img src="http://images2015.cnblogs.com/blog/818663/201510/818663-20151015222926741-365571868.png" alt=""/>

 

　　css如下：

img{            clip-path: circle(40% at 50% 50%);            -webkit-clip-path: circle(40% at 50% 50%);            transition: all 400ms ease;            cursor: pointer;}img:hover{            clip-path: circle(75% at 50% 50%);            -webkit-clip-path: circle(75% at 50% 50%);}

　　这里使用了transition动画，常和hover结合使用做过渡动画。transition: all 400ms ease这句设置transition作用在该元素所有CSS属性上，你也改成clip-path，只作用在clip-path这个属性，过渡时间为400ms，使用ease渐入渐出的效果和animatio一样。当hover的时候，就过渡到 clip-path: circle(75% at 50% 50%)，也就是显示的半径从40%到75%，hover结束时，再恢复成原先的40%，因此就有了上面的效果。当然clip-path还可以做很多有趣的变形动画，例如从四角变成五角，这里只是抛砖引玉，更多动画的效果读者可自行上网查找。

最後にまとめをしましょう。この記事では、アニメーションを変換と組み合わせて使用​​してアニメーションを作成する原理と構文を紹介し、変換の座標軸、変換の原点、複数のアニメーションをネストして複合効果を作成する機能など、いくつかの重要なポイントを分析します。次に、実際の制作事例を 2 つ示し、最後にトランジションとクリップパスの変形アニメーションを作成しました。 CSS3 のアニメーション効果はこれに限定されません。読者は、他のより興味深い事例をオンラインで検索できます。たとえば、次の 20 の優れた CSS3 テクニック ライブラリと例です。

参考:

1. https://css-tricks.com/almanac/properties/a/animation/ CSS トリックに関するアニメーションの紹介

2. almanac/properties/t/transition/ CSS トリックのトランジションの紹介