Skip to main content
15-Moonstone
December 18, 2018
Question

Javascript quark #2: fading out

  • December 18, 2018
  • 0 replies
  • 1929 views

This is the second Javascript quark in the series: it can be used to fade a widget out. You can find the first quark here.

 

Here's the code to copy & paste to your Home.js:

 

$scope.fadeOut = function(widget, time, interval) {
 let w = (widget.opacity !== undefined ? widget : $scope.view.wdg[widget]);
 if (time <= 0 || interval <= 0 || w.opacity === undefined) { throw "Cannot fade this widget"; }
 let steps = Math.floor(time / interval);
 let opDelta = w.opacity / steps;
 return $interval(() => w.opacity = (opDelta < w.opacity) ? (w.opacity - opDelta) : 0, interval, steps);
}

This quark will make the widget fade out from its current opacity to 0 in time milliseconds, uniformly decrementing opacity at every interval .

 

Invoke the function like this:

 

fadeOut(widget, time, interval);

 

where widget is either the id of the widget (e.g. modelItem-1) or the widget itself (e.g. $scope.view.wdg['modelItem-1']), time represent the total time it takes to fade the widget out from its current opacity, and interval represents the amount of time between each opacity change.

 

Here's an example:

 

fadeOut('modelItem-1', 2000, 50);

This example fades the model item out by bringing its current opacity to zero after 2 seconds with an opacity change every 50 ms.

 

Comments and suggestions are welcome.

 

-Alessio