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 :