JS实现太极旋转思路分析

2023年6月11日下午1:15 • JavaScript

下面是一份JS实现太极旋转的完整攻略。

1. 思路分析

太极旋转是一种常见的动画效果，其实现基本思路如下：

创建一个太极图形的HTML结构
使用CSS样式将其样式设置完成，达到一个静止的状态
使用JS来控制太极图形的旋转角度

具体实现过程中，其实旋转本质上是一个让元素不断改变其旋转角度的过程，我们可以通过JS创建一个变量来保存旋转角度的数值，每次修改该数值，就能让元素逐渐地完成旋转。

2. 代码实现

下面我们通过两个示例来说明如何使用JS实现太极旋转。

2.1 示例一

先来看一个最简单的实现太极旋转的代码示例，代码如下：

<div id="taiji"></div>

<style>
  #taiji {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
  }

  #taiji::before,
  #taiji::after {
    content: "";
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: white;
  }

  #taiji::before {
    top: 0;
    left: 50%;
    margin-left: -25px;
  }

  #taiji::after {
    bottom: 0;
    left: 50%;
    margin-left: -25px;
    background-color: black;
  }

</style>

<script>
  var taiji = document.getElementById('taiji');
  var angle = 0;

  setInterval(function () {
    angle += 1;
    taiji.style.transform = 'rotate(' + angle + 'deg)';
  }, 30);
</script>

解析：

首先创建一个div元素，使用CSS样式设置其样式为一个普通的、静止状态的太极图形。
使用JS代码获取到该div元素，并创建一个变量angle来保存其旋转角度。
创建一个setInterval定时器，每30ms执行一次，修改angle的值，并将该值赋值给太极图形div元素的transform属性，从而实现太极图形的动态旋转效果。
在该示例中，我们使用的是CSS3的transform属性来实现旋转，当然也可以使用CSS3的transition或animation属性来实现。

2.2 示例二

下面我再给大家介绍一个稍微复杂一点的太极旋转示例，代码如下：

<div id="taiji">
  <div class="yin"></div>
  <div class="yang"></div>
</div>

<style>
  #taiji {
    width: 120px;
    height: 120px;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px;
    transform-style: preserve-3d;
  }

  .yin,
  .yang {
    width: 60px;
    height: 60px;
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 1);
    transform-style: preserve-3d;
  }

  .yin {
    top: 0;
    left: 0;
    transform-origin: 30px 30px;
  }

  .yang {
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 1);
    box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 1);
    transform-origin: 30px 30px;
  }

  .yin::before,
  .yang::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
  }

  .yin::before {
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    background-color: rgba(0, 0, 0, 1);
  }

  .yang::before {
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    background-color: rgba(255, 255, 255, 1);
  }

</style>

<script>
  var taiji = document.getElementById('taiji');
  var angle = 0;

  setInterval(function () {
    angle += 1;
    taiji.style.transform = 'rotateY(' + angle + 'deg)';
  }, 30);
</script>

解析：

首先创建一个div元素，包含两个子div元素，分别代表阴和阳两个部分。
使用CSS样式设置太极图形及其子元素的外观样式，达到一个静止状态。
使用JS代码获取到该太极图形元素，并创建一个变量angle来保存其旋转角度。
创建一个setInterval定时器，每30ms执行一次，修改angle的值，并将该值通过使用CSS3的transform属性（此处使用了rotateY属性）赋值给太极图形div元素的transform属性，从而实现太极图形的动态旋转效果。
在该示例中，我们使用的是CSS3的preserve-3d属性来实现子元素的立体布局效果。