CSS 动画实现星球环绕效果

18,561

大家好,我是97年的前端小鲜肉绿生,日常对接设计师“奇怪”的想法🤔。今天为大家带来一个实用的前端小技巧。在做某 H5 活动页时,设计师山田出了一个行星环绕运动 🪐 的效果图 ,五颗球需要围绕倾斜的轨道进行旋转运动。JavaScript 可以画很多复杂的动画,各种星球类的实现网上有很多,那么如何用 CSS 实现这个效果呢?

CSS 实现效果:

1616045664764-f8401335-1219-43c2-96e5-35fab4e8011f.gif

在线 Demo 链接

再认识 CSS Transform

在开始之前,先回顾一些 CSS Transform 的知识点~

Transform

坐标系

image.png

X 轴:屏幕左上角为原点,水平方向为 X 轴

Y 轴:屏幕左上角为原点,垂直方向为 Y 轴

Z 轴:屏幕左上角为原点,垂直电脑的轴为 Z 轴,可以理解为指向我们的轴

transform 参数的执行顺序

transform 中传入的效果是有先后执行顺序的(效果上看,可以理解为后传入先执行,但实际计算是以矩阵matrix 的方式去算的),且转换会改变坐标轴。

如下图,skew、scale、rotate... 本质上都是用 matrix 实现的,只不过 rotate 这种形式更容易让人上手。

image.png

matrix 方法有两种:
1、matrix() 3x3 矩阵
2、matrix3d() 4x4 矩阵

举个例子:

transform: rotate(30deg);

// matrix(cos30°,sin30°,-sin30°,cos30°,0,0);
transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);

这两种方式的表现结果是一致的,但如果要用纯 matrix 实现 rotate,你需要手动计算各种 sin,cos 值。

再举两个简单的例子,帮助快速理解 transform 的计算(执行)顺序:

  1. 先执行 scaleX(0.5) 把正方形变成了长方形,再执行 rotateZ(45deg) 把元素顺时针旋转 45 度,得到的是一个倾斜的长方形:
.test_transform {
  width:100px;
  height:100px;
  background-color: #c685d9;
  transform: rotate(45deg) scaleX(0.5);
}

image.png

  1. 先执行顺时针旋转 45 度,再压缩 X 轴,得到了一个菱形:
.test_transform_2 {
  ...
  transform: scaleX(0.5) rotate(45deg);
}

image.png

rotate

简单的旋转,rotate(45deg) 其实就是 rotateZ(45deg)。

image.png

scale

缩放,如 scaleY(0.6)

image.png

scale() 仅适用于在欧几里德平面(二维平面)上的变换。如果需要进行空间中的缩放,必须使用 scale3D() 。

下面介绍如何用 CSS 实现一个简单的单球环绕效果:

实现单球环绕效果

Step1 - 基础样式

image.png

<div className='wrap'>
  <div className='planet'>
    <div className='ball' />
  </div>
</div>
.wrap {
  display: flex;
  background-image: linear-gradient(180deg, #020205 0%, #170f39 51%, #35247a 95%);
  width: 600px;
  height: 600px;
  align-items: center;
  justify-content: center;
}

.planet {
  position: absolute;
  border: 2px solid #fff;
  transform-style: preserve-3d;
  width: 200px;
  height: 200px;
}

.ball {
  width: 50px;
  height: 50px;
  position: absolute;
  border-radius: 50%;
  background-color: yellowgreen;
}

Step2 - 让圆形穿过轨道

image.png

.ball {
  // ...
  left: calc(50% - 25px);
  top: -25px;
}

为什么需要这一步?假使给这个方形加上 border-radius: 50% 转为一个圆形,目前图中所处的点才是串在圆形轨道上的,正方形四个角的点对应的半径会大于圆形的半径。

Step3 - 旋转轨道

image.png

.planet {
  transform: rotateZ(45deg);
}

.ball {
  transform: rotateZ(-45deg); // 中和轨道的旋转
}

Step4 - 压缩轨道 Y 轴,形成 3D 效果

注意先后顺序,需要先旋转再压缩,否则会变成一个倾斜的长方形

image.png

.planet {
  transform: scaleY(0.5) rotateZ(45deg);
}

.ball {
  // 中和轨道的 scaleY 压缩,2 * 0.5 = 1 恢复原状,注意传入顺序,和 .planettransform 是相反的,就像连续上了几个不同的锁,打开时要用和上锁相反的顺序去解
  transform: rotateZ(-45deg) scaleY(2);
}

Step5 - 把轨道变成椭圆形

image.png

.planet {
  border-radius: 50%;
}

Step6 - 让轨道转起来

上面的步骤已经把原来的图形变成了一个类似轨道和星球的图形了,只要遵循上述关于 rotateZ 和 scaleY 的中和规律,就能让轨道转起来,且保持球体的样式不被压缩:

1616053387270-7ecf4769-40b5-4cb0-8461-1f79bd99586e.gif

// 公转动画
@keyframes planet-rotate {
  0% {
    transform:  scaleY(0.5) rotate(0);
  }
  100% {
    transform:  scaleY(0.5) rotate(360deg);
  }
}

// 自转动画
@keyframes self-rotate {
  0% {
    transform: rotate(0) scaleY(2);
  }
  100% {
    transform: rotate(-360deg) scaleY(2);
  }
}

.planet {
  animation: planet-rotate 20s linear infinite;
}

.ball {
  animation: self-rotate 20s linear infinite;
}

Step7 - 让轨道产生倾斜角度

依旧利用 transform 的执行顺序,只要在最后再执行一个 rotate(Z),就能让整个平面产生倾斜感

1616053594414-87104715-d988-458a-9918-5fd759f88f42.gif

@keyframes planet-rotate {
  0% {
    transform:  rotate(45deg) scaleY(0.5) rotate(0);
  }
  100% {
    transform:  rotate(45deg) scaleY(0.5) rotate(360deg);
  }
}

@keyframes self-rotate {
  0% {
    transform: rotate(0) scaleY(2) rotate(-45deg);
  }
  100% {
    transform: rotate(-360deg) scaleY(2) rotate(-45deg);
  }
}

实现多球环绕效果

因为一个轨道容器最多只能保证四个球是在圆形轨道上运动的,如果要实现大于 4 个球的运动,其实只要重叠多个轨道 + 球的平面,但只展示一个轨道(border)即可。

运动模型

独立运动个体 = 单球体 + 单球体所在轨道(父元素)
多球环绕 = 独立运动个体 * N 重叠在同一位置,并仅展示最底层球体所在轨道,其余轨道隐藏,最后对每个独立运动个体进行初始旋转位置的偏移

实现步骤

下面以 5 个球的场景为例,介绍如何实现多球环绕的效果,为了编写方便使用了 React + Sass:

1. 编写基本 DOM 结构与样式

Jsx

// 传入数据
const dataSource = [
  {
    name: '山田',
  },
  // ...
];

// 渲染一个球 + 名字的 DOM
const renderCircleBoxItem = (name: string) => {
  return (
    <div className={styles.circleBoxItem}>
      <div className={styles.ball} />
      <div className={styles.name}>{name}</div>
    </div>
  );
};

// 根据 dataSource 的数量来渲染多个旋转体
<div className={styles.circleBoxWrap}>
  {
    dataSource.map((item, key) => (
      <div key={key} className={styles.circleBox}>{renderCircleBoxItem(item.name)}</div>
    ))
  }
</div>

Sass

// 轨道层 keyframes
@function getPlanetRotate($rotateValue) {
  @return rotate(45deg) scaleY(0.5) rotate(#{$rotateValue});
}

@keyframes planet-rotate {
  0% {
    transform: getPlanetRotate(0deg);
  }
  100% {
    transform: getPlanetRotate(360deg);
  }
}

// 自转球体 keyframes
@function getSelfRotate($rotateValue) {
  @return rotate(#{$rotateValue}) scaleY(2) rotate(-45deg) scale(1)) translateX(50px);
  // 这里 translateX 是为了修正球的位置,使之尽量保持在轨道上运动
}

@keyframes self-rotate {
  0% {
    transform: getSelfRotate(0deg);
  }
  100% {
    transform: getSelfRotate(-360deg);
  }
}

// 轨道元素,内含一个球体
.circleBox {
  // 统一转动速度
  $planet-rotate-speed: 30s;
  
  // 随便定个轨道大小
  width: 648px;
  height: 648px;
  position: absolute;
  transform-style: preserve-3d;
  	
  // 让轨道呈圆形
  border-radius: 50%;

  // 球体元素(球 + 文字 label)
  .circleBoxItem {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
      
    // 位置修正,要让球 + 文字的单元处于父元素(不加 border-radius 时是一个正方形)的一边的中心位置
    //,这样才能在形成椭圆轨道时,始终贴合轨道运动
    width: 200px; // 球 + 文字定宽,方便计算位置修正
    top: -30px; // 球的直径是 60px,向上偏移一半
    left: calc(50% - #{p2r(100)}); // 横向居中
      
    .ball {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      border: 6px solid #fff;
      background-color: #6d45ca;
      margin-right: p2r(20);
    }
  
    .name {
      // 文字相关的样式...
    }
  }

  &:nth-child(1) {
    border: p2r(2) solid #fff;
    
    animation: planet-rotate $planet-ratate-speed linear infinite;
    .circleBoxItem {
      animation: self-rotate $planet-ratate-speed linear infinite;
    }
  }
}

2. 处理轨道偏移

为了让球体们产生偏移,需要对每个 独立运动个体 的初始旋转位置产生偏移计算,对轨道的 keyframes 进行改写:

Sass

// 使用 css 变量控制步长(即偏移距离)
:root {
  --planet-rotate-step: 72deg; // 72 = 360 / 5
}

@function getPlanetRotate($rotateValue) {
  @return rotate(45deg) scaleY(0.5) rotate(#{$rotateValue});
}

@keyframes planet-rotate-1 {
  0% {
    transform: getPlanetRotate(0deg);
  }
  100% {
    transform: getPlanetRotate(360deg);
  }
}

@keyframes planet-rotate-2 {
  0% {
    transform: getPlanetRotate(calc(0deg + var(--planet-rotate-step) * 1));
  }
  100% {
    transform: getPlanetRotate(calc(360deg + var(--planet-rotate-step) * 1));
  }
}

@keyframes planet-rotate-3 {
  0% {
    transform: getPlanetRotate(calc(0deg + var(--planet-rotate-step) * 2));
  }
  100% {
    transform: getPlanetRotate(calc(360deg + var(--planet-rotate-step) * 2));
  }
}

// ...

3. 处理球体运动

球体需要针对轨道的旋转路径进行位置修正,编写球体的 keyframes:

@function getSelfRotate($rotateValue) {
  @return rotate(#{$rotateValue}) scaleY(2) rotate(-45deg) scale(1) translateX(50px);
}

@keyframes self-rotate-1 {
  0% {
    transform: getSelfRotate(0deg);
  }
  100% {
    transform: getSelfRotate(-360deg);
  }
}

@keyframes self-rotate-2 {
  0% {
    transform: getSelfRotate(calc(0deg - var(--planet-rotate-step) * 1));
  }
  100% {
    transform: getSelfRotate(calc(-360deg - var(--planet-rotate-step) * 1));
  }
}

@keyframes self-rotate-3 {
  0% {
    transform: getSelfRotate(calc(0deg - var(--planet-rotate-step) * 2));
  }
  100% {
    transform: getSelfRotate(calc(-360deg - var(--planet-rotate-step) * 2));
  }
}

// ...

4. Animations 语句编写

调整元素的 animation:

.circleBox {
  &:nth-child(1) {
    // 仅显示第一个轨道
    border: p2r(2) solid #fff;

    animation: planet-rotate-1 $planet-rotate-speed linear infinite;
    .circleBoxItem {
      animation: self-rotate-1 $planet-rotate-speed linear infinite;
    }
  }

  &:nth-child(2) {
    animation: planet-rotate-2 $planet-rotate-speed linear infinite;
    .circleBoxItem {
      animation: self-rotate-2 $planet-rotate-speed linear infinite;
    }
  }

  &:nth-child(3) {
    animation: planet-rotate-3 $planet-rotate-speed linear infinite;
    .circleBoxItem {
      animation: self-rotate-3 $planet-rotate-speed linear infinite;
    }
  }
  
  // ...
}

5. 搭配 CSS 变量自动计算球的间距

真实场景需要根据传入的数据个数自动处理球的间距(偏移距离),这时可以用 JS 动态计算并修改刚才的 CSS 变量来完美解决:

const number = dataSource.length;
const step = 360 / number;

document.documentElement.style.setProperty('--planet-rotate-step', `${step}deg`);

1616045664764-f8401335-1219-43c2-96e5-35fab4e8011f.gif

一个星球环绕的 CSS 动画就完成啦,感谢大家观看,我们下期再会~


2021年校招(面向2022年毕业的同学们)正式开始啦!联系我们请注明来源掘金,看下图👇 了解更多信息~

image.png