首页 > 资讯 > 前端开发 > html >如何打造通用的匀速运动框架

787

分享到

如何打造通用的匀速运动框架

2024-04-02 19:04:59 787人浏览安东尼

摘要

这期内容当中小编将会给大家带来有关如何打造通用的匀速运动框架，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。一、animate函数中怎么区分变化不同的样式？上文中，侧边栏效

这期内容当中小编将会给大家带来有关如何打造通用的匀速运动框架，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

一、animate函数中怎么区分变化不同的样式？

上文中，侧边栏效果用的animate函数改变的是left值

function animate(obj, target, speed) {
 clearInterval(timer);
 timer = setInterval(function () {
 if (obj.offsetLeft == target) {
  clearInterval(timer);
 } else {
  obj.style.left = obj.offsetLeft + speed + 'px';
 }
 }, 30);
}

淡入淡出效果用的animate函数改变的是透明度

function animate(obj, target, speed) {
  clearInterval(timer);
  var cur = 0;
  timer = setInterval(function () {
   cur = CSS( obj, 'opacity') * 100;
   if( cur == target ){
   clearInterval( timer );
   }else {
   cur += speed;
   obj.style.opacity = cur / 100;
   obj.style.filter = "alpha(opacity:" + cur + ")";
   }
  }, 30);
  }

而我们封装的函数，要变成通用的，首先面临的问题就是这个函数要同时支持left值和透明度的变化，更通用的做法应该是要支持所有的样式变化，比如轮播功能，他有左右滑动，也有上下滑动。

我们可以在获取样式和改变样式的时候，做一下判断就可以了，判断分2类就能达到目的，因为其他样式( margin, left, top, right, font-size等等 )都是px，而透明度没有px单位

function animate(obj, attr, target, speed) {
 clearInterval(timer);
 var cur = 0;
 timer = setInterval(function () {
 if (attr == 'opacity') {
  cur = css(obj, 'opacity') * 100;
 } else {
  cur = parseInt(css(obj, attr));
 }

 if (cur == target) {
  clearInterval(timer);
 } else {
  if (attr == 'opacity') {
  obj.style.opacity = ( cur + speed ) / 100;
  obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
  } else {
  obj.style[attr] = cur + speed + "px";
  }
 }
 }, 30);
}

合并之后的animate相比之前多了一个参数attr, 这个参数就是变化的样式，obj: 变化的对象， target: 样式需要变化到的目标值. speed: 样式每次变化的大小

如：

oImg.onmouseover = function () {
　　animate(this, 'opacity', 100, 10);
}

oImg是获取到的图片对象. 这里各参数意思如下：

this：当前图片对象

opacity: 变化的样式是透明度

100: 鼠标移到图片上时，透明度变成100

10: 透明度每次在原来的基础上加10

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>合并的运动 - by ghostwu</title>
 <style>
 img {
  border: none;
  opacity: 0.3;
  filter: alpha(opacity:30);
  position: absolute;
  left: 200px;
 }

 #box {
  width: 150px;
  height: 300px;
  background: red;
  position: absolute;
  left: -150px;
  top: 50px;
 }

 #box div {
  width: 28px;
  height: 100px;
  position: absolute;
  right: -28px;
  top: 100px;
  background: green;
 }
 </style>
 <script>
 window.onload = function () {
  var oImg = document.getElementById("img"),
  oBox = document.getElementById("box"),
  timer = null;

  oImg.onmouseover = function () {
  animate(this, 'opacity', 100, 10);
  }
  oImg.onmouseout = function () {
  animate(this, 'opacity', 30, -10);
  }

  oBox.onmouseover = function () {
  animate(this, 'left', 0, 10);
  }

  oBox.onmouseout = function () {
  animate(this, 'left', -150, -10);
  }

  function animate(obj, attr, target, speed) {
  clearInterval(timer);
  var cur = 0;
  timer = setInterval(function () {
   if (attr == 'opacity') {
   cur = css(obj, 'opacity') * 100;
   } else {
   cur = parseInt(css(obj, attr));
   }

   if (cur == target) {
   clearInterval(timer);
   } else {
   if (attr == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
   } else {
    obj.style[attr] = cur + speed + "px";
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<div id="box">
 <div>分享到</div>
</div>
<img src="./img/h5.jpg" alt="" id="img"/>
</body>
</html>

上述就是完整的代码实例。

当你分别测试这两个功能的时候：

移动到图片上然后移出来

移动到分享到，然后移出来

这样是没有问题的

如果你这样测试：

移动到分享到，然后迅速又移动到图片上，这个时候你会发现分享到停下来了，这就不符合逻辑了! 按道理来说，鼠标移动到图片上，相当于触发了 “分享到” 的mouseout( 鼠标移出事件 )，那么 "分享到" 这个时候要隐藏，并不是停止。为什么会这样呢？因为这两个运动共享了一个定时器，当鼠标移动到图片上，开启定时器的时候，把“分享到”的定时器给停了。那么再做多物体运动的时候，我们就要把定时器拆分，每个对象都要有一个定时器，怎么做呢？非常简单，不要定义一个简单的timer变量，我们只要把timer加在obj对象上，那么每个对象都有一个timer属性，就达到定时器的分离效果了

修改之后的完整代码如下，请自行展开：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 img {
  border: none;
  opacity: 0.3;
  filter: alpha(opacity:30);
  position: absolute;
  left: 200px;
 }

 #box {
  width: 150px;
  height: 300px;
  background: red;
  position: absolute;
  left: -150px;
  top: 50px;
 }

 #box div {
  width: 28px;
  height: 100px;
  position: absolute;
  right: -28px;
  top: 100px;
  background: green;
 }
 </style>
 <script>
 window.onload = function () {
  var oImg = document.getElementById("img"),
  oBox = document.getElementById("box");

  oImg.onmouseover = function () {
  animate(this, 'opacity', 100, 10);
  }
  oImg.onmouseout = function () {
  animate(this, 'opacity', 30, -10);
  }

  oBox.onmouseover = function () {
  animate(this, 'left', 0, 10);
  }

  oBox.onmouseout = function () {
  animate(this, 'left', -150, -10);
  }

  function animate(obj, attr, target, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   if (attr == 'opacity') {
   cur = css(obj, 'opacity') * 100;
   } else {
   cur = parseInt(css(obj, attr));
   }

   if (cur == target) {
   clearInterval(obj.timer);
   } else {
   if (attr == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
   } else {
    obj.style[attr] = cur + speed + "px";
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<div id="box">
 <div>分享到</div>
</div>
<img src="./img/h5.jpg" alt="" id="img"/>
</body>
</html>

至此，我们就完成了多物体运动与不同样式的修改

二、让animate函数支持多个样式同时改变

比如：

oBox.onmouseover = function(){
　　animate( this, { "width" : 500, "height" : 400 }, 10 );
}

oBox是一个div元素，animate各参数的意思：

this: 当前div元素

{width : 500, "height" : 400 } : 把宽度变成500, 高度变成400，这两个样式要在同一时间完成，

10: 样式每次在原来的基础上变化10（如width初始值200--> 210, 220, 230.....）

完整的同时运动变化代码：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
//  animate( this, { "width" : 500, "height" : 500 }, 10 );
  animate( this, { "width" : 500, "height" : 400 }, 10 );
  }

  function animate(obj, attr, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   for ( var key in attr ) {
   if (key == 'opacity') {
    cur = css(obj, 'opacity') * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur == target) {
    clearInterval(obj.timer);
   } else {
    if (key == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
 <div id="box"></div>
</body>
</html>

请自行展开这段代码，这段代码能够同时运动，但是有一个问题：

div的初始宽度与高度（ width : 200, height : 200）

变化步长一样( 10 )

变化时间一样( 每30毫秒变化一次 )

目标( width: 500, height : 400 )

你能想到什么问题吗？( 两个人在同一起跑线上，速度一样，时间一样，但是要同时到达不同的目标，一个500, 一个400 )

答案是很明显的，肯定是目标近的( height : 400 )那个先到达，然后把对象上的定时器关了，另一个目标更远的( width: 500 )肯定到达不了

你可以在这句代码下面，输出当前的值和目标值：

var target = attr[key];
console.log( key, cur, target );

输出来的结果是：

如何打造通用的匀速运动框架

从上图可以看出，height已经达到了400px，但是width停在了410px,为什么不是400px ? 因为width = 400的时候，就是( cur == 500 ) 相当于( 400 == 500 ) 不成立，所以执行了else语句，width = cur + 10 = 400 + 10 = 410，然后height到达400px停止了定时器，所以width停在了410px.

那么我们怎么解决这个问题呢？

其实也好办，就是height = 400的时候不要把定时器关了，应该等width = 500的时候再关闭定时器，不就在同一时间，完成了同时到达目标的效果吗？

修改后的代码如下：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
  animate( this, { "width" : 500, "height" : 400 }, 10 );
  }

  function animate(obj, attr, speed) {
  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   var bFlag = true;
   for ( var key in attr ) {
   if (key == 'opacity') {
    cur = css(obj, 'opacity') * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur != target) {
    bFlag = false;
    if (key == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }
   if ( bFlag ) {
   clearInterval( obj.timer );
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
 <div id="box"></div>
</body>
</html>

声明一个变量，每次变化完一次( width, height )样式把bFlag = true，只要在for循环中有一个没有到达目标，bFlag的值都是false，这样就不会关闭定时器。当两个都到达目标，才关闭定时器.

三、顺序运动

如样式变化，按顺序来，不是同时变化，如：

oBox.onmouseover = function(){
//回调函数： 把函数当做参数传递给另一个函数
　　animate( this, { 'width' : 500 }, 10, function(){
　　　　animate( this, { 'height' : 500 }, 10 );
　　} );
}

当把width变成500px的时候，如果传递了回调函数，再接着执行回调函数里面的运动

修改后的完整代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>通用的匀速运动框架 - by ghostwu</title>
 <style>
 div {
  width: 200px;
  height: 200px;
  background: red;
 }
 </style>
 <script>
 window.onload = function () {
  var oBox = document.getElementById("box");
  oBox.onmouseover = function(){
  //回调函数： 把函数当做参数传递给另一个函数
  animate( this, { 'width' : 500 }, 10, function(){
   animate( this, { 'height' : 500 }, 10 );
  } );
  }

  function animate(obj, attr, speed, fn ) {

  clearInterval(obj.timer);
  var cur = 0;
  obj.timer = setInterval(function () {
   var bFlag = true;
   for (var key in attr) {
   if (key == 'opacity') {
    cur = css(obj, 'opacity') * 100;
   } else {
    cur = parseInt(css(obj, key));
   }
   var target = attr[key];
   if (cur != target) {
    bFlag = false;
    if (key == 'opacity') {
    obj.style.opacity = ( cur + speed ) / 100;
    obj.style.filter = "alpha(opacity:" + (cur + speed) + ")";
    } else {
    obj.style[key] = cur + speed + "px";
    }
   }
   }

   if (bFlag) {
   clearInterval(obj.timer);
   fn && fn.call( obj );
   }
  }, 30);
  }

  function css(obj, attr) {
  if (obj.currentStyle) {
   return obj.currentStyle[attr];
  } else {
   return getComputedStyle(obj, false)[attr];
  }
  }
 }
 </script>
</head>
<body>
<div id="box"></div>
</body>
</html>

上述就是小编为大家分享的如何打造通用的匀速运动框架了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注编程网html频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何打造通用的匀速运动框架

本文链接: https://www.lsjlt.com/news/81270.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

如何打造通用的匀速运动框架

这期内容当中小编将会给大家带来有关如何打造通用的匀速运动框架，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。一、animate函数中怎么区分变化不同的样式？上文中，侧边栏效...

99+

2024-04-02
js如何实现单方向匀速运动

这篇文章给大家分享的是有关js如何实现单方向匀速运动的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。代码如下：<!DOCTYPE html> <html...

99+

2024-04-02
如何打造自己的PoC框架-Pocsuite3-框架篇

本节笔者将按照Pocsuite框架结构以及工程化实践，来实现一款自己的PoC框架。为了开一个好头，我们先取一个好听的名字，想威武霸气一些可以取上古神器之类的，诸如轩辕夏禹赤霄干将，若怀着对游戏的热爱也可以有山丘之王（Mountain Kin...

99+

2023-06-04
JavaScript AJAX 框架：打造动态网页的利器

...

99+

2024-04-02
如何利用Golang打造高效的游戏开发框架

作为一门业界热门且高效的编程语言，Golang 在游戏开发领域也有着广泛的应用。本文将介绍如何利用 Golang 打造高效的游戏开发框架，并提供具体的代码示例。我们将以一个简单的 2D...

99+

2024-03-06

框架 golang 游戏开发键盘事件
Java编程算法学习笔记：如何运用Laravel框架打造高效Web应用？

Laravel框架是一个流行的PHP框架，它提供了许多工具和组件，帮助开发人员轻松构建高效的Web应用程序。在本篇文章中，我们将深入研究Laravel框架以及如何使用它来构建高效的Web应用程序。 Laravel框架简介 Larave...

99+

2023-10-06

编程算法学习笔记 laravel
JavaScript运动框架如何解决速度正负取整问题

小编给大家分享一下JavaScript运动框架如何解决速度正负取整问题，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！这里说的运动是指缓冲运动，缓冲运动会使物体逐渐‘着陆'，而不是‘...

99+

2024-04-02
如何打造“最好的架构”？

所谓一千个架构师中有一千种“最好的架构”模式。“架构”是我们这行业种一个很常见的词，表明其必然也是经历了很长的岁月打磨所形成的一个词。架构的这个词出现的意义是什么？为了解决什么问题？只有把这2个问题想明白了，才能设计出一个良好的项目架构。我...

99+

2023-06-05
.Net Core微服务rpc框架GRPC通信如何运用

本文小编为大家详细介绍“.Net Core微服务rpc框架GRPC通信如何运用”，内容详细，步骤清晰，细节处理妥当，希望这篇“.Net Core微服务rpc框架GRPC通信如何运用”文章能帮助大家解决疑惑，下面跟着小编的...

99+

2023-06-26
Python与Numpy结合，如何在LeetCode中打造高效框架？

LeetCode是一个非常流行的在线编程平台，为了在这个平台上取得好的成绩，我们需要编写高效的代码。Python是一种非常流行的编程语言，在LeetCode中也可以使用Python进行编程。为了更加高效地解决LeetCode中的问题，我们...

99+

2023-08-06

numpy leetcode 框架
论坛运营秘籍：利用Discuz框架打造热门社区的策略解析

论坛运营秘籍：利用Discuz框架打造热门社区的策略解析引言随着互联网的快速发展，论坛作为一种在线交流平台，扮演着连接社群、分享信息和促进交流的重要角色。而Discuz作为一款知名...

99+

2024-03-14

论坛运营 discuz框架社区策略
使用 ASP 测试框架打造应用程序的堡垒

简介应用程序开发是一个复杂的过程，涉及到大量的编码和测试。为了确保应用程序的可靠性和质量，测试框架至关重要。ASP 测试框架是专门为 ASP.NET 应用程序设计的测试框架，提供了一系列工具和功能来自动化测试流程。自动化测试流程 A...

99+

2024-03-03

ASP、测试框架、自动化测试、代码质量、错误检测、开发效率
如何轻松快速打造PR5的网站

如何轻松快速打造PR5的网站，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。今年2月份我接手了一个朋友的才上线一个月的新站，由于他要到国外出差，工作很繁忙，没有时...

99+

2023-06-12
PHP打包Shell框架：一步步教你如何打造一个强大的Web应用程序

PHP是一种非常流行的编程语言，尤其是在Web开发领域。如果你想开发一个强大的Web应用程序，一个好的框架是必不可少的。在本文中，我们将介绍如何使用PHP打包Shell框架来创建一个高效、安全的Web应用程序。 Shell框架是一个基于P...

99+

2023-08-14

打包 shell 框架
「使用Go语言打造高效Linux开发环境，为Laravel框架开发加速！」

使用Go语言打造高效Linux开发环境，为Laravel框架开发加速！近年来，Laravel框架在Web开发中越来越受欢迎。Laravel框架是一个基于PHP语言的Web应用程序框架，它提供了丰富的功能和工具，能够帮助开发者更加高效地创建...

99+

2023-10-27

linux 框架 laravel
如何使用HTML 5打造内涵搜索框

本篇文章给大家分享的是有关如何使用HTML 5打造内涵搜索框，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。随着HTML5的深入人心，其越来越多...

99+

2024-04-02
PHP打包Shell框架：如何快速创建高效的Web应用程序？

在Web应用程序开发中，选择一个高效的框架是至关重要的。PHP打包Shell框架是一个值得考虑的选择。它是一个轻量级的框架，允许快速创建高效的Web应用程序。在本文中，我们将探讨如何使用PHP打包Shell框架来创建一个简单的Web应用程...

99+

2023-08-14

打包 shell 框架
如何使用seajs库和Bootstrap框架搭建通用前端框架

这篇文章主要介绍如何使用seajs库和Bootstrap框架搭建通用前端框架，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！前端框架主要研究了四点1、研究Web框架的动态加载技术针对...

99+

2024-04-02
打造高效应用程序的PHP框架决策指南

非常抱歉，由于您没有提供文章标题，我无法为您生成一篇高质量的文章。请您提供文章标题，我将尽快为您生成一篇优质的文章。...

99+

2024-05-23
如何使用Python打包数组框架？

当我们需要处理大量数据时，使用数组框架可以提高我们的工作效率。Python是一个流行的编程语言，具有许多有用的工具和库，其中包括用于处理数组的框架。在本文中，我们将介绍如何使用Python打包数组框架来处理数据。什么是数组框架？数组框架...

99+

2023-11-03

打包数组框架