JS基础——API之动画

最新推荐文章于 2024-06-05 10:20:14 发布

安北北

最新推荐文章于 2024-06-05 10:20:14 发布

阅读量216

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_48454458/article/details/126855243

版权

JS基础——API之动画
一，动画函数封装
1·1 动画实现原理【需要加定位】

<body>
    <div></div>//这个div需要设置定位，动画才能实行
    <script>
        // 动画原理
        // 1. 获得盒子当前位置  
        // 2. 让盒子在当前位置加上1个移动距离
        // 3. 利用定时器不断重复这个操作
        // 4. 加一个结束定时器的条件
        // 5. 注意此元素需要添加定位， 才能使用element.style.left
        var div = document.querySelector('div');
        var timer = setInterval(function() {
            if (div.offsetLeft >= 400) {
                // 停止动画 本质是停止定时器
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 1 + 'px';
        }, 30);
       
    </script>
</body>

2简单的动画函数【给定时器加个名字，为删除定时器做准备，var会创建新的空间，不是很好】

<body>
    <div></div>
    <span>夏雨荷</span>
    <script>
        // 简单动画函数封装obj目标对象 target 目标位置
        function animate(obj, target) {
            var timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';

            }, 30);
        }

        var div = document.querySelector('div');
        var span = document.querySelector('span');
        // 调用函数
        animate(div, 500);
        animate(span, 500);
    </script>
</body>

在这里插入图片描述
4缓动效果原理

安北北

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础——API之动画

2简单的动画函数【给定时器加个名字，为删除定时器做准备，var会创建新的空间，不是很好】// 5. 注意此元素需要添加定位，才能使用element.style.left。// 简单动画函数封装obj目标对象 target 目标位置。// 2. 让盒子在当前位置加上1个移动距离。// 3. 利用定时器不断重复这个操作。1·1 动画实现原理【需要加定位】// 4. 加一个结束定时器的条件。// 1. 获得盒子当前位置。// 停止动画本质是停止定时器。// 停止动画本质是停止定时器。
复制链接

扫一扫