Smart Unicorndog Tricks

by Art Dahm

CSS

.doggy {
    margin-left: 50px;
    margin-top: 50px;
}

.doggy > img {
    width: 400px;
}

JavaScript

enyo.kind({
    name: "Unicorndog",
    classes: "doggy",
    components: [
            {name: "animator", kind: enyo.Animator, duration: 500, onStep: "moveDog"},
      {name: "dog", kind: "enyo.Image", src: "http://dragongears.com/unicorndog.jpg"}
    ],
    
        jump: function() {
            this.playJumpUp();
        },

        playJumpUp: function() {
            this.$.animator.play({startValue: 50, endValue: 0, onEnd: "jumpDown", easingFunction: enyo.easing.cubicOut});
        },

        jumpDown: function() {
            enyo.job("jd", enyo.bind(this, "playJumpDown"), 50);
        },

        playJumpDown: function() {
            this.$.animator.play({startValue: 0, endValue: 50, onEnd: "", easingFunction: enyo.easing.cubicIn});
        },

        moveDog: function(inSender, inValue) {
            this.setStyle("margin-top:" + inSender.value + "px;");
        }
});

enyo.kind({
    name: "App",
    components: [
        {kind: "onyx.Button", content: "Jump!", ontap: "jumpCommand"},
        {name: "Pokey", kind: "Unicorndog"}
    ],
    
        jumpCommand: function() {
            this.$.Pokey.jump();
        }
});

new App().renderInto(document.body);