今日の当番を忘れていました。。
このまえ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; }; }