以下のようなコードで物体をバネのように動かす事が出来る(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;
}
このページのどこかをクリックすると写真がやってきてそんな動きをする
カテゴリ:
トラックバック(0)
トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/71
コメントする