JavaScript实现缓慢动画的封装

简介: JavaScript实现缓慢动画的封装

实现小球不匀速运动

 
<!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>
        * {
            margin: 0;
            padding: 0;
        }
 
        #ball {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: 100px;
            top: 200px
        }
 
        #wall_l {
            width: 1px;
            height: 300px;
            background-color: black;
            position: absolute;
            left: 99px;
            top: 150px;
        }
 
        #wall_r {
            width: 1px;
            height: 300px;
            background-color: black;
            position: absolute;
            left: 1200px;
            top: 150px;
        }
    </style>
</head>
 
<body>
    <div id="ball"></div>
    <div id="wall_l"></div>
    <div id="wall_r"></div>
 
    <button>向右</button><button>向左</button> <button>开始</button>
    <script>
        //1.查
        var ball = document.querySelector('#ball');
        var wall_l = document.querySelector('#wall_l')
        var wall_r = document.querySelector('#wall_r')
 
        var btns = document.querySelectorAll('button');
 
        //向右
        btns[0].onclick = function () {
            moveR()
 
        }
        btns[1].onclick = function () {
            moveL()
        }
        btns[2].onclick = function () {
            animate(ball,1100,function(){
                animate(ball,100)
            })
 
        }
 
        //缓慢动画   (由快到慢)   
        //速度公式   speed= (end-start)/10
        var timer;
        function moveR() {
            clearInterval(timer);
         timer=  setInterval(function () {
                // 获得小球当前的位置
                var l=ball.offsetLeft;
                var target=1100;//目标位置  结束位置
                var speed=(target-l)/10;
                 speed=  Math.ceil(speed)
                console.log(speed);//0.4~~~0
                if(ball.offsetLeft==target){
                    clearInterval(timer)
                }
                //让小球 改变位置
                ball.style.left=l+speed+'px'
            }, 25)
 
 
        }
 
        function moveL() {
            clearInterval(timer);
         timer=  setInterval(function () {
                // 获得小球当前的位置
                var l=ball.offsetLeft;
                var target=100;//目标位置  结束位置
                var speed=(target-l)/10;
                 speed=  Math.floor(speed)
                console.log(speed);//-0.5~~~0
                if(ball.offsetLeft==target){
                    clearInterval(timer)
                }
                //让小球 改变位置
                ball.style.left=l+speed+'px'
            }, 25)
 
 
        }
 
 
    </script>
    <script>
        //封装一下
        // obj 对象  target 目标位置  callback回调函数 -可选
        function animate(obj,target,callback){
 
            clearInterval(obj.timer);//防止定时器累加  或来回拉扯的过程
            obj.timer=  setInterval(function () {
                // 获得小球当前的位置
                var l=obj.offsetLeft;
                var speed=(target-l)/10;
                 speed= speed>0? Math.ceil(speed):Math.floor(speed)
                if(obj.offsetLeft==target){
                    clearInterval(obj.timer);
                    callback&&callback();
                }
                //让小球 改变位置
                obj.style.left=l+speed+'px'
            }, 25)
 
        }
    </script>
 
</body>
 
</html>
相关文章
|
5月前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
388 1
crypto-js中AES的加解密封装
|
2月前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
3月前
|
JavaScript 前端开发
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
|
3月前
|
JavaScript 前端开发
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
|
3月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
3月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
37 1
|
3月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
39 2
|
5月前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
5月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
76 0
|
5月前
|
设计模式 JavaScript
JS发布订阅模式封装(纯手工)
发布订阅模式是JS常用的设计模式,在面试中也会经常遇到,以下是我的手写实现方式,经测试效果不错,小伙伴们们可以直接拷贝使用。

热门文章

最新文章