JSignage:AnimateColor

This page is related to jSignage animation events.

.animateColor()

.animateColor( attributesObject );
.animateColor( target, attributesObject );

Returns: jSignage Object

Description

Animates the color of a linear gradient, a radial gradient or a shape.

Parameters

• attributesObject

  Type: Plain Object.

  An object containing any of the following attributes:

  • begin, dur, fill, repeatCount, repeatDur

    Attributes to control the timing of the animation.

  • accumulate, additive, by, calcMode, from, keySplines, keyTimes, to, values

    Attributes to define animation values over time. Note that the values, from, to and by attributes take color values and are interpolated in the RGB space.

• target (optional)

  Type: Number or String.

  Specifies the index of the gradient stop whose color is to be animated, or the name of the color attribute to be animated for a geometric shape (e.g., 'fill', 'stroke').

Examples

Rectangle with animated fill color

// after 5s, start to indefinitely animate the color of a rectangle from blue to red during 10s
$.rect({ 
    x: 0, y: 0, width: 1280, height: 720, fill: 'blue' 
}).animateColor( 'fill', {
    begin:5, dur: 10, from: 'blue', to: 'red', repeatCount: 'indefinite'
}).addTo('svg');

Text layer with flashing background

// create a solid color background and add it to the document
var backgroundColor = $.solidColor('grey').addTo('svg');

// animate the color to white and back to grey during 0.2s
backgroundColor.animateColor({
    begin: 1, dur: 1, repeatCount: 'indefinite',
    keyTimes: [ 0, 0.8, 0.9, 1 ],
    values: [ 'grey', 'grey', 'white', 'grey' ]      
});

// add the flashing background to a text area
$.textArea({
    width: '90%', height: '15%', top: '75%', left: '5%', fontSize: '30px',
    frame: { backColor: backgroundColor.ref() }
}).text("Text with flashing background !").addTo('svg');