The GradientStop object.
-
GradientStop([color[, offset]])
Creates a GradientStop object.
- Parameters:
color:
Color
— the color of the stop — optional, default:new Color(0, 0, 0)
offset:
Number
— the position of the stop on the gradient ramp as a value between0
and1
;null
orundefined
for automatic assignment. — optional, default:null
- Returns:
GradientStop
-
offset
The ramp-point of the gradient stop as a value between
0
and1
.- Type:
Number
Example:Animating a gradient's ramp points:
// Create a circle shaped path at the center of the view, // using 40% of the height of the view as its radius // and fill it with a radial gradient color: var path = new Path.Circle({ center: view.center, radius: view.bounds.height * 0.4 }); path.fillColor = { gradient: { stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]], radial: true }, origin: path.position, destination: path.bounds.rightCenter }; var gradient = path.fillColor.gradient; // This function is called each frame of the animation: function onFrame(event) { var blackStop = gradient.stops[2]; // Animate the offset between 0.7 and 0.9: blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8; // Animate the offset between 0.2 and 0.4 var redStop = gradient.stops[1]; redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3; }
-
color
The color of the gradient stop.
- Type:
Color
Example:Animating a gradient's ramp points:
// Create a circle shaped path at the center of the view, // using 40% of the height of the view as its radius // and fill it with a radial gradient color: var path = new Path.Circle({ center: view.center, radius: view.bounds.height * 0.4 }); path.fillColor = { gradient: { stops: [['yellow', 0.05], ['red', 0.2], ['black', 1]], radial: true }, origin: path.position, destination: path.bounds.rightCenter }; var redStop = path.fillColor.gradient.stops[1]; var blackStop = path.fillColor.gradient.stops[2]; // This function is called each frame of the animation: function onFrame(event) { // Animate the offset between 0.7 and 0.9: blackStop.offset = Math.sin(event.time * 5) * 0.1 + 0.8; // Animate the offset between 0.2 and 0.4 redStop.offset = Math.sin(event.time * 3) * 0.1 + 0.3; }
clone()
- Returns:
GradientStop
— a copy of the gradient-stop