Start a new topic

Make gif animate

I am using the solar system demo and I want to add a animated gif that will animate whenever the app is opened. I've been researching and found some code to make it animated but it isnt working. Can someone take a look at my code and tell me where I am going wrong? 

var Solar = {
    planetsInfo: null,

    init: function() {
        var distanceFactor = 580.2;

        /* null means: use relative to user, sun is NORTH to the user */
        var locationSun = new AR.RelativeLocation(null, 25000, 0, 5000);

        /* sizes & distances are far away from real values! used these scalings to be able to show within user range */
        var sizeFactor = 0.5;
        var sizeEarth = 12.8 * 25;

        /* every object in space has a name, location and a circle (drawable) */
        var sunImg = new AR.ImageResource("assets/Shark_01.0001.png");
        var mercuryImg = new AR.ImageResource("assets/Shark_01.0040.png");
        var venusImg = new AR.ImageResource("assets/Shark_01.0040.png");
        var earthImg = new AR.ImageResource("assets/Shark_01.0060.png");
        var marsImg = new AR.ImageResource("assets/Shark_01.0060.png");
        var jupiterImg = new AR.ImageResource("assets/Shark_01.0040.png");
        var saturnImg = new AR.ImageResource("assets/Shark_01.0060.png");
        var uranusImg = new AR.ImageResource("assets/Shark_01.0060.png");
        var neptuneImg = new AR.ImageResource("assets/Shark_01.0040.png");
        var plutoImg = new AR.ImageResource("assets/Shark_01.0060.png");
        var indicatorImg = new AR.ImageResource("assets/indi.png");

        var imageResource = new AR.ImageResource("assets/fishgif.gif");
        var animatedImageDrawable = new AR.AnimatedImageDrawable(imageResource, 5, 40, 50 {
          enabled : false,
          translate : { x: 1 },
          rotate : { z: 190 }
        });
        // start playing the Animation, with keyframes 0-4, each keyframe is shown 10 miliseconds, and the animation is looped 10 times
        animatedImageDrawable.animate([0, 1, 2, 3, 4], 10, 10);

        var sunSize = (((109 * sizeEarth) / sizeEarth) * 0.3) * sizeFactor;
        var mercurySize = (4.9 * sizeEarth / sizeEarth) * sizeFactor;
        var venusSize = (12.0 * sizeEarth / sizeEarth) * sizeFactor;
        var earthSize = (10 * sizeEarth / sizeEarth) * sizeFactor;
        var marsSize = (6.8 * sizeEarth / sizeEarth) * sizeFactor;
        var jupiterSize = (14.4 * sizeEarth / sizeEarth) * sizeFactor;
        var saturnSize = (12.0 * sizeEarth / sizeEarth) * sizeFactor;
        var uranusSize = (5.20 * sizeEarth / sizeEarth) * sizeFactor;
        var neptunSize = (5.0 * sizeEarth / sizeEarth) * sizeFactor;
        var plutoSize = (0.23 * sizeEarth / sizeEarth) * sizeFactor;

        var sun = {
            name: "Megalodon",
            distance: 0,
            location: locationSun,
            imgDrawable: new AR.ImageDrawable(imageResource, sunSize),
            size: sunSize,
            description: "",
            mass: "Up To 60 Feet",
            diameter: "1800;kg"
        };

        var mercury = {
            name: "",
            distance: 5.6 * distanceFactor,
            location: new AR.RelativeLocation(locationSun, 0, -5.6 * distanceFactor, 0),
            imgDrawable: new AR.ImageDrawable(mercuryImg, mercurySize),
            size: mercurySize,

        };

        var venus = {
            name: "",
            distance: 11.2 * distanceFactor,
            location: new AR.RelativeLocation(locationSun, 0, -11.2 * distanceFactor, 0),
            imgDrawable: new AR.ImageDrawable(venusImg, venusSize),
            size: venusSize,

        };

        var earth = {
            name: "",
            distance: 15 * distanceFactor,
            location: new AR.RelativeLocation(locationSun, 0, -15 * distanceFactor, 0),
            imgDrawable: new AR.ImageDrawable(earthImg, earthSize),
            size: earthSize,

        };

        var mars = {
            name: "",
            distance: 25 * distanceFactor,
            location: new AR.RelativeLocation(locationSun, 0, -25 * distanceFactor, 0),
            imgDrawable: new AR.ImageDrawable(marsImg, marsSize),
            size: marsSize,

        };

        var jupiter = {
            name: "",
            distance: 50.2 * distanceFactor * 0.35,
            location: new AR.RelativeLocation(locationSun, 0, -50.2 * distanceFactor * 0.35, 0),
            imgDrawable: new AR.ImageDrawable(jupiterImg, jupiterSize),
            size: jupiterSize,

        };

        var saturn = {
            name: "",
            distance: 70.3 * distanceFactor * 0.2,
            location: new AR.RelativeLocation(locationSun, 0, -70.3 * distanceFactor * 0.2, 0),
            imgDrawable: new AR.ImageDrawable(saturnImg, saturnSize),
            size: saturnSize,

        };

        var uranus = {
            name: "",
            distance: 100 * distanceFactor * 0.1,
            location: new AR.RelativeLocation(locationSun, 0, -100 * distanceFactor * 0.1, 0),
            imgDrawable: new AR.ImageDrawable(uranusImg, uranusSize),
            size: uranusSize,

        };

        var neptun = {
            name: "",
            distance: 120 * distanceFactor * 0.07,
            location: new AR.RelativeLocation(locationSun, 0, -301 * distanceFactor * 0.07, 0),
            imgDrawable: new AR.ImageDrawable(neptuneImg, neptunSize),
            size: neptunSize,

        };

        var pluto = {
            name: "",
            distance: 420 * distanceFactor * 0.063,
            location: new AR.RelativeLocation(locationSun, 0, -394 * distanceFactor * 0.063, 0),
            imgDrawable: new AR.ImageDrawable(plutoImg, plutoSize),
            size: plutoSize,

        };


        /* put sun, planets (and pluto) in an array */
        this.planetsInfo = [sun, mercury, venus, earth, mars, jupiter, saturn, uranus, neptun, pluto];

        /* create helper array to create goeObjects out of given information */
        var planetsGeoObjects = [];
        for (var i = 0; i < this.planetsInfo.length; i++) {

            /* show name of object below*/
            var label = new AR.Label(this.planetsInfo[i].name, 3, {
                offsetY: -this.planetsInfo[i].size / 2,
                verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
                opacity: 0.9,
                zOrder: 1,
                style: {
                    textColor: '#FFFFFF',
                    backgroundColor: '#00000005'
                }
            });

            /* drawable in cam of object -> image and label */
            var drawables = [];
            drawables[0] = this.planetsInfo[i].imgDrawable;
            drawables[1] = label;

            /* Create objects in AR*/
            planetsGeoObjects[i] = new AR.GeoObject(this.planetsInfo[i].location, {
                drawables: {
                    cam: drawables
                },
                onClick: this.planetClicked(this.planetsInfo[i])
            });
            if (i > 0) {
                this.animate(this.planetsInfo[i]);
            } else {
                var sunHackAnim = new AR.PropertyAnimation(this.planetsInfo[i].location, 'northing', 10000, 10000, 1000, {
                    type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_SINE
                });
                sunHackAnim.start(-1);
            }
        }

        // Add indicator to sun
        var imageDrawable = new AR.ImageDrawable(indicatorImg, 0.1, {
            verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
        });
        planetsGeoObjects[0].drawables.addIndicatorDrawable(imageDrawable);
    },

    animate: function(planet) {
        var relLocation = planet.location;
        var distance = planet.distance;
        var roundingTime = distance * 2 * 2;

        var northSouthAnimation1 = new AR.PropertyAnimation(relLocation, 'northing', distance * 1, distance * 0, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_SINE
        });
        var eastWestAnimation1 = new AR.PropertyAnimation(relLocation, 'easting', distance * 0, distance * 1, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_SINE
        });

        var northSouthAnimation2 = new AR.PropertyAnimation(relLocation, 'northing', distance * 0, distance * -1, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_SINE
        });
        var eastWestAnimation2 = new AR.PropertyAnimation(relLocation, 'easting', distance * 1, distance * 0, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_SINE
        });

        var northSouthAnimation3 = new AR.PropertyAnimation(relLocation, 'northing', distance * -1, distance * 0, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_SINE
        });
        var eastWestAnimation3 = new AR.PropertyAnimation(relLocation, 'easting', distance * 0, distance * -1, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_SINE
        });

        var northSouthAnimation4 = new AR.PropertyAnimation(relLocation, 'northing', distance * 0, distance * 1, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_SINE
        });
        var eastWestAnimation4 = new AR.PropertyAnimation(relLocation, 'easting', distance * -1, distance * 0, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_SINE
        });

        var q1 = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, [northSouthAnimation1, eastWestAnimation1]);
        var q2 = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, [northSouthAnimation2, eastWestAnimation2]);
        var q3 = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, [northSouthAnimation3, eastWestAnimation3]);
        var q4 = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, [northSouthAnimation4, eastWestAnimation4]);

        var cicularAnimationGroup = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.SEQUENTIAL, [q4, q1, q2, q3]);

        cicularAnimationGroup.start(-1);
    },

    planetClicked: function(planet) {
        return function() {
            document.getElementById("info").setAttribute("class", "info");
            document.getElementById("name").innerHTML = planet.name;
            document.getElementById("mass").innerHTML = planet.mass;
            document.getElementById("diameter").innerHTML = planet.diameter;
            document.getElementById("info").setAttribute("class", "infoVisible");
        };
    }
};

Solar.init();

 

1 Comment

Hi,


We don't support animated gifs as such - only if you embed these in an HTMLDrawable. But we advise against using HTMLDrawables, as these can be rendered differently depending on the device model and webview used and the behaviour might be different.


Please have another look at the Property animations or also use Sprite sheets (we do have another sample for Sprite in the sample app).


Thx and greetings

Nicola



Login or Signup to post a comment