以下のようなコードで物体をバネのように動かす事が出来る(Prototype.js使用)。

document.observe('dom:loaded', function(event) {
    var timeId;
    document.observe('click', function(event) {
        if (timeId) clearInterval(timeId);
        var xVel = 0;
        var yVel = 0;
        timeId = setInterval(function() {
            xVel = velElastic(parseInt($('move').getStyle('left')), event.pointerX(), .14, .85, xVel);
            yVel = velElastic(parseInt($('move').getStyle('top')), event.pointerY(), .14, .85, yVel);
            $('move').setStyle({
                left: (parseInt($('move').getStyle('left')) + xVel) + 'px',
                top: (parseInt($('move').getStyle('top')) + yVel) + 'px'
            });
        }, 30);
    });
});

function velElastic(orig, dest, springConst, damp, elas) {
	elas += -springConst * (orig - dest);
	return elas *= damp;
}

このページのどこかをクリックすると写真がやってきてそんな動きをする

IMG_0051

カテゴリ:

トラックバック(0)

トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/71

コメントする