Animations - not animating!

edited May 2015 in UC Berkeley CS160

So I'm trying to create an animation, in which the app cycles through three images repeatedly until the container is closed. Based on the examples, Ive come up with the attached code. However, when I run this, only the first image is shown and then turns blank. The print statements print in the right order, but I also get a warning in the console about some NSApplication Assertion Error. Any guidance? Note: I made the FRAME variable because using (gifContent.url == "[image url]") as the if condition was not passing.

var GifBehavior = function(gif){
    this.gif = gif;
}

GifBehavior.prototype = Object.create(Object.prototype, {
    onDisplaying: {
        value: function(gifCont) {
            gifCont.start();
            trace("begin");
        }
    },
    onTimeChanged: {
        value: function(gifCont) {
            if (FRAME == 1) {
                trace(FRAME);
                FRAME = 2;
                gifContent.url = "nfc-2.gif";
            }
            if (FRAME == 2) {
                trace(FRAME);
                FRAME = 3;
                gifContent.url = "nfc-3.gif";
            }
            if (FRAME == 3) {
                trace(FRAME);
                FRAME = 1;
                gifContent.url = "nfc-1.gif"
            }
            //gifContent.url = "nfc-3.gif";
        }
    }
})

var FRAME = 1;
var gifContent = new Picture({name: "gif", left:0, right:0, url: "nfc-1.gif"});

var gifCont = new containerTemplate({top: 0, bottom: 50, left:0, right:0, skin:whiteAllBorderSkin,
    contents: [
        gifContent
            ],
    behavior: new GifBehavior(gifContent)
});

Answers

  • I don't think you can change the URL of a picture dynamically like that. You're probably best off making 3 separate Picture objects (gifContent1, 2, 3) and then adding/removing them or making them visible/invisible in your onTimeChanged. Alternately you could set this up with skins and textures (probably easier if this is all local images from the filesystem) and then use the states/variants mechanism that is built into KinomaJS for this sort of thing.

  • I tried originally to dynamically change both the skin and the texture, and found myself unable to actually change the image. I'm not sure if it's because the image is already in the container and doesn't reload when onTimeChanged occurs.

Sign In or Register to comment.