Wikitude

Animation example help

Thanks very much Wolfgang.

worked fine. I'm just starting out so i should have a lot more questions in the future...

It seems that you are not calling the hide and show functions defined at the beginning of createTransition. Instead you are just enbaling/disabling the drawables in nextDrawable function. Therefore no animation is started when switching drawables.

 

// hide the current drawable

myDrawables.enabled = false;

 

should be

 

// hide the current drawable

myDrawables.hide();

 

and remove the last line which enables the new drawable. Enabling will be done at the end of the animation (onFinish trigger).

 

Hey there,

 

Can someone tell me why this example doesn't work please. The nextDrawable function works fine but the animations won't work. 

 

I'm using phonegap and the wikitude plugin to create an android app. 

 

Thanks

 

 

function createTransitions(from, to) { 

 

   from.hide = function() { 

 

       from.triggers.onClick = null; 

       

       from.hideAnimation.start(); 

   }; 

   to.show = function() { 

        

       from.enabled = false; 

        

       to.enabled = true; 

        

       to.showAnimation.start(); 

   };

 

 

from.hideAnimation = new AR.PropertyAnimation(from, 'scaling', 1.0, 0.0, 500,{type: 'easeInQuad'},{onFinish: to.show});

 

 

to.showAnimation = new AR.PropertyAnimation(to, 'scaling', 0.0, 1.0, 500,

             {type: 'easeOutQuad'},

            {onFinish: function (){ to.triggers.onClick = nextDrawable }});

 

};

 

 

function createLabelAtLocation(geoLocation){

 

myDrawables = new Array();

var c = new  AR.Circle(5, {enabled: true, style: {fillColor: '#FFC100'}, triggers: {onClick: nextDrawable}});

var l = new AR.Label("Hello", 3, {enabled: false, style : {fillColor : '#FFC100', backgroundColor : '#6d6d6d'}, triggers:{onClick: nextDrawable}});

var i = new AR.Circle(1, {enabled: false, style : {fillColor : '#FFC100'}, triggers: {onClick: nextDrawable}});

 

 

 

             

myDrawables.push(c);

myDrawables.push(l);

myDrawables.push(i);

             

// Create transitions between the drawable objects

createTransitions(c,l);

createTransitions(l,i);

createTransitions(i,c);

 

current = 0;

var geoObject = new AR.GeoObject(geoLocation, {drawables: {cam: myDrawables}});

 

};

//Called if one of the drawables was clicked 

 

 

 

function nextDrawable() {

// hide the current drawable

myDrawables.enabled = false;

 

// update current index 

current++;

if (current == 3) 

 

current = 0;

   // show the new current drawable

  myDrawables.enabled = true; 

 

}; 

 

function setupScene()

{

   createLabelAtLocation( new AR.RelativeLocation(null, -100, 20, 0) );

}