动画函数优化，为任意元素添加任意多个属性

注释：

　　本篇文章封装了两个函数，

　　① getStyle 方法：获取任意元素任意一个属性的值，兼容谷歌，火狐，IE浏览器

　　② variableSpeedAnimate 方法：为任意元素添加任意多个属性，引入了回调函数，可在动画结束后，执行新的操作。

　　注意：

　　　parseInt("128px") = 128

　　　如果设置的属性是 “opacity”，为了取得整数值，避免计算机的精度问题，可以采用“放大缩小”策略，即当前值和目标值放大相同倍数，设置属性值时，缩小相同倍数

　　　如果设置的属性是“zIndex”，不用直接渐变，直接将zIndex值设置成目标值即可

　　　属性值是“zIndex”而不是“z-index”是因为浏览器计算后的样式是“zIndex”，驼峰式命名法

一、代码

/*** 封装缓动动画，变速，为任意元素添加任意多个属性* @param {*} element   元素* @param {*} json      css属性键值对，例如{"width":200,"height":100,"zIndex":100,"opacity":0.3}* @param {*} fn        回调函数，动画结束，调用回调函数*/
function variableSpeedAnimate(element, json, fn) {clearInterval(element.timeId);element.timeId = setInterval(function () {var reachTarget = true;for (const attr in json) {if (attr == "zIndex") {element.style[attr] = json[attr];} else if (attr == "opacity") {var current = getStyle(element, attr) * 100;var target = json[attr] * 100;var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);current += step;element.style[attr] = current / 100;if (current != target) {reachTarget = false;}} else {var current = parseInt(getStyle(element, attr));var target = json[attr];var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);current += step;element.style[attr] = current + "px";if (current != target) {reachTarget = false;}}}if (reachTarget) {clearInterval(element.timeId);if (fn) {fn();}}}, 20)
}

二、测试deno

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 200px;height: 100px;position: absolute;left: 0px;top: 0;border: 1px solid yellow;background-color: pink;z-index: 0;}input {position: relative;z-index: 99;}</style>
</head><body><input type="button" value="400px" id="btn" /><input type="button" value="800px" id="btn1" /><div id="dv"></div><script src="./js/common.js"></script><script>// 400按钮点击事件my$("btn").onclick = function () {var json = {"width":400,"left":200,"top":150,"opacity":0.6};animate(my$("dv"), json,function(){var json1 = { "width":400,"left":500,"top":250,"opacity":0.3};animate(my$("dv"), json1,function(){var json2 = {"width":200,"left":0,"top":0,"opacity":1,"zIndex":100};animate(my$("dv"), json2);})});};// 800按钮点击事件my$("btn1").onclick = function () {animate(my$("dv"), {'left':800});};// 封装动画缓冲函数，变速function animate(element, json, fn) {clearInterval(element.timeId);element.timeId = setInterval(function () {var reachTarget = true;for (const attr in json) {if (attr == "zIndex") {element.style[attr] = json[attr];} else if (attr == "opacity") {var current = getStyle(element, attr) * 100;var target = json[attr] * 100;var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);current += step;element.style[attr] = current / 100;if (current != target) {reachTarget = false;}} else {var current = parseInt(getStyle(element, attr));var target = json[attr];var step = (target - current) / 10;step = step > 0 ? Math.ceil(step) : Math.floor(step);current += step;element.style[attr] = current + "px";if (current != target) {reachTarget = false;}}}if (reachTarget) {clearInterval(element.timeId);if (fn) {fn();}}}, 20)}</script>
</body></html>

三、common.js

/*根据id获取元素对象*/
function my$(id) {return document.getElementById(id);
}/*** 获取任意一个元素的任意一个属性值* @param {*} element   元素* @param {*} attr      属性值，字符串格式，例如'width'...*/
function getStyle(element, attr) {return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}

四、效果图

　　初始图：

　　点击400px按钮：

　　点击800px按钮：

转载于:https://www.cnblogs.com/mycnblogs-guoguo/p/11250685.html

动画函数优化，为任意元素添加任意多个属性相关推荐

动画函数，为任意一个元素移动到指定的目标位置
一.动画缓冲函数 /*** 动画函数* 任意一个元素移动到指定的目标位置* @param {*} element 任意一个元素* @param {*} target 目标位置(number类型)*/ ...
JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
css+动画优化,css3动画性能优化--针对移动端卡顿问题
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
22_2D函数优化实例
1.19. 2D函数优化实例为了演示优化神经网络参数得到loss极小值的过程,和不同初始值可能产生不同的极值点,在此引入了如下图所示函数: 从图中可以看出该函数2D图像呈碗状,有四个极小值点,它的极 ...
动画函数requestAnimationFrame
经典动画话不多说,首先来个经典的动画函数: function animate(element, name, from, to, time) { time = time || 800; //默认0.8 ...
递归循环一个无限极数组_理解递归、尾调用优化和蹦床函数优化
想要理解递归,您必须先理解递归.开个玩笑罢了, 递归是一种编程技巧,它可以让函数在不使用 for 或 while 的情况下,使用一个调用自身的函数来实现循环. 例子 1:整数总和例如,假设我们想要 ...
简单的动画函数封装（2）
<div></div><button class="btn1"> ...
最终的动画函数封装（2）
<button>点击触发1</button><button>点击触发2</button><div></div> <styl ...
javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步
BOM介绍: BOM指的是浏览器对象模型,是用来操作浏览器的,例如浏览器弹窗.地址栏.滚动条等,浏览器顶级对象:window:页面中的所有内容都是属于window的,window可以省略:confir ...

动画函数优化，为任意元素添加任意多个属性

动画函数优化，为任意元素添加任意多个属性相关推荐

最新文章

热门文章