封装js动画函数

最新推荐文章于 2022-05-31 22:51:33 发布
最新推荐文章于 2022-05-31 22:51:33 发布
阅读量171 收藏
点赞数 1
文章标签： dom渲染 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46002223/article/details/123308436
版权

封装js动画函数

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 封装动画执行函数
      /*
      参数
        obj:要执行的动画对象
        attr:要执行动画的样式,left
        target:执行动画的目标位置
        speed:移动的速度（整数向右移动，负数向做移动）
        callback:回调函数
    */

      function move(obj, attr, target, speed, callback) {
        // 关闭定时器
        clearInterval(obj.timer)
        // 获取元素位置
        var current = parseInt(getStyle(obj, attr))
        // 判读速度正负值

        if (current > target) {
          // 此时速度应为负值
          speed = -speed
        }

        // 开启一个定时器
        obj.timer = setInterval(function () {
          // 获取原来的left值
          var oldValue = parseInt(getStyle(obj, attr))
          // 在旧值的基础上增加
          var newValue = oldValue + speed

          // 判断newValue是否大于800

          // 向左移动,则需要判断newValue是否小于target
          // 向右移动,则需要判断newValue是否大于target
          if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
            newValue = target
          }
          // 将新值设置为box1
          obj.style[attr] = newValue + 'px'

          // 将元素移到0px时,停止动画
          if (newValue == target) {
            // 达到目标关闭定时器
            clearInterval(obj.timer)
            // 动画执行完毕,调用回调函数
            callback && callback()
          }
        }, 30)
        /*
          参数
            obj 要获取样式的元素
            name 要获取的样式名
*/
        function getStyle(obj, name) {
          if (window.getComputedStyle) {
            return getComputedStyle(obj, null)[name]
          } else {
            // IE8的方式,没有getComputedStyle()方法
            return obj.currentStyle[name]
          }
        }
      }
    </script>
  </body>
</html>
快乐的小青蛙。
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用JS封装一个简单的动画函数（超详细）
Little_monster_1的博客
09-07 1042
用JS封装一个简单的动画函数 函数封装_01 文章目录用JS封装一个简单的动画函数PC端网页特效一、元素偏移量offset系列1-1. offset系列的常用属性1-2. offset 与 style二、元素可视区client系列三、元素滚动scroll系列三大系列总结动画函数的封装1-1. 动画函数的实现原理1-2. 动画缓动效果原理1-3. 动画函数添加回调函数（callback）1-4. 节流阀 PC端网页特效 首先，你要先了解以下知识点 一、元素偏移量offset系列 offset翻译过来就
JavaScript——动画函数封装
shhghvvh的博客
12-03 173
目录动画函数一.动画实现原理1.核心原理2.实现步骤3.示例代码二.简单动画函数封装三.给不同的元素记录不同的定时器四.缓动动画1.效果原理2.动画函数在多个目标值之间移动通过定时器setInterval)不断移动盒子位置。(1).获得盒子当前位置(2).让盒子在当前位置加上1个移动距离(3).利用定时器不断重复这个操作(4).加一个结束定时器的条件(5)..注意此元素需要添加定位，才能使用element.style.left 二.简单动画函数封装 示例代码： 效果图： 四.缓动动画
js封装动画函数
tangyuan97的博客
02-05 239
div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } span { posit...
JS - 封装动画函数
chengenghc的博客
03-15 173
// 封装动画函数 function animate(obj, target, callback) { // 清空定时器，避免每次激活定时器，让动画加速 clearInterval(obj.timer); // 添加定时器 var timer = setInterval(function () { // 让动画效果更平缓，缓动动画 var step = (target - obj.offsetLeft) / 10; // 步数.
JavaScript之动画函数封装
m0_48375854的博客
12-24 2659
动画函数一、动画函数原理 一、动画函数原理 核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left 如下所示： ...
动画函数独立封装动画函数独立封装
01-11
为了提高代码复用性和维护性，将动画函数独立封装成一个JS文件是非常明智的选择。这样可以在多个项目或页面中轻松调用，避免重复编写相似的代码，降低出错的可能性，并且使得代码结构更加清晰。 封装动画函数的基本...
JS简单动画封装浅析
01-19
网上也有很多封装好的JS动画库，但大多因为功能过于完善，而至于代码量大动辄过千行，不宜在小项目中使用。这里自己封装了一个很轻量的动画库，主要功能都已实现。难免有疏漏之处，还请大家多多指教。 这里先说明...
JavaScript变速动画函数封装添加任意多个属性
12-07
下面通过实例代码给大家介绍JavaScript变速动画函数封装添加任意多个属性 ，具体代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title...
js中最最常用的函数封装，方便调用
01-08
以下是一些在JS中常用且实用的函数封装方法： 1. **事件委托的封装**： ```javascript function eveEnt(child, cb) { return function (eve) { var e = eve || window.event; var mubiaoEle = e.target || e....
JS学习之动画函数的封装
weixin_53317758的博客
05-31 263
摘要变成了必填项，我只想睡一个好觉傻逼室友别再bb讲话了
JS动画封装
不忘初心
08-19 620
简单的运动函数var demo1=document.getElementById("demo1"); demo1.onmouseover=function(){ startMove(0); } demo1.onmouseout=function(){ startMove(-320); } var timer//全局变量 function
JS动画函数封装
weixin_46758732的博客
08-06 153
JS动画动画实现原理实现步骤动画函数简单封装给不同元素记录不同定时器缓动动画动画函数的使用 动画实现原理 核心原理：通过定时器setInterval（）不断移动盒子位置。 实现步骤 1、获得盒子当前位置 2、让盒子在当前位置加上1个移动距离。 3、利用定时器不断重复这个操作 4、加一个结束定时器的条件 5、注意此元素需要添加定位，才能使用element.style.left <!DOCTYPE html> <html lang="en"> <head> <m
[JavaScript] 动画函数的封装
qq_49900295的博客
03-23 1269
文章目录动画实现原理核心原理：实现步骤：js的动画：css的动画：动画函数简单封装给不同对象添加不同的定时器核心原理：代码示例：缓动动画原理思路：实现效果：代码示例：动画函数添加回调函数回调函数原理：示例代码：实现效果：动画函数封装到单独js文件里面 当我们学习了动画之后，我们就能做各种各样的网页特效了。有的同学总是杠，js能做的动画css也能做。首先你是来学js的没必要杠，css的灵活度远不如js,其次做网页轮播图等特效时用js是不是方便的多 动画实现原理 核心原理： 通过定时器setInterval()
JS动画函数的封装
Raaabbt GO!!
10-05 1633
JS动画函数的封装 有很多常用的JavaScript功能实现，我们不妨将它们封装起来，方便以后的使用。 下面是我对JavaScript动画动画函数的封装，参考了其他人的博文，如果有冒犯，请联系我。 闲话少说，贴上demo<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
js缓动动画及其封装
gyq04551的博客
11-20 386
Title div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; } 运动到200 运动到400
js动画封装
minjiayanm的博客
12-27 161
js动画封装 凡是可以看到过渡效果的基本都可以用到js动画，都能引用 <!-- ani() 作用：动画 给某个元素查看某个css 属性值 在某个时间中变化的过程。 el // 元素对象 str // css end // 结束动画值 time // 动画执行总时间 返回值为 '1' 表示动画执行完毕 ...
JavaScript封装动画函数（三）
sleepwalker_1992的专栏
06-25 356
封装缓动动画函数，增加任意多个属性和回调函数&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; *{
用js写一个动画封装函数
最新发布
08-10
### 回答1： 我可以给你一个简单的示例：function animate(element, animationName) { element.classList.add('animated', animationName); const handleAnimationEnd = () => { element.classList.remove('animated', animationName); element.removeEventListener('animationend', handleAnimationEnd); } element.addEventListener('animationend', handleAnimationEnd); } ### 回答2： 动画封装函数是为了简化JavaScript中创建和控制动画的过程，并提高代码的可重用性。下面是一个简单的动画封装函数的示例： ```javascript function animate(element, property, targetValue, duration) { let initialValue = parseInt(getComputedStyle(element)[property]) let distance = targetValue - initialValue let startTime = null function animation(timestamp) { if (startTime === null) startTime = timestamp let progress = timestamp - startTime let currentValue = initialValue + (distance * progress) / duration element.style[property] = currentValue + 'px' if (progress < duration) { requestAnimationFrame(animation) } } requestAnimationFrame(animation) } ``` 这个函数接受四个参数：`element`代表要执行动画的元素，`property`代表要动画化的属性，`targetValue`代表属性的目标值，`duration`代表动画持续的时间（以毫秒为单位）。 函数中先获取元素当前属性的初始值和与目标值的差距。然后通过`requestAnimationFrame`方法来不断更新属性的值，并根据当前时间戳和开始时间计算动画进度。最后，判断动画是否已完成，如果没完成则再次请求更新。 要使用该函数，只需在HTML中引入对应的JavaScript文件，然后在其他函数或事件中调用该函数即可。例如： ```javascript let box = document.getElementById('box') animate(box, 'left', 200, 1000) ``` 这段代码会使id为`box`的元素向左移动200像素，持续1秒。 ### 回答3： 动画封装函数可以利用 JavaScript 的动画功能来创建各种动态效果。以下是一个示例： ```javascript function animate(element, property, targetValue, duration) { let startValue = parseFloat(getComputedStyle(element)[property]); let time = 0; function updateAnimation() { time += 16; // 每秒大约 60 次刷新 if (time >= duration) { element.style[property] = targetValue; return; } let progress = time / duration; let currentValue = startValue + (targetValue - startValue) * progress; element.style[property] = currentValue + 'px'; requestAnimationFrame(updateAnimation); } requestAnimationFrame(updateAnimation); } ``` 这个 `animate` 函数可以通过传入不同的参数来实现不同的动画效果。它接受四个参数： 1. `element`：要应用动画的元素。 2. `property`：要改变的 CSS 属性，比如 `'left'`、`'top'`、`'opacity'` 等。 3. `targetValue`：改变后的目标值，可以是像素值、透明度等。 4. `duration`：动画的持续时间，以毫秒为单位。 例如，要将一个元素的左侧位置从原来的 0px 平滑地移动到 100px，可以使用以下代码： ```javascript let myElement = document.getElementById('myElement'); animate(myElement, 'left', '100px', 1000); ``` 这样，`myElement` 元素在 1 秒钟内就会平滑地从初始位置移动到 100px 的位置。 希望这个简单的动画封装函数能帮助到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值