做有态度的前端团队

网易FEG前端团队

css3星球椭圆运动

上一个项目里碰到了要写一个星球运动的动画,其中主要的点就是用css3如何实现椭圆运动。上网找了很久,看到一个“css3太阳系”的文章介绍,但可惜是正圆的,给人的感觉是平面,不适合。实在找不到,就自己想了些思路:

  • 思路一:写个正圆的运动,然后用scale来变形。实践证明是不可行的,这样变形会导致里面的星球发生严重变形。

  • 思路二:把星球同时做X轴和Y轴的位移运动。根据抛物线的原理,这个方案貌似可行。最后实践证明原理是这样,但有些地方需要留意下,否则会变成菱形运动了。

先看一下效果图吧:

效果图1

失败实践:

先来看下椭圆的坐标示意图:

效果图2

所以,一开始的想法就是,从原点o出发(分别给x、y轴方向一个位移),然后分别在a、b、c点设置动画帧,改变他们的translate。但最终的实践证明,如果一开始同时改变x、y方向的位移,实际出来的轨迹是他们的对角线,而并非抛物线。

成功实践:

后来槟爷指点,稍微换了一下思路,先看下坐标示意图:

效果图3

做椭圆运动的球体还是在原点O位置,但一开始做y轴方向的位移,到达d坐标时,再加上x轴方向的位移。怎么做单这点呢,只需要把x轴的方向的运动延迟四分之一的时间:

.div1{
    -webkit-animation:star_ani_02 16s 4s ease-in-out infinite;
}
.div2{
    -webkit-animation:star_ani_01 16s 0s ease-in-out infinite;
}

一个方向先运动起来,有了加速度,到四分之一时,另一个方向再从0加速,从而产生抛物轨迹。

上面说的起点时间只是其中一部分,更详细的代码请点击查看DEMO:

css3星球椭圆运动 DEMO》》》

手机阅读请扫描下方二维码:

上一篇:FIS插件制作说明   下一篇:移动端Bug汇总

已有 3 条评论

  1. 评论 test

  2. 测试

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif