JS怎么让动图动

通过JavaScript让动图动的方法主要有：设置src属性、使用CSS动画、控制DOM元素、利用Canvas绘图。以下将详细介绍如何通过设置src属性让动图动。

一、设置src属性

设置src属性是通过JavaScript让动图动的最直接方法。通过动态改变图片的src属性，可以让动图重新加载并播放。

一、设置`src`属性让动图动

1. 动态改变图片的`src`属性

通过JavaScript修改图片的src属性，可以有效地让动图重新加载并动起来。这种方法非常适合用于简单的交互场景。例如，当用户点击按钮时，动图重新播放。

// 获取动图元素
const gif = document.getElementById('myGif');
// 重新设置src属性
gif.src = gif.src;

2. 使用唯一的查询参数

为了确保动图每次都能重新加载，可以在src属性中添加一个唯一的查询参数，例如时间戳。这种方法可以避免浏览器缓存的问题。

// 获取动图元素
const gif = document.getElementById('myGif');
// 重新设置src属性，并添加时间戳参数
gif.src = gif.src.split('?')[0] + '?' + new Date().getTime();

二、使用CSS动画

CSS动画可以通过keyframes和animation属性实现元素的动画效果。虽然这种方法主要用于静态图片的动画，但也可以与JavaScript结合使用，为动图增加更多的交互效果。

1. 定义CSS动画

首先，定义一个简单的CSS动画，例如旋转效果。

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-rotate {
    animation: rotate 2s linear infinite;
}

2. 通过JavaScript添加动画类

使用JavaScript动态地向动图元素添加CSS动画类，实现动图的动画效果。

// 获取动图元素
const gif = document.getElementById('myGif');
// 添加CSS动画类
gif.classList.add('animate-rotate');

三、控制DOM元素

通过JavaScript控制DOM元素的显示和隐藏，可以实现动图的动态效果。例如，通过切换动图和静态图的显示状态，让动图看起来像是在播放和暂停。

1. 切换动图和静态图

首先，准备一个动图和一个静态图。

<img id="myGif" src="path/to/animated.gif" style="display: none;">
<img id="myImg" src="path/to/static.png">

2. 使用JavaScript控制显示和隐藏

通过JavaScript切换动图和静态图的显示状态，实现动图的动态效果。

// 获取动图和静态图元素
const gif = document.getElementById('myGif');
const img = document.getElementById('myImg');
// 切换显示和隐藏
function toggleGif() {
    if (gif.style.display === 'none') {
        gif.style.display = 'block';
        img.style.display = 'none';
    } else {
        gif.style.display = 'none';
        img.style.display = 'block';
    }
}

四、利用Canvas绘图

Canvas绘图技术可以实现更加复杂和精细的动画效果。通过JavaScript控制Canvas绘图，可以实现动图的播放和暂停。

1. 创建Canvas元素

首先，创建一个Canvas元素。

<canvas id="myCanvas" width="500" height="500"></canvas>

2. 使用JavaScript绘制动画

通过JavaScript在Canvas上绘制动画，实现动图的动态效果。

// 获取Canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 初始化动画参数
let x = 0;
let y = 0;
let dx = 2;
let dy = 2;
// 动画函数
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fillStyle = '#0095DD';
    ctx.fill();
    ctx.closePath();
    x += dx;
    y += dy;
    if (x + dx > canvas.width || x + dx < 0) {
        dx = -dx;
    }
    if (y + dy > canvas.height || y + dy < 0) {
        dy = -dy;
    }
    requestAnimationFrame(draw);
}
// 开始动画
draw();

通过以上四种方法，可以实现JS让动图动的效果。每种方法都有其独特的优点和适用场景，可以根据具体需求选择合适的方法。例如，简单的交互场景可以使用修改src属性的方法，而复杂的动画效果可以选择Canvas绘图技术。