How to scale in and scale out 3D images on triggering visible function

Hi @Ace_Rothstein_310668 ,

I review the video link what you mentioned in your post. Unfortunately I do not know exactly how it was exactly implemented  here  , but I think this effect could be done by moving the 3dImage widget e.g. in Z direction and scaling the 3dImage at the same. time.

I did test it in a simple project, and I think it works.

So have only 2 widgets 3DImage-1 Widget and toggle-1 Widget. So, I used the click event of the toggle to FlyIn and FlyOut effect. It is not perfect but works.

I used the following code:

//===============================
////
var zMax=2
var zMin=0
var dist = zMax - zMin

var moveTime=2000 //ms
var moveTimeStep=10 //ms
var distInt= dist/(moveTime/moveTimeStep)
var scaleFactor =0.92
var scaleMax=0.3
var scaleMin = scaleMax *( Math.pow(scaleFactor,(moveTime/moveTimeStep)))

//===============================
$scope.app.FlyIn = function(){
console.log("called app.FlayIn()")
$scope.setWidgetProp('3DImage-1', 'z',-zMax)
$scope.setWidgetProp('3DImage-1', 'scale',scaleMin)
$scope.setWidgetProp('3DImage-1', 'visible',true)
$scope.setWidgetProp('toggle-1', 'disabled',true)
var tt = setInterval(function(){ $scope.startFlayIn() }, moveTimeStep);
setTimeout(function() { clearInterval(tt); 
 $scope.setWidgetProp('3DImage-1', 'visible',true)
 $scope.setWidgetProp('3DImage-1', 'scale',scaleMax)
 $scope.setWidgetProp('toggle-1', 'disabled',false)
 }, moveTime);
 
}
//===============================
$scope.app.FlyOut = function(){
console.log("called app.FlayOut()")
$scope.setWidgetProp('3DImage-1', 'z', zMin)
$scope.setWidgetProp('3DImage-1', 'scale', scaleMax)
$scope.setWidgetProp('3DImage-1', 'visible',true)
$scope.setWidgetProp('toggle-1', 'disabled',true)
var tt = setInterval(function(){ $scope.startFlayOut() },moveTimeStep);
setTimeout(function() { clearInterval(tt); 
 $scope.setWidgetProp('3DImage-1', 'visible',false)
 $scope.setWidgetProp('toggle-1', 'disabled',false)
 }, moveTime);
}
//===============================
$scope.app.ClickAction = function(){
if($scope.view.wdg['toggle-1']['value']==false) $scope.app.FlyIn();
 else
 $scope.app.FlyOut();
}

/////////////////////////
 $scope.startFlayOut = function(){

 var newVal= parseFloat($scope.view.wdg['3DImage-1']['z']) -distInt
 $scope.setWidgetProp('3DImage-1', 'z', parseFloat(newVal))
 
 var newScale= parseFloat($scope.view.wdg['3DImage-1']['scale'])*scaleFactor
 $scope.setWidgetProp('3DImage-1', 'scale', parseFloat(newScale))
 $scope.$applyAsync()

}
//=============================
/////////////////////////
 $scope.startFlayIn = function(){
 var newVal= parseFloat($scope.view.wdg['3DImage-1']['z']) +distInt
 $scope.setWidgetProp('3DImage-1', 'z', parseFloat(newVal)) 
 var newScale= parseFloat($scope.view.wdg['3DImage-1']['scale'])/scaleFactor
 $scope.setWidgetProp('3DImage-1', 'scale', parseFloat(newScale))
 $scope.$applyAsync()
}

I attached also the test project