js中匀速动画和缓慢动画(javascript)

深碍√TFBOYSˉ_ 2022-12-08 05:09 219阅读 0赞

> 缓动动画函数封装obj目标对象 target 目标位置  
> 思路：  
> 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。  
> 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长  
> 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器

> 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

function animate(obj,target0){ 
     			//step是变化的值
     			//步长取整
                var step=Math.ceil((target0-obj.offsetLeft)/10);
                obj.times=setInterval(function(){ 
                    if (obj.offsetLeft==target0){ 
                    //到了一定位置停止
                    clearInterval(obj.times);
                }else{ 
               // 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
                    obj.style.left=obj.offsetLeft+step+"px";
                }
                },30) 
            }
            btn.addEventListener("click",function(){ 
                animate(step1,300);
            })

> 匀速动画 就是 盒子是当前的位置 + 固定的值

var times=setInterval(function(){ 
                if (move.offsetLeft>=10){ 
                    clearInterval(times);
                }else{ 
                //固定值这里写的是1
                move.style.left=move.offsetLeft+1+"px";
                }
            },1000);

发表评论取消回复

表情：

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

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

相关阅读

相关【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )

文章目录一、动画速度曲线设置二、代码示例 - 动画速度曲线设置 1、代码示例 - 动画匀速执行 2、代码示例 - 动画分 2 步

以你之姓@/ 2023年10月14日 17:00/ 0 赞/ 21 阅读

相关 JS封装匀速动画

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N

比眉伴天荒/ 2023年07月04日 14:16/ 0 赞/ 17 阅读

相关 javascript动画_JavaScript动画简介

javascript动画 Despite what many developers believe, CSS-based animation is not the only

傷城~/ 2023年02月22日 03:40/ 0 赞/ 62 阅读

相关 css动画和js动画_CSS与JS动画：哪个更快？

css动画和js动画 How is it possible that JavaScript-based animation has secretly always been

╰半夏微凉°/ 2023年02月21日 14:24/ 0 赞/ 58 阅读

相关 js中匀速动画和缓慢动画(javascript)

> 缓动动画函数封装obj目标对象 target 目标位置 > 思路： > 1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。 > 2. 核心算法：(目标值

深碍√TFBOYSˉ_/ 2022年12月08日 05:09/ 0 赞/ 220 阅读

相关 javascript匀速动画和缓冲动画

关于网页中的动画，在css3中我们已经可以使用一些属性快速的做出来，但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。使用js做动画最重要的一个函数就是s

谁借莪１个温暖的怀抱￠/ 2022年09月26日 02:14/ 0 赞/ 240 阅读

相关 Theatre.js 动画JavaScript库

[Theatre.js ][Theatre.js]是一个带有 GUI 的 JavaScript 动画库，为 DOM、WebGL 和任何其他的 JavaScript 变量

迈不过友情╰/ 2022年09月14日 08:40/ 0 赞/ 279 阅读

相关 js匀速动画及动画库

<table> <tbody> <tr> <td><b>准备知识</b></td> </tr> </tbody> </table> <table

今天药忘吃喽~/ 2022年06月07日 00:53/ 0 赞/ 332 阅读

相关 JavaScript匀速动画封装

HTML部分 <span style="color:000000"><!doctype html> <html lang="en"> <head> <meta

女爷i/ 2022年06月01日 04:21/ 0 赞/ 304 阅读

相关 vue中动画函数钩子js动画

1. 动画开始：@before-enter @before-leave 动画过程： @enter @leave 在这个

系统管理员/ 2022年04月15日 03:45/ 0 赞/ 334 阅读