Wikitude

Animation using PropertyAnimation

Hi,

I want to animate sprite image using PropertyAnimation sequentially or parallel .Is it Possible to animate it or move the image to different position.

 

Best Regards,

Tarun

 Hi Philippi,

 I have created the animation of sprite image using AnimatedImageDrawable method.It works perfect.Now I want to move that image to different position to the screen.

Example : I have created a animation for a bird using sprite image it fly on same position   of the screen.I want to animate the bird to fly from one position to another position of the screen.

Somewhat  I want to create like this

Refer the link

http://www.wikitude.com/developer/knowledge-base?p_p_id=4_WAR_knowledgebaseportlet_INSTANCE_5Fp0NoL0T5Uv&p_p_lifecycle=0&p_p_state=maximized&p_p_mode=view&p_p_col_id=column-1&p_p_col_pos=2&p_p_col_count=5&_4_WAR_knowledgebaseportlet_INSTANCE_5Fp0NoL0T5Uv_mvcPath=%2Fsection%2Fview_article.jsp&_4_WAR_knowledgebaseportlet_INSTANCE_5Fp0NoL0T5Uv_resourcePrimKey=35904

So is it Possible to use Property animation for sprite Image ?

Best Regards,

Tarun

 

 

 

 

Hi Christian,

Thanx for your reply,Following are the code snippet I am using for move to different position.But it does not work?I have added pass geolocation to Propertyanimation  method.

 

var World = {

init: function initFn() {

    this.createOverlays();

},

createOverlays: function createOverlaysFn() {

     

    this.tracker = new AR.ClientTracker("assets/tracker.wtc", {

       onLoaded: this.worldLoaded,

       physicalTargetImageHeights: {

           pageOne: 260

         }

        });

    var geoLocation = new AR.GeoLocation(47.77317, 13.069929,320.);

     var birdImg1 = new AR.ImageResource("assets/bird.png");

    var birdDrawable = new AR.AnimatedImageDrawable(birdImg1, 1.0, 64, 64, {

                                                    offsetX: 1,

                                                    offsetY: 0

                                                    });

    var arr_birdright = new Array(4,5,6 ,7,6,5,4);

    

    birdDrawable.animate(arr_birdright, 100, -1);

     this.appearingAnimation = this.createAppearingAnimation(geoLocation);

   var pageOne = new AR.Trackable2DObject(this.tracker, "*", {

      drawables: {

        cam:

      },

       distanceToTarget: {

         changedThreshold: 1

        },

       onEnterFieldOfVision:function(){

          World.appearingAnimation.start();

        }

         

     });

    

    

},

 

 createAppearingAnimation :function createAppearingAnimationFn(tempObj) {

     

    

   var bird1Left = new AR.PropertyAnimation(tempObj, "easting", 0, -10, 1000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_OUT_QUAD});

    

    

     var bird1Right = new AR.PropertyAnimation(tempObj, "easting",-10,0,1000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_OUT_QUAD });

    

    leftRightAnimation = new AR.AnimationGroup("sequential", );

    

   leftRightAnimation.start(-1);

     

},

worldLoaded: function worldLoadedFn() {

    

    

    var cssDivLeft = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";

    var cssDivRight = " style='display: table-cell;vertical-align: middle; text-align: left;'";

    document.getElementById('loadingMessage').innerHTML =

    "<div" + cssDivLeft + ">Scan Target &#35;1 (surfer), then move closer to the target</div>" +

    "<div" + cssDivRight + "><img src='assets/surfer.png'></img></div>";

    

    // Remove Scan target message after 10 sec.

    setTimeout(function() {

               var e = document.getElementById('loadingMessage');

               e.parentElement.removeChild(e);

               }, 10000);

  

        }

};

 

World.init();

Hi Chritian,

Yes I want to display the image on target(image recognition) .When the Image is recognised by target it will display on the screen,I want to move that image from one position to another position.So I think I want to use property animation.

Forget the Geoobject I have mention in the code it ByMistake I have used.

 

Best Regards,

Tarun

Hi Christain,

Just wanna know If I want to move object/animate  diagonally so what property should I Set?

 

Code :

 AR.PropertyAnimation(animateddrawableObject, "offsetX", start ,end, duration,{type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_OUT_QUAD });

 

 Best Regards,

Tarun

Thanx Christain for your help it working!!

 

Regards,

Tarun

Thank you Christian for your help!! 

 

I have used the  PropertyAnimation method to animated the object.It moves in diagonal, horizontally, or vertically.The problem is I want to animate  the object  in circular.So I try to put the type  as EASE_IN_CIRC  it is  not working.

Just wanna know is there any property ? or using "offsetX" and  "offserY" I can animate it in circular.

 

       Following are the code snippet 

        var animate1 = new AR.PropertyAnimation(object, "offsetX",-1.9,-1.6,1000, {type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_CIRC} );

         var animate2 = new AR.PropertyAnimation(object, "offsetY",1.7,2.0,1000, {type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_CIRC});

 

 

       curveAnimation = new AR.AnimationGroup("parallel", );

       curveAnimation.start(-1)