VALUES Attribute | values Property | Internet Development Index |
Sets or retrieves a list of semicolon-delimited RGB color values for a t:ANIMATECOLOR element.
Syntax
HTML <t:ANIMATECOLOR VALUES = vValues... > Scripting t:ANIMATECOLOR.values(val) [ = vValues ]
Possible Values
vValues Variant that specifies or receives a list of semicolon-delimited RGB color values. The values are applied over the course of the animation in the order they appear in the list. The property is read/write. The property has no default value.
Remarks
The animation values must be legal values for the specified attributeName property. In the context of t:ANIMATECOLOR, valid attribute values are hexadecimal RGB values or the keywords that represent them (for example, #8A2BE2 or blueviolet). For more information about supported color values, see the Color Table.
The values property overrides any specified to, from, or by values set on the animation.
The calcMode property determines how the values attribute is interpreted. Depending on the calcMode setting, you can specify linear, discrete, paced, or splined interpolation between the values listed for the values attribute. These settings determine the rate of change from one value to another during the course of the animation梐 paced interpolation provides an even color change, for instance, whereas a splined interpolation might provide accelerated or decelerated transitions.
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.values='cyan;#0000FF'; object.beginElement(); </SCRIPT>For the animate, animateMotion, and animateColor objects, the time2 behavior uses the following model to evaluate which properties to animate.
- 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.
Example
This example demonstrates how you can set a semicolon-delimited series of values for the values attribute when using the t:ANIMATECOLOR element to animate color properties. The outer DIV element initially changes colors from blue (#0000FF) to cyan (#00FFFF) over a five-second duration; the inner DIV reverses this animation over the same duration. Click any button from the first group to set the first value for the t:ANIMATECOLOR element's values attribute (the animation for the inner DIV element). Click a button from the second group to set the second value in the series. The color value series you select for the inner DIV's animation will be played in reverse by the outer DIV element when you click the Restart button.
<HTML XMLNS:t ="urn:schemas-microsoft-com:time"> <HEAD> <STYLE> .time {behavior: url(#default#time2);} </STYLE> <?IMPORT namespace="t" implementation="#default#time2"> </HEAD> <BODY> <t:PAR id="p1" begin="0" dur="10" fill="hold"> <t:ANIMATECOLOR id="a1" targetElement="outerDIV" attributeName="background-color" values="#0000FF;cyan" begin="0" dur="5" fill="hold"/> <t:ANIMATECOLOR id="a2" targetElement="innerDIV" attributeName="background-color" values="cyan;#0000FF" begin="0" dur="5" fill="hold"/> </t:PAR> <DIV id="outerDIV" class="time" style="FONT-SIZE: 18pt; LEFT: 68px; WIDTH: 279px; POSITION: absolute; TOP: 260px; HEIGHT: 217px; BACKGROUND-COLOR: #0000FF; TEXT-ALIGN: left; padding-left:3; border:1px solid black">outerDIV</DIV> <DIV id="innerDIV" class="time" style="FONT-SIZE: 18pt; LEFT: 112px; WIDTH: 188px; POSITION: absolute; TOP: 318px; HEIGHT: 98px; BACKGROUND-COLOR: cyan; TEXT-ALIGN: left;padding-left:3">innerDIV</DIV> </BODY> </HTML>This feature requires Microsoft?Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.
Applies To
t:ANIMATECOLOR
See Also
Introduction to HTML+TIME, Color Table