Affine Transformations vs Keyframing

Question

This may be a silly question to a graphics guru (which I am not), but what's the difference between affine transformations and keyframing? I'm reading about the former in the iPhone cookbook, and she states that 'Affine transforms enable you to change an object's geometry by mapping that object from one view coordinate system into another'. This reminds me of when I played with Adobe After Effects, and you'd set the start, 'in between', and finishing positions, and would get a nice visual animation. They called it keyframing. So what's the difference this and affine transormations. Is it a 2D vs 3D thing? Thanks all.

Answer 1

an affine transform is a linear mapping from one coordinate system to another. if i have an affine transform X, I can take a square "s" and X(s) could return some type of parallelogram. There is no concept of time, just a space-to-different-space mapping.

A Keyframe is a fixed state in space/time. so, you can say, take your square s and perform a transform X at 3 seconds, perform another transform Y at 6 seconds, and interpolate between those. Note that keyframes don't require affine transforms -- you could store keys as non-linear transformations, or even non-matrix transformations (such as character animation in a video game)

Answer 2

An affine transformation is a linear transformation followed by a translation. Examples would be:

• Rotate 45 degrees to the left then shift up 10 pixels
• Zoom in by a factor of 2, then move 10 pixels to the right.
• Rotate 95 degrees.

They are much simpler than keyframing and the like.

Answer 3

There is no concept of animation in affine transformations natively. When it says "change an object's geometry," it doesn't mean animate. Affine transformations are merely the mathematical foundation on how translations, rotations, and scalings are performed, under the hood. One way of thinking about this is that they are primarily used to map relative coordinate systems to other coordinate systems.

For example, if you have a panel that is 100 pixels wide by 30 pixels tall, with a radio button at (10, 10), and a checkbox at (80, 10). Then this panel is placed at (40, 15) on the screen and is magnified 50%, so that it is now 50 pixels wide by 15 pixels tall, then there is an affine transform that maps the radio button from (10, 10) relative to the panel, to (45, 20) on the screen.