随笔 - 37  文章 - 0  评论 - 2  阅读 - 17622

缓动动画

缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来。

思路:

1.让盒子每次移动的距离慢慢变小,速度就会慢慢落下来;

2.核心算法:(目标值-现在的位置)/10 , 作为每次移动的距离步长;

3.停止的条件是: 让当前盒子位置等于目标位置时就停止定时器。

效果:

代码:

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>缓动动画</title>
 6         <style>
 7             *{
 8                 margin: 0;
 9                 padding: 0;
10             }
11             div{
12                 position: absolute;
13                 left: 0;
14                 top: 100px;
15                 width: 100px;
16                 height: 100px;
17                 background-color: yellow;
18             }
19         </style>
20     </head>
21     <body>
22         <div></div>
23         <button>按钮</button>
24         <script>
25             function animate(obj, target){
26                 clearInterval(obj.timer);
27                 obj.timer = setInterval(function(){
28                     //计算步长值
29                     var step = (target - obj.offsetLeft) / 10;
30                     if(obj.offsetLeft >= target){
31                         // 停止动画本质上是停止定时器
32                         clearInterval(obj.timer);
33                     }
34                     obj.style.left = obj.offsetLeft + step + 'px';
35                 },10);
36             }
37             var div = document.querySelector('div');
38             var btn = document.querySelector('button');
39             //调用函数
40 
41             btn.addEventListener('click', function(){
42                 animate(div, 550);
43             });
44         </script>
45     </body>
46 </html>
复制代码

 

posted on   SailorM  阅读(398)  评论(1编辑  收藏  举报
编辑推荐:
· Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
阅读排行:
· DeepSeek 全面指南,95% 的人都不知道的9个技巧(建议收藏)
· 对比使用DeepSeek与文新一言,了解DeepSeek的关键技术论文
· Brainfly: 用 C# 类型系统构建 Brainfuck 编译器
· DeepSeekV3+Roo Code,智能编码好助手
· AI编程:如何编写提示词
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示