JavaScript animate动画函数封装

利用JavaScript实现动画移动元素

html代码如下

<input type="button" value="移动到400px" class="btn">
<div class="dv"></div>

利用按钮实现自己想要的动画效果

css代码如下

* {
margin: 0;
padding: 0;
}
input {
margin-top: 20px;
}
div {
width: 200px;
height: 100px;
margin-top: 50px;
background-color: pink;
position: absolute;
left: 0;
top: 0;
}

js代码如下

let btn = document.querySelector(".btn");
let dv = document.querySelector(".dv");
// 点击按钮，改变宽度到达一个目标，高度达到一个目标值
btn.onclick = function () {
let json1 = { width: 400, height: 300, left: 500, top: 300,"opacity":0.5};
animate(dv, json1);
// animate(dv, { "width": 800, "height": 400, "left": 500, "top": 600 })
}
function animate(element, json, fn) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var flag = true; //默认，假设，全部到达目标
for (const attr in json) {
// 判断这个属性attr中是不是opacity
if (attr == "opacity") {
// 获取元素这个属性的当前的透明度，当前的透明度放大100倍
var current = parseInt(getStyle(element, attr) * 100);
// 目标的透明度放大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;
} else if (attr == "zIndex") {
// 判断这个属性attr中是不是zIndex
// 层级改变就是直接改变这个属性的值
element.style[attr] = json[attr];
} 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) {
flag = false;
}
}
if (flag) {
clearInterval(element.timeId);
if (fn) {
fn();
}
}
// 测试代码
// console.log("目标：" + traget, "当前：" + current, "每次的移动步数：" + step);
}, 20);
// 获取任意一个元素的任意一个样式的当前值---字符串类型
function getStyle(element, attr) {
// 判断浏览器是否支持这个方法
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}

animate函数中封装的是动画的样式，可以改变一个元素的多个属性值和zIndex和opacity

element：表示元素

json：封装的对象----多个属性

fn：回调函数

getStyle函数中封装的是获取一个元素的任意一个样式的当前值，返回的是一个字符串类型

判断浏览器是否支持这个方法返回元素的当前值

最后

以上就是长情毛衣为你收集整理的JavaScript animate动画函数封装的全部内容，希望文章能够帮你解决JavaScript animate动画函数封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。