使用css3的动画模拟太阳系行星公转

本文介绍使用css3的animation画一个太阳系行星公转的动画，再加以改进，讨论如何画椭圆的运行轨迹。然后分析京东和人人网使用animation的实际案例，最后结合css3的clip-path做一些比较特别的动画。

太阳系最终的效果图如下：

　　css3的animation是通过关键帧的形式做出来的，首先设定一个动画的运行时间，然后在这个时间轴上的若干位置处插入关键帧，浏览器根据关键帧设定的内容做过渡动画。animation常结合transform属性进行制作。以一个简单的例子说明，以一个div，让其从左到右运动，如下图左所未(没有动画请刷新下页面)

　　先用css画出静态的图，然后再加动画的属性。整个工程完整的代码见这个Demo。html如下：

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

　　在轮子wheel加一个动画的属性，

.wheel{
　　animation: move 3s linear infinite;
}

　　这个的意思是动画的名字是move，时间轴是3s，速度是匀速，播放次数无限。然后move的关键帧keyframes如下：

@keyframes move{
        100%{
            transform: translateX(350px);
        }
    }

　　即播放到末尾的时候，向X轴右移350px。在0%的时候值0，100%的时候值为350px，时间为3s，还有一个速度曲线的属性，根据这些信息做过渡动画。如果指定速度为线性linear，则动画的过渡效果是匀速的，对于上面来说就是匀速右移。默认的速度曲线为ease，就是渐进和渐出，中间播放比较快。

　　然后再给轮子添加一个滚动的效果rotate，用运行的距离除以轮子的周长得出需要滚动多少圈，即375 / (25 * 3.1415926 * 2) * 360 = 859.4度，也就是在这个区间向右移动的同时加上自转的效果，所以给transform添加多一个rotate的属性。

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

　　这样就可以了：

　　这就是css3的animation动画，结合transform的大小、旋转、位移、斜切，通过两三行代码，便可做出很多有趣的效果。

      接下来讨论太阳系的制作，跟上面不同的地方是行星是围绕着太阳转的，而轮子是围绕着自己的圆心转的，也就是说他们转的基点不同。可以看出，transform的基点默认是本身的中心center，所以我们要改变行星的进行转换的中心点transform-origin。完整的Demo。太阳系的html结构如下：

 

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

 

　　太阳位于div galaxy的中间，让其它行星位于太阳的右边排成一条线。设置galaxy的width和height都为1300px。sun图片的大小为100px*100px，所以sun的left值和top值都为(1300 - 100) / 2 = 600px，这样sun就位于中间位置。设置水星mercury的left值为700px，top为625px，这样水星就位于太阳偏右的位置。然后再设置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。

　　其它的行星，也按照这种方法进行设置，计算稍微繁琐。公转的周期以地球10s为基准，其它按比例换算。这样就可以做出一个太阳系公转的图，原理很简单，效果却很好。

　　注意到行星运行的轨迹其实是椭圆形的，上面是用了正圆形。因此，下面讨论如何做一个椭圆的运行轨迹。查看完整的Demo。效果图如下：

 

　　上面的椭圆在Y轴上被压扁了，可以考虑在Y轴上添加一个位移变换，原理如下图所示，首先将地球的初始位置放到椭圆和其短轴的交点处，然后transform-origin设置为半径为800px的圆心的位置，但运行时间为50%即到初始位置对面的时候，插入一个关键帧：做一个位移转换，向y轴负方向移动200px，这样就可以形成一个半椭圆的轨迹，到了100%的时候逐渐恢复为初始值0，跟前面的半椭圆相反，就可以完成一个完整的椭圆轨迹。

 

　　需要在earth的外面包一层div，用来设置translateY的效果，因为这个效果的时间曲线需要设置为ease-in-out渐进渐出的效果，让椭圆运行起来更加的顺畅。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; /*  */
}
@keyframes moveY{
　　to{
　　　　transform: translateY(-200px);
　　}
}

　　注意这里将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还可以做很多有趣的变形动画，例如从四角变成五角，这里只是抛砖引玉，更多动画的效果读者可自行上网查找。

　　最后，做个总结。这篇文章介绍了使用animation结合transform做动画的原理和语法，并且分析了几个关键的要点，包括transform的坐标轴、转换的原点，还有，可以通过嵌套几个动画做出复合的效果，接着展示了两个实际的生产案例，最后对transition和clip-path做了一个变形的动画。css3的动画效果不限于此，读者可上网搜索其它更有趣的案例。例如这个20 impressive css3 techniques libraries and examples。

 

个人博客： http://yincheng.site/css3-animation

参考：

1. https://css-tricks.com/almanac/properties/a/animation/ css tricks上关于animation的介绍

2. https://css-tricks.com/almanac/properties/t/transition/ css tricks上关于transition的介绍