Bagaimana untuk Memutar Berbilang Objek Di Sekitar Bulatan Menggunakan CSS dan JavaScript?

Memutar Berbilang Objek Mengelilingi Bulatan Menggunakan CSS

Dalam percubaan untuk mencipta animasi di mana berbilang objek berputar di sekeliling bulatan, didapati bahawa hanya satu objek berputar dengan betul. Artikel ini bertujuan untuk memberi panduan tentang menyelesaikan isu ini untuk memastikan semua objek yang diingini berputar dengan lancar di sekeliling bulatan.

Kod dan Pelaksanaan Sedia Ada

Kod yang disediakan melibatkan "outCircle " div yang bertindak sebagai pusat putaran, dan di dalamnya, div "putar" bersarang mengandungi objek yang akan dianimasikan. Menggunakan animasi CSS3, div "putar" dikonfigurasikan untuk berputar selama-lamanya di sekitar "outCircle." Walau bagaimanapun, percubaan untuk menambah objek tambahan dalam div "putar" mengakibatkan tingkah laku yang tidak diingini.

Penyelesaian

Untuk menangani isu ini, pendekatan berasaskan JavaScript adalah lebih sesuai untuk mengendalikan berbilang putaran objek:

var radius = 100; // Adjust to place items closer or farther from the center
var fields = $('.item'); // Target the objects to be rotated
var container = $('#container'); // Parent div encasing the rotating objects
var width = container.width();
var height = container.height();
var angle = 0;
var step = (2 * Math.PI) / fields.length; // Calculate the angular separation between objects

fields.each(function() {
  // Calculate the coordinates for each object based on its position in the circle
  var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
  var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
  if (console) {
    console.log($(this).text(), x, y); // Display coordinates for debugging
  }

  $(this).css({
    left: x + 'px', // Set the left position
    top: y + 'px', // Set the top position
  });

  // Increment the angle based on the spacing between objects
  angle += step;
});

Tambahan Pertimbangan

Selain itu, CSS3 boleh digunakan untuk mengkonfigurasi tingkah laku animasi:

body {
  padding: 2em;
}

#container {
  width: 200px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid #000;
  position: relative;
  border-radius: 50%;
  animation: spin 10s linear infinite; //  Define the animation duration and direction
}

.item {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  background: #f00;
  animation: spin 10s linear infinite reverse; //  Reverse the animation for each object
}

@keyframes spin {
  100% {
    transform: rotate(1turn); //  Rotate the objects one full turn
  }
}

Contoh

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><p>Pendekatan ini menyediakan penyelesaian yang fleksibel dan berskala untuk memutarkan sebarang bilangan objek di sekeliling bulatan menggunakan CSS3 dan JavaScript.</p></div>

Atas ialah kandungan terperinci Bagaimana untuk Memutar Berbilang Objek Di Sekitar Bulatan Menggunakan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!