js动画的几个基础函数

最新推荐文章于 2024-06-20 09:32:37 发布

原创最新推荐文章于 2024-06-20 09:32:37 发布 · 534 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #算法 #c

Javascript 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一种缓动效果算法，该算法通过不同的数学函数实现平滑过渡效果，包括线性、加速、减速等缓动模式。适用于网页动画、游戏开发等领域。

其实也叫缓动函数，如下：

/**
 * 缓慢移动效果算法
 *@param t {number} current time（当前时间）；
 *@param b {number} beginning value（初始值） 置0，即b=0；
 *@param c {number} change in value（变化量） 置1，即c=1；
 *@param d {number} duration（持续时间）	  置1，即d=1。
 */
var Easing = { // Quad | Cubic | Quart | Quint |||| Sine | Expo | Circ
	'ease':function (t) {
		return ( -Math.cos(t * Math.PI) / 2 ) + 0.5; // (-Math.cos(pos*Math.PI)/2) + 0.5  (sinusoidal)
	},
	'linear':function (t) {
		return t;	//c*t/d + b;
	},
	'ease-in':function (t) {
		return t * t;	//c*(t/=d)*t + b
	},
	'ease-out':function (t) {
		return ( 2 - t) * t;	//-c *(t/=d)*(t-2) + b
	},
	'ease-in-out':function (t) {
		return (t *= 2) < 1 ?
			.5 * t * t :
			.5 * (1 - (--t) * (t - 2));	//(t/=d/2) < 1? c/2*t*t + b : -c/2 * ((--t)*(t-2) - 1) + b;
	},
	'ease-in-strong':function (t) {
		return t * t * t * t;	//c*(t/=d)*t*t*t + b  (quartEaseIn)
	},
	'ease-out-strong':function (t) {
		return 1 - (--t) * t * t * t;	//-c * ((t=t/d-1)*t*t*t - 1) + b
	},
	'ease-in-out-strong':function (t) {
		return (t *= 2) < 1 ?
			.5 * t * t * t * t :
			.5 * (2 - (t -= 2) * t * t * t);	//(t/=d/2) < 1) ? c/2*t*t*t*t + b : -c/2 * ((t-=2)*t*t*t - 2) + b
	}
};