js动画（封装）

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;
}