九种原生js动画效果

九种原生JS动画效果完整攻略

本文将介绍九种原生JS动画效果以及它们的实现方式。这些动画效果包括：

1. 渐变动画
2. 逐帧动画
3. 滑动动画
4. 旋转动画
5. 缩放动画
6. 翻转动画
7. 悬浮动画
8. 弹跳动画
9. 循环动画

渐变动画

渐变动画的实现方式很简单，可以通过改变元素的透明度来实现。以下是一个示例：

let opacity = 0;
let element = document.getElementById('myElement');
let interval = setInterval(function() {
    opacity += 0.05;
    element.style.opacity = opacity;
    if (opacity >= 1) {
        clearInterval(interval);
    }
}, 100);

上面的代码将使元素以每100毫秒0.05的速度增加透明度，直到透明度为1。

逐帧动画

逐帧动画是指通过连续的图片（也可以是HTML元素）来实现动画效果，每张图片都在一定时间内显示。以下是一个示例：

let frameIndex = 0;
let frames = document.getElementsByClassName('frame');
let interval = setInterval(function() {
    for (let i = 0; i < frames.length; i++) {
        frames[i].style.display = 'none';
    }
    frames[frameIndex].style.display = 'block';
    frameIndex++;
    if (frameIndex >= frames.length) {
        frameIndex = 0;
    }
}, 100);

上面的代码将在每100毫秒内显示下一张图片（来自class名为frame的元素），如果所有图片都显示一遍后，重新开始。

滑动动画

滑动动画可以通过逐渐改变元素的位置来实现。以下是一个示例：

let position = 0;
let element = document.getElementById('myElement');
let interval = setInterval(function() {
    position += 1;
    element.style.transform = 'translateX(' + position + 'px)';
    if (position >= 100) {
        clearInterval(interval);
    }
}, 10);

上面的代码将使元素以每10毫秒的速度向右滑动，直到滑动了100像素。

旋转动画

旋转动画可以通过改变元素的旋转角度来实现。以下是一个示例：

let rotation = 0;
let element = document.getElementById('myElement');
let interval = setInterval(function() {
    rotation += 5;
    element.style.transform = 'rotate(' + rotation + 'deg)';
    if (rotation >= 360) {
        rotation = 0;
    }
}, 50);

上面的代码将使元素每50毫秒旋转5度，旋转了一圈后重新开始。

缩放动画

缩放动画可以通过改变元素的宽度和高度来实现。以下是一个示例：

let scale = 1;
let element = document.getElementById('myElement');
let interval = setInterval(function() {
    scale -= 0.05;
    element.style.transform = 'scale(' + scale + ')';
    if (scale <= 0.5) {
        clearInterval(interval);
    }
}, 50);

上面的代码将使元素以每50毫秒0.05的速度缩小，直到缩小为原来的一半。

翻转动画

翻转动画可以通过改变元素的旋转角度和透视点来实现。以下是一个示例：

let rotation = 0;
let element = document.getElementById('myElement');
let interval = setInterval(function() {
    rotation += 5;
    element.style.transform = 'rotateY(' + rotation + 'deg)';
    if (rotation >= 180) {
        element.style.perspective = 'none';
    } else {
        element.style.perspective = '1000px';
    }
    if (rotation >= 360) {
        rotation = 0;
    }
}, 50);

上面的代码将使元素以每50毫秒旋转5度，同时改变透视点，实现翻转动画。

悬浮动画

悬浮动画可以通过改变元素的位置和透明度来实现。以下是一个示例：

let position = 0;
let opacity = 1;
let element = document.getElementById('myElement');
let interval = setInterval(function() {
    position += 1;
    element.style.transform = 'translateY(' + position + 'px)';
    opacity -= 0.01;
    element.style.opacity = opacity;
    if (position >= 50) {
        clearInterval(interval);
    }
}, 10);

上面的代码将使元素在上升的同时逐渐消失，直到上升了50像素。

弹跳动画

弹跳动画可以通过改变元素的位置和透明度来实现。以下是一个示例：

let position = 0;
let opacity = 1;
let element = document.getElementById('myElement');
let interval = setInterval(function() {
    position += 5;
    element.style.transform = 'translateY(' + position + 'px)';
    opacity -= 0.02;
    element.style.opacity = opacity;
    if (position >= 50) {
        position -= 5;
        element.style.transform = 'translateY(' + position + 'px)';
        clearInterval(interval);
        setTimeout(function() {  // 回弹效果
            let opacity = 0;
            let interval = setInterval(function() {
                opacity += 0.05;
                element.style.opacity = opacity;
                if (opacity >= 1) {
                    clearInterval(interval);
                }
            }, 100);
        }, 500);
    }
}, 50);

上面的代码将使元素在上升的同时逐渐消失，直到上升了50像素，然后回弹并逐渐出现。

循环动画

循环动画可以通过逐渐改变元素的属性来实现，然后在一定时间后重复执行。以下是一个示例：

let rotation = 0;
let element = document.getElementById('myElement');
let interval = setInterval(function() {
    rotation += 10;
    element.style.transform = 'rotate(' + rotation + 'deg)';
    if (rotation >= 360) {
        rotation = 0;
        setTimeout(function() {  // 一定时间后重新开始
            clearInterval(interval);
            interval = setInterval(arguments.callee, 50);
        }, 3000);
    }
}, 50);

上面的代码将使元素每50毫秒旋转10度，旋转了一圈后等待3秒后重新开始旋转。

总结

九种原生JS动画效果分别是渐变动画、逐帧动画、滑动动画、旋转动画、缩放动画、翻转动画、悬浮动画、弹跳动画和循环动画。每种动画效果都有不同的实现方式，但大部分都是通过改变元素的属性来实现。希望本篇文章能对您有所帮助！