太阳、地球与月球

马黑黑 · 发表于 2022-4-7 22:32

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-7 22:34 编辑

马黑黑 · 发表于 2022-4-7 22:40

论坛对元素的padding有默认值，需要清除。

先看HTML结构：

<div id="outer">
<div id="sun">
<div id="earth">
<div id="moon"></div>
</div>
</div>
</div>

复制代码

外层是日地月的运动场所，是总父层，其下子层是日。日的子元素是地，地的子元素是月。

这个结构符合自然规律，为运动的设计提供便利。

马黑黑 · 发表于 2022-4-7 23:08

本帖最后由马黑黑于 2022-4-8 08:10 编辑

未有运动之前，日地月三者的位置如下图所示：

图片随意截取。我要说的是，太阳、地球、月球都居中，而且是绝对居中。怎么做到的？以太阳为例，它隶属于黑色“舞台”，是黑色背景div的子元素，position为绝对定位，left和top通过 calc 函数依据自身的宽高进行计算：

      width: 80px;
      height: 80px;
      left: calc(50% - 40px);
      top: calc(50% - 40px);

50%的left和top不能令其绝对居中，这是元素左上角基于父元素的xy坐标位置，要减去高宽的一半，太阳才会在舞台正中央。地球、月球使用同样的方法精准定位。之所以要精准定位，是为了配合动画的设计：动画设定运动对象以父元素的圆点为核心，以一定半径做圆周运动。

定位之后，还是以太阳为例，就可以以他所在的父元素的中心位置为运动圆点，按设定的半径围绕这个点旋转。地球绕太阳转，则始终以太阳的圆心为环绕核心；月球绕地球转同理，环绕的是地心。

我设计的动画只有一个，非常精妙：

@keyframes orbit {
      from { transform: rotate(0deg) translateY(var(--x)) rotate(0deg); }
      to { transform: rotate(360deg) translateY(var(--x)) rotate(-360deg); }
}

它不需要设置运动基点，通过transform的rotate和translateY来描述动画形态，from（从） 0deg、0deg 到（to） 360deg、-360deg的旋转变化，期间还有from（从） translateY(var(--x)) to（到） translateY(var（--x)) 的位移变化，是rotate和translateY/X的合作营造了对象运动的基点，无需额外设置transform-origin。这个动画将由太阳、地球和月球调用，它们的运动半径不一样，所以设定了一个CSS变量 var(--x)，赋值在各个元素的CSS代码里。

这个动画设计不是很好理解，尤其是rotate旋转。旋转的动作，最开始都不做，所以是前后都是0deg，变化周期的最后旋转形态，前后是正负360deg，故此，整周是旋转了360deg，然后又抵消回来。结果是，如果太阳、地球、月亮上面有文字，文字都是站着的。但它的这一从0到360度的旋转，与translate相配合，就能令对象做环绕圆周运动。

说明一下，from和to的最后一个rotate主要是为了平衡运动对象的姿势，本例可以删掉。