js原生，缓动动画封装

冷不防 2023-07-07 08:25 25阅读 0赞

![20200222002539200.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                width: 100px;
                height: 100px;
                position: absolute;
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
        <script>
            var box = document.querySelector(".box")
            function animate(obj, target, callback) {
                clearInterval(obj.timer)
                obj.timer = setInterval(() => {
                    var step = (target - obj.offsetLeft) / 10
                    step = step > 0 ? Math.ceil(step) : Math.floor(step)
                    if (obj.offsetLeft === target) {
                        clearInterval(obj.timer)
                        if (callback) {
                            callback()
                        }
                    }
                    console.log(obj.offsetLeft)
                    obj.style.left = obj.offsetLeft + step + 'px'
                }, 40)
            }
            animate(box, 1000)
        </script>
    </body>
    
    </html>

[20200222002539200.png]: https://img-blog.csdnimg.cn/20200222002539200.png

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 js原生，缓动动画封装

![20200222002539200.png][] <!DOCTYPE html> <html lang="en"> <head>

冷不防/ 2023年07月07日 08:25/ 0 赞/ 26 阅读

相关 JS封装缓动动画效果函数

原理 JS的动画效果原理其实就是添加一个定时器,每多少毫秒调用一次,就可以使盒子运动一次. 在这里我封装了一个缓动动画函数,只要有对象需要添加动画就可以调用这个动画函

亦凉/ 2023年07月07日 05:56/ 0 赞/ 38 阅读

相关缓动动画原理

效果： ![20200213102653736.png][] 代码： <!DOCTYPE html> <html> <head> <ti

女爷i/ 2023年07月05日 05:19/ 0 赞/ 17 阅读

相关 js缓动框架(封装)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2022年07月13日 23:28/ 0 赞/ 217 阅读

相关 js缓动动画及其封装

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

古城微笑少年丶/ 2022年07月13日 23:27/ 0 赞/ 231 阅读

相关 JavaScript原生代码实现返回顶部缓动效果

返回顶部比较特殊，需要使用，widow.scrollTo(x,y )去做先贴上全部代码，分析在下面 <!doctype html> <html la

爱被打了一巴掌/ 2022年06月01日 06:51/ 0 赞/ 334 阅读

相关 Unity的DoTween插件缓动动画效果

很久不用了，为了防止忘记DoTween设动画节奏的时候用什么类型的Ease，所以我专门写了一个小demo，记录比较DoTween的各种动画类型。动画执行测试代码： usi

ゞ浴缸里的玫瑰/ 2022年04月18日 06:13/ 0 赞/ 306 阅读

相关 LayaAir 缓动动画

目录缓动动画·概述 from()与to()方法缓动动画·示例 props 属性 Ease 缓动函数 backIn backInOut backOut

亦凉/ 2022年04月08日 13:57/ 0 赞/ 500 阅读

相关 JavaScript特效！scroll与缓动动画

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 文章目录 1.基础 2.固定导航栏

迈不过友情╰/ 2021年12月11日 07:41/ 0 赞/ 285 阅读

相关 jQuery+easing缓动的动画

jQuery实现动画再简单不过了，只是要实现更酷的效果还需要插件来帮忙，`easing`就是一款帮助jQuery实现缓动动画的插件，经过试用，效果很不错，记录一下使用方法吧！

迷南。/ 2021年07月05日 02:38/ 0 赞/ 446 阅读