Another type of animation is multivalued interpolation. This applies when an animateable attribute has multiple values. We'll set up an interpolation between two paths. The only restriction is that they have to have the same number of coordinates and types of subcommands (like L, Q, C or A) for the animation to work.
|
|
| <path id="curve"
stroke="black" fill="yellowgreen" stroke-width="3" fill-opacity=".5"
> <animate attributeName="d" dur="3s" values= "M 100,0 0,100 70, 50 130,150 200,100 z; M 100,0 0,100 70,150 130, 50 200,100 z; M 100,0 0,100 70, 50 130,150 200,100 z" repeatCount="indefinite" /> </path> |
| Link to working example (with some illustrative additions) |
The key to understanding this example is to notice observe that the path's shape, "d", is governed by three values (separated from one another by semicolons and typeset for ease of reading here on separate lines). The first and last of those strings of coordinates are the same as each other, and each string has exactly five points. That is, we will be animating a pentagon. Furthermore by examing the first, second and last points of the pentagon, you can see that we keep three of the points unchanged. Only the two points, when x=70 and when x=130 will be changed. As one moves down the page from (70,50) to (70,150) the other will be moving up the same distance. The starting and middle values of the path are shown at the right of the animation.
Allowing a moving object to follow this moving path is, then straightforward (and working in all browsers but Firefox currently):
|
|
| <path id="curve"
stroke="black" fill="yellowgreen" stroke-width="3" fill-opacity=".5"
> <animate attributeName="d" dur="3s" values= "M 100,0 0,100 70, 50 130,150 200,100 z; M 100,0 0,100 70,150 130, 50 200,100 z; M 100,0 0,100 70, 50 130,150 200,100 z" repeatCount="indefinite" /> </path> <ellipse id="One" cx="0" cy="0" rx="16" ry="8" fill="#555" opacity=".85" stroke="black" stroke-width="2"> <animateMotion dur="5s" rotate="auto" repeatCount="indefinite" > <mpath xlink:href="#curve"/> </animateMotion></ellipse> |
| Link to working example (with some illustrative additions) |
A couple more examples are shown here (click on the illustrations to see the live examples), but you may want to use Opera for these since both Webkit and Firefox 4b have certain problems:
