Start a new topic

Animation using PropertyAnimation

Animation using PropertyAnimation


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,


Hi Tarun,

can you be bit more specific what you want to achieve and which problem you are currently facing?

 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

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

Best Regards,






Hello Tarun,

yes, as already mentioned in the article of the link you posted, PropertyAnimations can be used for this purpose. In case you use geolocations for positioning your AnimatedImageDrawable, you can define the animation on the location properties as described in the example.

Hope that helps,

Do you want to display your AnimatedImageDrawable on a target (image recognition) or do you want to display it on a certain location? In your code you are adding it to both, the GeoObject and the Trackable2DObject. If you want to animate the Drawable on the target image you have to use its offsetX property for example for a property animation. In the image recognition case it doesn't make sense to animate the GeoLocation.

If you want to position your Drawable at a certain location, you can use the GeoLocation for an absolute position at a certain latitude/longitude and animate it as in your code, or you use RelativeLocation to position the object relative to the user who watches the object. In this case you also use the location properties for the property animation.

I assume you don't see the object because the latitude/longitude values point to our former headquarters in Salzburg. If your position is nearby you would probably see the object.

Hope that helps,

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() {



createOverlays: function createOverlaysFn() {


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

       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: {



       distanceToTarget: {

         changedThreshold: 1











 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", );





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');


               }, 10000);






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,


In your function createAppearingAnimation, you should hand over the birdDrawable as parameter instead of the geoLocation. In your PropertyAnimation you have to use the "offsetX" for example instead of "easting". You do not need the GeoLocation at all.

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,


Thanx Christain for your help it working!!




Create an AnimationGroup with a parallel animation. Then create a PropertyAnimation on the offsetX (the one you mentioned above) and create a second PropertyAnimation on the offsetY. Then add those PropertyAnimations to the AnimationGroup. For starting the animiation use the start-function of the AnimationGroup.

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", );


Have a look at our solar system-example. Use the easing curve types EASE_IN_SINE and EASE_OUT_SINE in a parallel animation group for the offset animation.
Login or Signup to post a comment