js实现变形

使用 JavaScript 实现变形效果

JavaScript 可以通过操作 DOM 元素的样式属性来实现变形效果，包括缩放、旋转、倾斜和平移等。以下是几种常见的变形实现方法。

使用 CSS transform 属性

通过修改元素的 transform 属性可以实现多种变形效果。transform 支持以下函数：

• translate(x, y)：平移元素。
• rotate(angle)：旋转元素。
• scale(x, y)：缩放元素。
• skew(x-angle, y-angle)：倾斜元素。

const element = document.getElementById('target');
element.style.transform = 'rotate(45deg) scale(1.5)';

使用 CSS 动画实现平滑变形

结合 CSS @keyframes 和 JavaScript 可以创建平滑的变形动画。

const element = document.getElementById('target');
element.style.animation = 'transformAnimation 2s infinite';

// 在 CSS 中定义动画
/*
@keyframes transformAnimation {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.5); }
  100% { transform: rotate(360deg) scale(1); }
}
*/

使用 requestAnimationFrame 实现高性能变形

对于复杂的变形动画，可以使用 requestAnimationFrame 逐帧更新变形状态。

let angle = 0;
function animate() {
  const element = document.getElementById('target');
  angle += 1;
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(animate);
}
animate();

使用 Web Animations API

现代浏览器支持 Web Animations API，可以直接通过 JavaScript 控制动画。

const element = document.getElementById('target');
element.animate(
  [
    { transform: 'rotate(0deg) scale(1)' },
    { transform: 'rotate(360deg) scale(1.5)' }
  ],
  {
    duration: 1000,
    iterations: Infinity
  }
);

使用 GSAP 库实现高级变形

GSAP（GreenSock Animation Platform）是一个强大的动画库，适合复杂的变形动画。

gsap.to('#target', {
  rotation: 360,
  scale: 1.5,
  duration: 2,
  repeat: -1,
  ease: 'power1.inOut'
});

变形矩阵与自定义变形

对于更复杂的变形，可以直接操作 matrix 或 matrix3d 属性。

const element = document.getElementById('target');
element.style.transform = 'matrix(1, 0.5, -0.5, 1, 0, 0)';

变形矩阵的格式为 matrix(a, b, c, d, tx, ty)，其中：

• a 和 d 控制缩放。
• b 和 c 控制倾斜。
• tx 和 ty 控制平移。

响应式变形

结合事件监听器可以实现交互式变形效果。

const element = document.getElementById('target');
window.addEventListener('mousemove', (e) => {
  const x = e.clientX / window.innerWidth;
  const y = e.clientY / window.innerHeight;
  element.style.transform = `rotate(${x * 360}deg) scale(${1 + y})`;
});

SVG 元素的变形

对于 SVG 元素，变形属性的操作方式略有不同。

const svgElement = document.getElementById('svg-target');
svgElement.setAttribute('transform', 'rotate(45 50 50)');

以上方法涵盖了 JavaScript 实现变形的常见场景，从基础的 CSS 变形到复杂的动画控制均可实现。