Javascript quark #2: fading out

Alessio — Tue, 18 Dec 2018 11:28:25 GMT

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

topic Javascript quark #2: fading out in Vuforia Studio

Javascript quark #2: fading out