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

Community Tip - Need help navigating or using the PTC Community? Contact the community team. X

Increasing the opacity of model using JS

vivekse
13-Aquamarine

Increasing the opacity of model using JS

Initially i have set the opacity of model to be 0 and want it to gradually increase from 0 to 0.8 when a button is pressed using javascript. I tried do-while loop but it didn't work for me.

Any help would be appreciated.

1 REPLY 1

Hi @vivekse ,

I think this is working fine in generally.

I do not know  what is your code but , one possible reason is if you have set a sequence , which could override the modelItem setting also the opacity property. Therefore you can un set the sequence property  of the modelwidget e.g :

 

 

$rootScope.$on('modelLoaded', function() 
 {
//================= unset the sequence property of the model widget
  $scope.setWidgetProp('model-1', 'sequence', "");              
               })

 

 

Here an example where I tested it and it worked fine:

2020-03-30_1-41-34.jpg

In the sample project here I have 2 functions: FadeOut and FadeIn . The FadeOut function will "FadeOut" the opacity of particular widget for a  time / time inerval / from current value  to 0 and the function FadeIn will increase the opacity In a time inerval from 0 to a specific value:

 

 

$scope.fadeOut = function(widget, time, interval) {
  let w = (widget.opacity !== undefined ? widget : $scope.view.wdg[widget]); //wiget name or widget it self
  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);
}

$scope.fadeIn = function(widget, targetOpacity,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 = targetOpacity / steps;
  return $interval(() => w.opacity = (targetOpacity > w.opacity) ? (w.opacity + opDelta) : targetOpacity, interval, steps);
}

//=============== Button function
$scope.testFadeOut= function()
{
  
$timeout( ()=>{$scope.fadeOut($scope.view.wdg['modelItem-1'],2000,200) } ,500)
$timeout( ()=>{$scope.fadeOut($scope.view.wdg['modelItem-2'],4000,200) } ,1500) 
$timeout( ()=>{$scope.fadeOut($scope.view.wdg['modelItem-3'],6000,200) } ,2500)
$timeout( ()=>{$scope.fadeOut($scope.view.wdg['model-1']    ,5000,200) } ,3500)
}
//====== second button function
$scope.testFadeIn= function()
{
  $timeout( ()=>{$scope.fadeIn($scope.view.wdg['modelItem-1'],0.8,2000,200) } ,500)
  $timeout( ()=>{$scope.fadeIn($scope.view.wdg['modelItem-2'],0.9,4000,200) } ,1500)
  $timeout( ()=>{$scope.fadeIn($scope.view.wdg['modelItem-3'],1.0,6000,200) } ,2500)
  $timeout( ()=>{$scope.fadeIn($scope.view.wdg['model-1']     ,1.0,5000,200) } ,3500)
}

 

The sample mobile Studio  project was uploaded

Top Tags