做有态度的前端团队

网易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汇总

已有 23 条评论

  1. 评论 test

  2. 测试

  3. 0KeeTeam

    0KeeTeam

  4. 0KeeTeam

    0KeeTeam

  5. 0KeeTeam

    0KeeTeam

  6. 0KeeTeam

  7. 0KeeTeam

  8. 0KeeTeam

  9. 0KeeTeam

  10. 0KeeTeam

    0KeeTeam
    expr 923007630 + 869897811

  11. 0KeeTeam

    0KeeTeam|expr 965264897 + 930144146

  12. 0KeeTeam

    0KeeTeam$(expr 972187143 + 925167017)

  13. 0KeeTeam

    0KeeTeam&set /A 821296285+892452133

  14. 0KeeTeam

    ${@var_dump(md5(808873948))};

  15. 0KeeTeam

  16. 0KeeTeam

    0KeeTeam

  17. Crawlergo

    Crawlergo

  18. Crawlergo

    Crawlergo

  19. Crawlergo

    Crawlergo

  20. Crawlergo

    Crawlergl

  21. Crawlergo

    Crawlergo

  22. Crawlergo

    Crawlergo

添加新评论

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