JSignage:AnimateOpacity

This page is related to jSignage animation events.

.animateOpacity()

.animateOpacity( attributesObject );
.animateOpacity( target, attributesObject );

Returns: jSignage Object

Description

Animates the opacity of one of the colors of a linear gradient, a radial gradient, a shape, or a layer.

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 opacity values between 0 and 1.

• target (optional)

  Type: Number or String.

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

Examples

Flashing rectangle

// create a rectangle and animate the opacity of the interior
$.rect({ 
    x: 0, y: 0, width: 1280, height: 720
}).animateOpacity( 'fill', { 
    dur: 10, from: 0, to: 1, repeatCount: 'indefinite' 
}).addTo('svg');

Flashing text

// create a solid color element and add it to the document
var myTextColor = $.solidColor({ color: 'white' }).addTo('svg');

// animate the opacity from o to 1
myTextColor.animateOpacity({
    begin: 1, dur: 1, repeatCount: 'indefinite', values: [ 0, 1, 0 ]   
});
 
// create a text area whose text appears and disappears repeatedly
$.textArea({
    width: '90%', height: '15%', top: '75%', left: '5%', fontSize: '50px', fill: myTextColor.ref(), frame: { backColor: 'blue' }
}).text("Flashing text !").addTo('svg');