元素跃动、粒子飞扬——前端动效的奇妙世界

2024-01-07 15:37:42

前端动效与粒子效果

在前端开发中，动效可以为用户带来更加生动有趣的交互体验。它可以帮助用户理解界面的功能，也能让界面更加美观。粒子效果作为一种常见的动效形式，因其轻盈、灵动、富有科技感等特点，受到广大前端开发者的青睐。

实现粒子效果的利器——CSS3dObject

CSS3dObject这个对象，可以让我们像操作three.js对象那样来操作div，使用three.js丰富的api来实现css+div的3d效果。实际上最终效果就是把three.js的参数转化为css的matrix。

我们看一段简单的代码，这是创建一个div元素，然后使用three.js的PerspectiveCamera创建一个透视相机：

const container = document.createElement('div');
document.body.appendChild(container);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

这段代码的效果就是创建一个绿色的立方体，然后让它围绕自身旋转。

更多精彩的粒子效果

除了基本的立方体，我们还可以使用CSS3dObject来创建更加复杂的粒子效果。例如，我们可以创建一个粒子系统，让粒子在屏幕上随机移动。我们也可以创建一个粒子爆炸效果，让粒子从一个点向四周扩散。

const container = document.createElement('div');
document.body.appendChild(container);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const scene = new THREE.Scene();

const geometry = new THREE.SphereGeometry(0.1, 16, 16);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });

for (let i = 0; i < 100; i++) {
  const particle = new THREE.Mesh(geometry, material);
  particle.position.x = Math.random() * 10 - 5;
  particle.position.y = Math.random() * 10 - 5;
  particle.position.z = Math.random() * 10 - 5;

  scene.add(particle);
}

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);

  for (let i = 0; i < scene.children.length; i++) {
    const particle = scene.children[i];

    particle.position.x += 0.01;
    particle.position.y += 0.01;
    particle.position.z += 0.01;
  }

  renderer.render(scene, camera);
}

animate();