JavaScript基础8：动画事件

1 动画的开始结束帧

ele.ontransitionend = function(){};
ele.ontransitionstart  = function(){};
ele.onanimationend  = function(){};
ele.onanimationstart  = function(){};

2 requestAnimationFrame动画帧

动画帧和定时器的区别

• 计算机显示器刷新频率一般是60Hz，相当于每秒重绘60次
• 动画帧采用的是系统时间间隔，它与计算机系统重绘频率保持一致（高性能，视觉佳）
• 定时器执行时间间隔不精确
• 兼容性 IE9 以下不兼容

取消动画帧

• cancelAnimationFrame

3 ween 动画公式

• Tween 参数解析
  • t: current time（当前时间-当前运动次数）
  • b: beginning value（初始值）
  • c: change in value（变化量）
  • d: duration（持续时间-运动总次数）
• 动画框架使用
  • css(el,attr[,value]) css 函数 设置或获取样式
    • 注意: 非数值类样式的处理
    • 注意: transform 相关样式的处理问题

4 封装一个运动框架

4.1 封装一个css样式框架

用于当前样式的获取以及修改

// css样式框架
function css(el, attr, val) {
    if(arguments.length == 2) { // 当只传了前两个参数的时候，是要获取样式
        return parseFloat(getComputedStyle(el)[attr]);
    }

    switch(attr) {
        case 'opacity':
        case 'zIndex':
            el.style[attr] = val;
            break;
        default:
            el.style[attr] = val + 'px';
    }
}

4.2 封装一个mtween运动框架

function mTween(op) {
	let init = {
		time: 400,
		type: "easeBothStrong"
	};

	for (let s in op) {
		init[s] = op[s];
	}
	let delay = 1000 / 60;
	let t = 0;
	let b = {};
	let c = {};
	let d = Math.ceil(init.time / delay);
	for (let s in init.attr) {
		b[s] = css(init.el, s);
		c[s] = init.attr[s] - b[s];
	}
	cancelAnimationFrame(init.el.timer);
	init.el.timer = requestAnimationFrame(move);
	console.log(init.el.timer)

	function move() {
		// console.log(init.el.timer);
		t++;
		if (t > d) {
			cancelAnimationFrame(init.el.timer);
			init.cb && init.cb();
		} else {
			for (let s in b) {
				let val = Tween[init.type](t, b[s], c[s], d);
				css(init.el, s, val);
			}
			init.el.timer = requestAnimationFrame(move);
		}
	}
}