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

深碍√TFBOYSˉ_ 2022-12-08 05:09 129阅读 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 条评论，129人围观）

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

相关阅读

相关 JS-动画

动画动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤： 1. 获得盒子当前位置 2. 让盒子在当前位置加上1个

喜欢ヅ旅行/ 2024年03月17日 23:51/ 0 赞/ 25 阅读

相关 27 - JavaScript 特效：offset家族和匀速动画(含轮播图的实现)

前言 JS动画的主要内容如下： 1、三大家族和一个事件对象：三大家族：offset/scroll/client。也叫三大系列。事件对象/event（事

今天药忘吃喽~/ 2023年06月14日 11:59/ 0 赞/ 55 阅读

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

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

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

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

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

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

相关 Theatre.js 动画JavaScript库

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

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

相关 js匀速动画及动画库

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

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

相关 JavaScript匀速动画封装

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

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

相关 Vue_JS动画与Velocity.js动画

一.JS动画前面我们用css实现动画效果，那可不可以用JS来实现动画效果么？可以的在transition标签里定义触发事件 @before-enter：在进入动画

一时失言乱红尘/ 2022年05月20日 22:14/ 0 赞/ 185 阅读

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

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

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

相关原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画

offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲

r囧r小猫/ 2022年03月08日 11:22/ 0 赞/ 813 阅读