js动画应用
1.凡是可以看到过渡效果的基本都可以用到js动画
2.在一些库中有东阿虎方法封装。例如jq vue 都有
3.常用:轮播,无缝轮播,滚动联动 图片放大变小过渡,…
主要通过setInterval 实现的
用css 动画融合js 实现动画
ani动画方法封装方式
1.给哪个元素绑定动画 el
1.1 获取一下元素对象
2.这个元素移动的位移是多少 st
2.1 当前的位置是多少,中点是哪里;位移差;
2.2 每次多少
3.动画执行的时间 tm
4.css哪个属性发生变化
4.1 获取当前样式
5.其他情况处理(功能) 函数
获取元素的方法封装
function $(str){
return document.querySelectorAll(str);
}
/**
* getEl() 多成
* 层选择器
* var res=getEl(".box p zQ");
* @param {*} str
*/
function getEl(str) {
var arr = str.split(" ");
var list = [];
for (var i = 0; i < arr.length; i++) {
list.push([]);
}
for (var i = 0; i < arr.length; i++) {
if (i == 0) {//第一层元素,让document.get
//将找到的DOM元素添加到对应的list子数组内部,方便查找下一层元素
if (arr[i].charAt(0) === "#") {
list[i] = [document.getElementById(arr[i].replace("#", ""))];
} else if (arr[i].charAt(0) === ".") {
list[i] = document.getElementsByClassName(arr[i].replace(".", ""))
} else {
list[i] = document.getElementsByTagName(arr[i]);
}
} else {//除了第一层,其他层全部由上一层元素获取
for (var j = 0; j < list[i - 1].length; j++) {
var elArr = [];
if (arr[i].charAt(0) === ".") {
elArr = list[i - 1][j].getElementsByClassName(arr[i].replace(".", ""));
} else {
// console.log(list[i-1][j].getElementsByTagName,arr[i]);
elArr = list[i - 1][j].getElementsByTagName(arr[i]);
}
for (var m = 0; m < elArr.length; m++) {
list[i].push(elArr[m]);
}
}
}
}
return list[list.length - 1];
}
// 动画的回调函数
// 执行完一个动画后执行另一个动画
function $_animation(el, str, end, tm, fn) {
clearInterval(el.timer);
// 1.获取初始样式
var start = getStyle(el, str);
start = parseFloat(start);
// 2.求差
var s = end - start;
// 3.执行动画
el.timer = setInterval(function () {
start += s / tm * 16.7;
if (s > 0) {
// end > start 业务
if (start >= end) {
start = end;
clearInterval(el.timer);
flag = true;
el.style[str] = str === "opacity" ? start : start + "px";
// 执行下一个动画业务处理
fn ? fn() : null; //判断是否有参数;如果有;执行回调函数
} else {
el.style[str] = str === "opacity" ? start : start + "px";
}
} else {
// end < start 业务
if (start <= end) {
start = end;
clearInterval(el.timer);
flag = true;
el.style[str] = str === "opacity" ? start : start + "px";
fn ? fn() : null;
} else {
el.style[str] = str === "opacity" ? start : start + "px";
}
}
}, 16.7);
}
function getStyle(el, str) {
var res;
if (el.currentStyle) {
res = el.currentStyle[str];
} else {
res = getComputedStyle(el)[str];
}
return res;
}