今日の当番を忘れていました。。

このまえjQueryのEasingをさわってみました。

関数を作ってanimateの第三引数で指定するだけです。


jQuery.extend( jQuery.easing,
{
	achamaro: function (x, t, b, c, d) {
		return x;
	}
});

$(".acha").animate({left: 100 + "px"},100,"achamaro");

それぞれの引数は
x: 経過時間 / 指定した時間
t: 経過時間
b: 開始値
c: 終了値
d: 指定した時間

そして、戻り値をx=0の時0、x=1の時1を返すようにすると
アニメーションが作れます。

その時に作った関数を載せてみます。
いろいろ作ってみて下さい。
jQuery.extend( jQuery.easing,
{
	/**
	 * 2次関数 軸X=0.8 (0,0) (1,1)
	 */
	acha2: function (x, t, b, c, d) {
		var val = b + c * (((-5/3) * Math.pow(x - 0.8,2)) + (3.2/3));
		ctx.lineTo(100 * x,100 * val);
		ctx.stroke();
		return val;
	},

	/**
	 * 2次関数 軸X=0.7 (0,0) (1,1)
	 */
	acha3: function (x, t, b, c, d) {
		var val = b + c * ((-2.5 * Math.pow(x - 0.7,2)) + 1.225);
		ctx.lineTo(100 * x,100 * val);
		ctx.stroke();
		return val;
	},

	/**
	 * 2次関数 頂点のx座標を指定
	 */
	acha4: create2dfunc(0.75)
});

function create2dfunc(_x)
{
	var _a = 1 / (Math.pow(1 - _x,2) - Math.pow(_x,2));
	var _b = -_a * Math.pow(-_x,2);

	return function(x, t, b, c, d)
	{
		var _y = b + c * ((_a * Math.pow(x - _x,2)) + _b);
		ctx.lineTo(50 + 50 * x, 50 + 50 * _y);
		ctx.stroke();
		return _y;
	};
}

 
Recent Comment
Categories
Writer
  • hidetarou
  • acha_maro
  • gazza069
  • sin_ya
  • yossy222
  • marionnettezero
  • TUYO
  • shiovo
  • yani_arcana
  • momiji0510
  • keiko_www
  • toma_max
  • kyonmaru
  • __senta
  • kenzo
  • t_suzuki
  • hikari_f
  • macchii
  • mashu