VALUES Attribute | values Property

Sets or retrieves a list of RGB color values for a t:ANIMATECOLOR element.

Syntax

HTML <t:ANIMATECOLOR VALUES = vValues... >
Scripting [ vValues = ] t:ANIMATECOLOR.values [ = val ]

Possible Values

vValues Variant that specifies or receives a list of RGB color values. The values are semicolon-delimited, and 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 the values, for example, #8A2BE2 or blueviolet. For more information about supported color values, see the Color Table.

The values property overrides any specified to value, from value, or by value 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. For example, a paced interpolation provides an even color change, while a splined interpolation might provide accelerated or decelerated transitions.

When writing script to dynamically change the properties of an active animation, results might be unpredictable or undefined. Restart the animation with beginElement after you have made the change. The following example shows how to use beginElement.

<SCRIPT>
object.endElement();
object.values='cyan;#0000FF';
object.beginElement();
</SCRIPT>

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

  • The values property, if specified, overrides any setting for the from property, the to property, or the by property.
  • The from property is used, unless the values property or the path property is 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 outerDIV element initially changes colors from blue (#0000FF) to cyan (#00FFFF) over a five-second duration; the innerDIV 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 innerDIV animation will be played in reverse by the outerDIV 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>

Applies To

t:ANIMATECOLOR

See Also

Introduction to HTML+TIME, Color Table