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

Fade Transition Between Colors

SOLVED
agoksu-2
Granite

Fade Transition Between Colors

Hello,

I want to change colors respectively by using one button on a modelItem. I created below codes, it works but I want to add a fade transition effect for achieve a smooth change. I know JS only elemantary level and I don't know how to add this effect. Could you help please.

 

 

$scope.counter = 0;
$scope.countUp = function(){
switch($scope.counter) {
case 0:
console.log('its 0');
$scope.counter = $scope.counter+1;
$scope.setWidgetProp("modelItem","color",'rgba(10,255,200,1)');
//Desired event execution
break;
case 1:
console.log('its 1');
$scope.counter = $scope.counter+1;
$scope.setWidgetProp("modelItem","color",'rgba(200,20,20,1)');
//Desired event execution
break;
case 2:
console.log('its 2');
$scope.counter = $scope.counter+1;
$scope.setWidgetProp("modelItem","color",'rgba(255,150,20,1)');
//Desired event execution
break;
case 3:
console.log('its 3');
$scope.counter = 0;
$scope.setWidgetProp("modelItem","color",'rgba(10,20,200,1)');
//Desired event execution
break;
default:
break;
}
}

 

 

 
1 ACCEPTED SOLUTION

Accepted Solutions

Re: Fade Transition Between Colors

Hi @agoksu-2 ,

to have a color transition inside a range you could use javascript interval for call with delay. Because Javascript otherwise will set the properties in the loop imediatly so that you will not see it as transition.

Here an sample code for one possible implementation which will make transition from a,b,c to a1,b1, and c1:

 

 

////////////
$scope.transition = function (modelItem,startA,endA,startB,endB,startC,endC,numberSteps,timeInterval){
//startA, startB and startC is the rgb values for the start color
//endA,endB and endC are the rgb values for the target color
//timeInterval is the time for a step
//numberSteps are the number of transitions steps
  console.log('transition')
   var i; 
   
var deltaA=Math.floor((endA-startA)/numberSteps)
var deltaB=Math.floor((endB-startB)/numberSteps)
var deltaC=Math.floor((endC-startC)/numberSteps)

   for (i = 0; i < numberSteps; i++){
      $scope.setColormItem(modelItem,startA+i*deltaA,startB+i*deltaB,startC+i*deltaC, timeInterval*i) 
     $scope.$applyAsync()
   } 
  $scope.setColormItem(modelItem,endA ,endB,endC, timeInterval*numberSteps  )
   $scope.$applyAsync()
}
 
/////////////
$scope.setColormItem= function(mIwdg,a,b,c,info)
{ 
$timeout(()=>{
  console.log( "rgba("+a+","+b+","+c+", 1)  info="+info)
  $scope.setWidgetProp(mIwdg, "color", "rgba("+a+","+b+","+c+", 1)")
             },info)
}

$scope.button1=function(){
 $scope.transition('modelItem-1',100,255,100,180,50,200,15,300)
}

$scope.button2=function(){
 $scope.transition('modelItem-1',255,100,180,100,200,50,15,300)
}

 

 

Here in this example calling hte button1 and button 2 will change the color :

2021-02-22_18-15-57.jpg

View solution in original post

3 REPLIES 3

Re: Fade Transition Between Colors

Hi @agoksu-2 ,

to have a color transition inside a range you could use javascript interval for call with delay. Because Javascript otherwise will set the properties in the loop imediatly so that you will not see it as transition.

Here an sample code for one possible implementation which will make transition from a,b,c to a1,b1, and c1:

 

 

////////////
$scope.transition = function (modelItem,startA,endA,startB,endB,startC,endC,numberSteps,timeInterval){
//startA, startB and startC is the rgb values for the start color
//endA,endB and endC are the rgb values for the target color
//timeInterval is the time for a step
//numberSteps are the number of transitions steps
  console.log('transition')
   var i; 
   
var deltaA=Math.floor((endA-startA)/numberSteps)
var deltaB=Math.floor((endB-startB)/numberSteps)
var deltaC=Math.floor((endC-startC)/numberSteps)

   for (i = 0; i < numberSteps; i++){
      $scope.setColormItem(modelItem,startA+i*deltaA,startB+i*deltaB,startC+i*deltaC, timeInterval*i) 
     $scope.$applyAsync()
   } 
  $scope.setColormItem(modelItem,endA ,endB,endC, timeInterval*numberSteps  )
   $scope.$applyAsync()
}
 
/////////////
$scope.setColormItem= function(mIwdg,a,b,c,info)
{ 
$timeout(()=>{
  console.log( "rgba("+a+","+b+","+c+", 1)  info="+info)
  $scope.setWidgetProp(mIwdg, "color", "rgba("+a+","+b+","+c+", 1)")
             },info)
}

$scope.button1=function(){
 $scope.transition('modelItem-1',100,255,100,180,50,200,15,300)
}

$scope.button2=function(){
 $scope.transition('modelItem-1',255,100,180,100,200,50,15,300)
}

 

 

Here in this example calling hte button1 and button 2 will change the color :

2021-02-22_18-15-57.jpg

View solution in original post

Re: Fade Transition Between Colors

I used a function call in a loop where calculated a delay for each call.

Another approach is to use a interval function

Here is an example for such implementation for (fade in - out,) so there is the transitioning for the opacity property, but the principle is the same:

https://community.ptc.com/t5/Vuforia-Studio/How-to-create-a-fade-in-and-fade-out-effect-for-a-3D-Ima...

and here is an example for some flashing effects:

https://community.ptc.com/t5/Vuforia-Studio/Flashing-effect-of-model-item/m-p/625274#M6613

Re: Fade Transition Between Colors

Thank you @RolandRaytchev , it works very well.

Announcements
Join an
AR Working Group!

Topics available:
AR/VR for Data Optimization AR/VR for Security and Control AR/VR for Inspection