当前位置 : 主页 > 网络编程 > JavaScript >

运动函数封装

来源:互联网 收集:自由互联 发布时间:2021-06-28
运动函数封装 (function () {let Tween = {linear: function (t, b, c, d) { //匀速return c * t / d + b;},easeIn: function (t, b, c, d) { //加速曲线return c * (t /= d) * t + b;},easeOut: function (t, b, c, d) { //减速曲线return -
运动函数封装
(function () {
	let Tween = {
		linear: function (t, b, c, d) { //匀速
			return c * t / d + b;
		},
		easeIn: function (t, b, c, d) { //加速曲线
			return c * (t /= d) * t + b;
		},
		easeOut: function (t, b, c, d) { //减速曲线
			return -c * (t /= d) * (t - 2) + b;
		},
		easeBoth: function (t, b, c, d) { //加速减速曲线
			if ((t /= d / 2) < 1) {
				return c / 2 * t * t + b;
			}
			return -c / 2 * ((--t) * (t - 2) - 1) + b;
		},
		easeInStrong: function (t, b, c, d) { //加加速曲线
			return c * (t /= d) * t * t * t + b;
		},
		easeOutStrong: function (t, b, c, d) { //减减速曲线
			return -c * ((t = t / d - 1) * t * t * t - 1) + b;
		},
		easeBothStrong: function (t, b, c, d) { //加加速减减速曲线
			if ((t /= d / 2) < 1) {
				return c / 2 * t * t * t * t + b;
			}
			return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
		},
		elasticIn: function (t, b, c, d, a, p) { //正弦衰减曲线(弹动渐入)
			if (t === 0) {
				return b;
			}
			if ((t /= d) == 1) {
				return b + c;
			}
			if (!p) {
				p = d * 0.3;
			}
			if (!a || a < Math.abs(c)) {
				a = c;
				let s = p / 4;
			} else {
				let s = p / (2 * Math.PI) * Math.asin(c / a);
			}
			return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
		},
		elasticOut: function (t, b, c, d, a, p) { //正弦增强曲线(弹动渐出)
			if (t === 0) {
				return b;
			}
			if ((t /= d) == 1) {
				return b + c;
			}
			if (!p) {
				p = d * 0.3;
			}
			if (!a || a < Math.abs(c)) {
				a = c;
				let s = p / 4;
			} else {
				let s = p / (2 * Math.PI) * Math.asin(c / a);
			}
			return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
		},
		elasticBoth: function (t, b, c, d, a, p) {
			if (t === 0) {
				return b;
			}
			if ((t /= d / 2) == 2) {
				return b + c;
			}
			if (!p) {
				p = d * (0.3 * 1.5);
			}
			if (!a || a < Math.abs(c)) {
				a = c;
				let s = p / 4;
			} else {
				let s = p / (2 * Math.PI) * Math.asin(c / a);
			}
			if (t < 1) {
				return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
					Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
			}
			return a * Math.pow(2, -10 * (t -= 1)) *
				Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
		},
		backIn: function (t, b, c, d, s) { //回退加速(回退渐入)
			if (typeof s == 'undefined') {
				s = 1.70158;
			}
			return c * (t /= d) * t * ((s + 1) * t - s) + b;
		},
		backOut: function (t, b, c, d, s) {
			if (typeof s == 'undefined') {
				s = 3.70158; //回缩的距离
			}
			return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
		},
		backBoth: function (t, b, c, d, s) {
			if (typeof s == 'undefined') {
				s = 1.70158;
			}
			if ((t /= d / 2) < 1) {
				return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
			}
			return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
		},
		bounceIn: function (t, b, c, d) { //弹球减振(弹球渐出)
			return c - Tween['bounceOut'](d - t, 0, c, d) + b;
		},
		bounceOut: function (t, b, c, d) {
			if ((t /= d) < (1 / 2.75)) {
				return c * (7.5625 * t * t) + b;
			} else if (t < (2 / 2.75)) {
				return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
			} else if (t < (2.5 / 2.75)) {
				return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
			}
			return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
		},
		bounceBoth: function (t, b, c, d) {
			if (t < d / 2) {
				return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
			}
			return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
		}
	};
	/**
	 * 运动函数
	 * @param {Object} obj 元素
	 * @param {Object} json 运动目标
	 * @param {Number} time 运动时间
	 * @param {String} fx 运动效果
	 * @param {Function} fn 回调函数
	 */
	function startMove(obj, json, time, fx, fn) {
		if (typeof time == 'undefined') {
			time = 400;
			fx = 'linear';
		} else if (typeof time == 'string') {
			if (typeof fx == 'function') {
				fn = fx;
			}
			fx = time;
			time = 400;
		} else if (typeof time == 'function') {
			fn = time;
			time = 400;
			fx = 'linear';
		} else if (typeof time == 'number') {
			if (typeof fx == 'function') {
				fn = fx;
				fx = 'linear';
			} else if (typeof fx == 'undefined') {
				fx = 'linear';
			}
		}

		let iCur = {},
			startTime = +new Date();

		for (let attr in json) {
			iCur[attr] = 0;

			if (attr == 'opacity') { // 透明度数字换算
				iCur[attr] = Math.round(getStyle(obj, attr) * 100);
			} else {
				iCur[attr] = parseInt(getStyle(obj, attr));
			}
		}

		clearInterval(obj.timer);
		obj.timer = setInterval(function () {
			let changeTime = +new Date();
			let t = time - Math.max(0, startTime - changeTime + time); // 0到400

			for (let attr in json) {
				if (attr == 'opacity') {
					json[attr] = parseInt(json[attr]) * 100;
				}
				let v = Tween[fx](t, iCur[attr], json[attr] - iCur[attr], time);

				if (attr == 'opacity') {
					obj.style.opacity = v / 100;
				} else {
					obj.style[attr] = v + 'px';
				}
			}

			if (t == time) {
				clearInterval(obj.timer);
				fn && fn.call(obj);
			}
		}, 0);

		function getStyle(obj, attr) { // 获取样式
			if (obj.currentStyle) {
				return obj.currentStyle[attr];
			} else {
				return getComputedStyle(obj, false)[attr];
			}
		}
	}

	window.startMove = startMove;
})(window);
网友评论