cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Javascript quark #2: fading out

Amethyst

Javascript quark #2: fading out

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

 

Tags (2)