关于js一些简单的动画工具类

最新推荐文章于 2025-07-27 20:22:41 发布

kbgy

最新推荐文章于 2025-07-27 20:22:41 发布

阅读量663

点赞数 1

CC 4.0 BY-SA版权

分类专栏：动画基础工具类笔记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/daseg/article/details/111190248

本文详细介绍了JavaScript中创建简单动画的技巧和工具类，包括如何使用setTimeout、requestAnimationFrame实现平滑动画效果，以及如何通过改变CSS属性实现元素的动态移动和变形。通过实例代码，帮助开发者更好地理解和应用JavaScript动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function move(obj, attr, target, speed, callback) {
    //obj需要移动的元素
    //attr元素要执行动画的样式(left,top,width,height)(加""应为要穿字符串)
    //target元素obj移动结束的位置(不需要px)
    //speed移动的速度和方向
    //callback回调函数,将会在动画执行完毕后执行


    //关闭上一个定时器，避免定时器叠加
    clearInterval(obj.timer);
    //获取元素目前的位置
    var current = parseInt(getStyle(obj, attr)); //获取的值为number
    //判断speed的正负
    if (current > target) {
        speed = -speed;
    }
    //定时器
    //向obj元素中添加一个timer的属性用来保存定时器的唯一标识
    obj.timer = setInterval(function() {

        var oldValue = parseInt(getStyle(obj, attr)); //获取number值
        var newValue = oldValue + speed;

        //向左移动时，speed为负数，newValue<target
        //向右移动时，speed为正数，newValue>target
        if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target;
        }
        obj.style[attr] = newValue + "px";
        //当元素移动到800像素时，停止移动
        if (newValue == target) {
            clearInterva