JS实现动画效果(利用定时器)
2023-06-13 09:12:01 时间
JavaScript 动画主要利用定时器(setTimeout 和 setInterval)来实现。设计思路:通过循环改变元素的某个 CSS 样式属性,从而达到动态效果,如移动位置、缩放大小、渐隐渐现等。
移动速度、频率等问题可以借助定时器来实现。但效果的模拟涉及算法问题,不同的算法,可能会设计出不同的移动效果,如匀速运动、加速和减速运动。
移动动画主要通过动态修改元素的坐标来实现。技术要点如下:
移动速度、频率等问题可以借助定时器来实现。但效果的模拟涉及算法问题,不同的算法,可能会设计出不同的移动效果,如匀速运动、加速和减速运动。
下面示例演示了如何设计一个简单的元素移动效果。通过指向元素、移动的位置,以及移动的步数,可以设计按一定的速度把元素从当前位置移动到指定的位置。本示例引用前面介绍的 getB() 方法,该方法能够获取当前元素的绝对定位坐标值。
//简单的移动参数 //参数:e表示元素,x和y表示要移动的终点坐标,t表示元素移动的步数 function slide (e, x, y, t) { var t = t || 100; //初始化步数,步数越大,速度越慢,移动越逼真 var o = getB(e); //当前元素的绝对定位坐标值 var x0 = o.x; var y0 = o.y; var stepx = Math.round((x - x0) / t); //计算x轴每次移动的步长,由于像素点不可用小数,所以会存在一定的误差 var stepy = Math.round((y - y0) / t); //计算y轴每次移动的步长 var out = setInterval (function () { //设计定时器 var o = getB(e); //获取每次移动后的绝对定位坐标值 var x0 = o.x; var y0 = o.y; e.style[ left ] = (x0 + stepx) + px e.style[ top ] = (y0 + stepy) + px //如果距离终点距离小于步长,则停止循环并校正最终坐标位置 if (Math.abs(x - x0) = Math.abs(stepx) || Math.abs(y - y0) = Math.abs(stepy)) { e.style[ left ] = x + px //定位每次移动的位置 e.style[ top ] = y + px //定位每次移动的位置 clearTimeout(out); }, 2) };
使用时应该定义元素绝对定位或相对定位的显示状态,否则移动无效。在网页动画设计中,一般都使用这种定位移动的方式来实现。
style type= text/css .block { width:20px; height:20px; position:absolute; left:200px; top:200px; background-color:red; } /style div >渐隐渐显效果主要通过动态修改元素的透明度来实现。
下面示例实现一个简单的渐隐渐显动画效果。
//渐隐渐显动画显示函数 //参数:e表示元素,t表示速度,值越大速度越慢 //io表示显示方式,true表示渐显,false表示渐隐 function fade (e, t, io) { var t = t || 100; //初始化渐隐渐显速度 if (io) { var i = 0; } //初始化渐隐渐显方式 else { var i = 100; } var out = setInterval (function () { //设计定时器 setOpacity (e, i); //调用setOpacity()函数 if (io) { //根据渐隐或渐显方式决定执行效果 i ++; if (i = 100) clearTimeout(out); } else { i --; if (i = 0) clearTimeout(out); }, t); }下面调用该函数:
style type= text/css .block { width:200px; height:200px; background-color:red; } /style div >23301.html
CSSjavaJavaScript
相关文章
- js中数组截取方法
- 『Three.js』几个简单的入门动画(新手篇)
- 中国地图china.js[通俗易懂]
- js动画和css3动画_js控制css动画
- JS面试题-js新增基本数据类型BigInt
- 高中物理学运动公式实现js动画
- javascript动画效果_js动画效果animate
- JS模块化之CJS&AMD&CMD&ES6-前端面试知识点查漏补缺
- 原生 JS 实现 HTML 转 Markdown,以及其实现逻辑(html2md.js 或 html2markdown.js)
- Next.js 在 Serverless 中从踩坑到破茧重生
- JS innerText和outerText属性:读写文本
- 使用JS连接MySQL数据库:实现化繁为简(js连接mysql数据库)
- 创建JS文件:在Linux下实现自动化任务(linux创建js文件)
- Linux上的JS压缩工具(js压缩工具linux)
- 使用JS实现Redis数据读取(js读取redis)
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- 使用JS操作Oracle数据库探索潜在可能性(js和oracle数据库)
- JS在Oracle中的应用(js如何oracle)
- JavaScript探索之旅掌握Oracle和JS的完美融合(js与oracle)
- 才发现的超链接js导致网页中GIF动画停止的解决方法
- JS动画效果代码3
- 用于判断用户注册时,密码强度的JS代码
- js排序动画模拟-插入排序
- js根据给定的日期计算当月有多少天实现思路及代码
- js/html光标定位的实现代码
- js获取url参数代码实例分享(JS操作URL)
- js获取当前地址JS获取当前URL的示例代码
- js脚本实现数据去重
- js判断某个方法是否存在实例代码