t:ANIMATEMOTION Element | animateMotion Object

HTML (DHTML)

t:ANIMATEMOTION Element | animateMotion Object

Internet Development Index

Animates the position of an element over time.

Members Table

The following table lists the members exposed by the animateMotion object. Click a tab on the left to choose the type of member you want to view.

Attributes/Properties

AttributePropertyDescription
ACCELERATEaccelerate Sets or retrieves a value that applies an acceleration to an element's timeline.
ACCUMULATEaccumulate Sets or retrieves a value that indicates whether the animation is cumulative.
ADDITIVEadditive Sets or retrieves a value that indicates whether the animation is additive with other animations.
AUTOREVERSEautoReverse Sets or retrieves whether the timeline on an element begins playing in reverse immediately after completing in the forward direction.
BEGINbegin Sets or retrieves the delay time before the timeline begins playing on the element.
BYby Sets or retrieves a relative offset value for an animation.
CALCMODEcalcMode Sets or retrieves the interpolation mode for the animateMotion object.
DECELERATEdecelerate Sets or retrieves a value that applies a deceleration to the end of a simple duration.
DURdur Sets or retrieves a value indicating the amount of time the element remains active or displayed.
ENDend Sets or retrieves a value indicating the end time for the element, or the end of the simple duration when the element is set to repeat.
FILLfill Sets or retrieves the action an element takes if its timeline ends before the timeline on its parent element ends.
FROMfrom Sets or retrieves the starting value of an animation.
hasMedia Retrieves a Boolean value that indicates whether the element is an Introduction to HTML+TIME media element.
KEYSPLINESkeySplines Sets or retrieves a set of Bezier control points that define the interval pacing of an animation.
KEYTIMESkeyTimes Sets or retrieves a list of time values used to control the pacing of an animation.
ORIGINorigin Sets or retrieves the origin of motion for the animation.
PATHpath Sets or retrieves a set of values that describe a path as a function of time.
REPEATCOUNTrepeatCount Sets or retrieves the number of times an element's timeline repeats.
REPEATDURrepeatDur Sets or retrieves the number of seconds that an element's timeline repeats.
RESTARTrestart Sets or retrieves the conditions under which an element can be restarted on a timeline.
SPEEDspeed Sets or retrieves the playback speed of an element relative to its parent time container.
systemBitrate Retrieves the approximate bandwidth available to the system in bits-per-second.
systemCaptions Indicates whether or not to display a text equivalent of the audio portion of the presentation.
systemLanguage Indicates whether a given language is selected in a user's system preferences.
systemOverdubOrSubtitle Specifies whether overdubs or subtitles render during a presentation.
TARGETELEMENTtargetElement Sets or retrieves the target element to be animated.
TIMECONTAINERtimeContainer Sets or retrieves the type of timeline associated with an element.
timeParent Retrieves the parent time container element of the current element.
TOto Sets or retrieves the ending value of an animation.
VALUESvalues Sets or retrieves a list of semicolon-separated values of an animation.

Events

EventDescription
onbegin Fires when the timeline starts on an element.
onend Fires when the timeline stops on an element.
onpause Fires when the timeline on an element pauses.
onrepeat Fires when the timeline repeats on an element, beginning with the second iteration.
onreset Fires when the timeline reaches the value of the BEGIN attribute or when the resetElement method is called on the element.
onresume Fires when an element's timeline resumes from a paused state.
onreverse Fires when the timeline on an element begins to play backward.

Methods

MethodDescription
activeTimeToParentTime Converts a value in the element's active timeline to the corresponding point in the parent timeline.
activeTimeToSegmentTime Converts a value in the element's active timeline to the corresponding point in the segment timeline.
beginElement Starts the element on the timeline.
beginElementAt Starts an element's timeline at the specified time.
documentTimeToParentTime Converts a value in the document timeline to the corresponding point in the element's parent timeline.
endElement Stops the element on the timeline.
endElementAt Ends an element's timeline at the specified time.
parentTimeToActiveTime Converts a value in the parent timeline to the corresponding point in the element's active timeline.
parentTimeToDocumentTime Converts a value in the element's parent timeline to the corresponding point in the document timeline.
pauseElement Stops playing an element's timeline at the current point.
resetElement Removes any changes made to the element and returns the element to its original state.
resumeElement Restarts the element's timeline from a paused state.
seekActiveTime Locates a specified point on the element's active timeline and begins playing from that point.
seekSegmentTime Locates the specified point on the element's segment timeline, and begins playing from that point.
seekTo Locates a specified point on the element's segment timeline, including repetitions, and begins playing from that point.
seekToFrame Locates a specified frame in the object.
segmentTimeToActiveTime Converts a value in the element's segment timeline to the corresponding point in the element's active timeline.
segmentTimeToSimpleTime Converts a value in the element's segment timeline to the corresponding point in the element's simple timeline.
simpleTimeToSegmentTime Converts a value in the element's simple timeline to the corresponding point in the element's segment timeline.

Objects

ObjectDescription
currTimeState Contains information about an HTML+TIME timeline.

Remarks

When animating style properties on an object, the property and any related properties must be initialized in the object's style. For example, when animating the top or left properties, you must initialize the top and left properties, as well as the position.

The following example demonstrates how to use the t:ANIMATEMOTION element to move a div.

<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>t:ANIMATEMOTION Demo</TITLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY>
<DIV ID="oDIV" STYLE="position:absolute; top:100px; left:50px; width:100px;
height:50px; border:solid black 1px; text-align:center;">Moving DIV!</DIV>
<t:ANIMATEMOTION targetElement="oDIV" to="200,200" dur="5" fill="hold"/>
</BODY>
</HTML>

The prefix t: is used to associate this element with an Extensible Markup Language (XML) namespace. You must declare the XML namespace in the html tag of your document when using this element.

<HTML XMLNS:t ="urn:schemas-microsoft-com:time">

You must then import the tag definitions from the time2 behavior by using the IMPORT processing instruction.

<?IMPORT namespace="t" implementation="#default#time2">

Specify BY, FROM, and TO attribute values in comma-separated x,y pairs.

<t:ANIMATEMOTION TO="200,200" .../>

When writing script to dynamically change the properties of an active animation, developers should consider a couple of issues. Because results might be unpredictable or undefined when you change the properties of an active animation, restart the animation with beginElement after you have made the change. For example:

<SCRIPT>
object.endElement();
object.path="M 0 0 L 100 100";
object.beginElement();
</SCRIPT>

The members listed in the following table might not be accessible through scripting until the window.onload event fires. Waiting for this event to fire ensures that the page is completely loaded, that all behaviors have been applied to corresponding elements on the page, and that all the behavior's properties, methods, and events are available for scripting. Using any of the behavior-defined members before the window.onload event fires could result in a scripting error, indicating that the object does not support that particular member.

For the animate, animateMotion, and animateColor objects, the time2 behavior uses the following model to evaluate which properties to animate.

  • The path property overrides any setting for the values, from, to, or by properties.
  • The values property, if specified, overrides any setting for the from, to, or by properties.
  • The from property is used unless the values or path properties are specified.
  • The to property, if specified, overrides any setting for the by property.
  • The by property doesn't override any properties.
To change an active animation from a path to a values list through script:
<SCRIPT>
object.endElement();
object.path=null;
object.values="100,100;0,0";
object.beginElement();
</SCRIPT>

This element is not rendered.

This element requires a closing tag.

Standards Information

This object is defined in Synchronized Multimedia Integration Language (SMIL) 2.0 Non-Microsoft link.

See Also

animate, animateColor, Introduction to HTML+TIME, set, time2