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 变形到复杂的动画控制均可实现。
