HTML and CSS Reference
In-Depth Information
Simple spring, abbreviated form
vx += (targetX - object.x) * spring;
vy += (targetY - object.y) * spring;
vx *= friction;
vy *= friction;
object.x += vx;
object.y += vy;
Simple spring, short form
vx += (targetX - object.x) * spring;
vy += (targetY - object.y) * spring;
object.x += (vx *= friction);
object.y += (vy *= friction);
Offset spring
var dx = object.x - fixedX,
dy = object.y - fixedY,
angle = Math.atan2(dy, dx),
targetX = fixedX + Math.cos(angle) * springLength,
targetY = fixedX + Math.sin(angle) * springLength;
//spring to targetX, targetY as above
Summary
This chapter covered the two basic techniques of proportional motion: easing and springing. You've
learned that easing is proportional motion and springing is proportional velocity. You should have a very
good understanding of how to apply both of these techniques, and have begun to play with them and
create some really fun and interesting effects yourself.
Now that you've learned all sorts of ways of moving things around, let's move on to the next chapter,
where you'll find out what to do when they start hitting eachother!
