js animate|极客笔记

js animate

在现代web开发中，动画是一种常见的需求。JavaScript提供了许多方法来实现各种类型的动画效果。本文将介绍JavaScript中的动画概念、常用的动画技术以及一些示例代码来展示如何用JavaScript创建动画。

js animate动画概念

动画是通过在指定的时间间隔内连续改变元素的属性值，从而创建出一种运动或变化的效果。在web开发中，我们主要通过改变元素的CSS属性来实现动画效果。

常见的动画属性包括：
– 位置（left、top）
– 尺寸（width、height）
– 透明度（opacity）
– 背景颜色（background-color）
– 旋转（transform）

下面我们将介绍几种常用的JavaScript动画技术。

CSS动画

在HTML5中，通过CSS3的@keyframes规则可以轻松创建动画效果。通过在关键帧（keyframe）中定义样式的变化，浏览器会自动计算中间的帧，并按照指定的时间间隔进行过渡。

@keyframes myAnimation {
    from { left: 0; }
    to { left: 200px; }
}

上面的示例代码定义了一个从0到200像素的左移动画。然后我们可以将该动画应用于一个元素：

#myElement {
    animation: myAnimation 2s infinite alternate;
}

通过animation属性，我们将myAnimation动画应用于ID为myElement的元素，指定动画时长为2秒，并且让动画无限循环且来回播放。

在JavaScript中，我们可以使用element.style.animation属性来控制CSS动画。比如，我们可以使用element.style.animationPlayState来暂停或恢复动画的播放。

var myElement = document.getElementById("myElement");
myElement.style.animationPlayState = "paused"; // 暂停动画播放
myElement.style.animationPlayState = "running"; // 恢复动画播放

JavaScript函数动画

除了使用CSS3创建动画外，我们还可以使用JavaScript函数来实现动画效果。这种方式比较灵活，可以根据需求编写各种自定义动画。

下面是一个简单的示例，通过改变元素的left属性来实现元素从左到右的平滑移动。我们使用setInterval函数每隔一段时间改变元素的位置。

<div id="myElement" style="position: absolute; left: 0; top: 0;">Hello, world!</div>

<script>
    var myElement = document.getElementById("myElement");
    var left = 0;

    setInterval(function() {
        left += 5;
        myElement.style.left = left + "px";
    }, 100); // 每100毫秒移动5像素
</script>

上面的代码中，我们每隔100毫秒将元素向右移动5像素，直到元素移出可视范围。

js animate

jQuery动画

jQuery是一个广泛使用的JavaScript库，提供了丰富且易于使用的动画功能。通过jQuery，我们可以轻松地创建各种动画效果。

下面是一个使用jQuery实现的动画示例，当鼠标移到元素上时，元素会逐渐变宽，鼠标移出时恢复原始宽度。

<div id="myElement" style="width: 200px; height: 100px; background-color: red;"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
     $("#myElement").mouseenter(function() {$ (this).animate({width: "400px"}, 500); // 动画时长为500毫秒
    });

     $("#myElement").mouseleave(function() {$ (this).animate({width: "200px"}, 500);
    });
</script>

上面的代码中，当鼠标进入元素时，使用animate函数将元素的宽度改变为400像素，动画时长为500毫秒。当鼠标移出时，恢复原始宽度。

js animate

GreenSock动画

GreenSock Animation Platform（GSAP）是一个流行的JavaScript动画库，提供了强大的动画功能和良好的性能。

GSAP可以用于创建复杂的、高性能的动画效果，并且支持各种动画属性的变化、安排动画序列、动画循环、缓动效果等。

下面是一个使用GSAP实现的动画示例，元素在鼠标移入时逐渐放大，移出时恢复原始尺寸。

<div id="myElement" style="width: 200px; height: 100px; background-color: red;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script>
    var myElement = document.getElementById("myElement");

    myElement.addEventListener("mouseenter", function() {
        gsap.to(myElement, {scale: 1.5, duration: 0.5}); // 动画时长为0.5秒
    });

    myElement.addEventListener("mouseleave", function() {
        gsap.to(myElement, {scale: 1, duration: 0.5});
    });
</script>

上面的代码中，当鼠标进入元素时，使用GSAP的to方法将元素的缩放比例从1变为1.5，动画时长为0.5秒。当鼠标移出时，恢复原始尺寸。

js animate