JavaScript—封装animte动画函数

淡淡的烟草味﹌ 2023-10-11 13:15 64阅读 0赞

封装Animte 动画函数

虽然可能以后的开发中可能根本不需要自己写，Jquery 给我们封装好了，或者用CSS3的一些属性达到这样的效果可能更简单。

我比较喜欢底层的算法实现，万变不离其中，这个逻辑思路，也是需要锻炼的。也跟着做了一遍

///动画函数
        //element:元素
        //target:最后停止的位置
        function animte(element, target) {
    
            //只有一个Timeid定时器在执行
            if (element,timerId) {
                clearInterval(element.timerId)
                element.timerId = null
            }
    
            //定时器 每隔多少触发
            element.timerId = setInterval(function ()
                {
                const step=6              //步进
                const current=element.offsetLeft//盒子现在的位置
    
                //如果现在位置>目标位置 则是向左移动 left为负数
                if (current>target) {
                    step = - Math.abs(step)
                }
    
                //当快到达目标位置时则停止计时器
                if (Math.abs(current-target)<=Math.abs(step)) {
                    //停止/
                    clearInterval(element.timerId)
                    element.style.left = target + 'px'
                    //退出函数
                    return;
                }
                element.style.left = (current + step) + 'px';
            }, 30)
        }

转载于:https://www.cnblogs.com/ruogu/p/10804463.html

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript—封装animte动画函数

封装Animte 动画函数虽然可能以后的开发中可能根本不需要自己写，Jquery 给我们封装好了，或者用CSS3的一些属性达到这样的效果可能更简单。我比较喜欢底层的算法

淡淡的烟草味﹌/ 2023年10月11日 13:15/ 0 赞/ 65 阅读

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

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

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

相关 javascript动画_JavaScript动画简介

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

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

相关 JavaScript动画实现的原理、动画函数的封装

JavaScript动画实现的原理、动画函数的封装动画实现的原理核心原理是通过定时器setInterval（）不断移动盒子的位置实现步骤： 1. 获得盒

- 日理万妓/ 2023年01月02日 02:20/ 0 赞/ 206 阅读

相关 WebAPIs-06：动画函数封装 + 触屏事件

1.1. 动画函数封装 1.1.1 缓动效果原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来思路： 1. 让盒子每次移动的距离慢慢变小，

￡神魔★判官ぃ/ 2022年12月16日 09:28/ 0 赞/ 204 阅读

相关 JavaScript匀速动画封装

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

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

相关 Vue_动画封装

我们写一个动画效果，如果在页面多处调用，就可以封装在一个组件里。使用插槽的形式。 eg： <fade :show='showfade'> <div>h

雨点打透心脏的1/2处/ 2022年05月20日 23:30/ 0 赞/ 244 阅读

相关 Unity5.3.6 Animtion动画播放技巧

我一直以为我写了这篇文章，当我想找相关知识点的时候发现我并某有写。本文章主要写Animtion老版的动画机给的fbx的时候更换模式Legacy （legacy是Ani

小鱼儿/ 2022年04月11日 11:51/ 0 赞/ 690 阅读

相关【JavaScript】封装一个jsonp函数

function jsonp({url, params, callback}) { return new Promise ((resolve, reject

比眉伴天荒/ 2022年02月24日 13:38/ 0 赞/ 264 阅读

相关封装animate动画

<style type="text/css"> { margin: 0; padding: 0; }

一时失言乱红尘/ 2021年09月02日 09:49/ 0 赞/ 515 阅读