play-co / devkit

HTML 5 game platform for browser and mobile
http://docs.gameclosure.com
627 stars 126 forks source link

Animate is not working for a box layout view with bottom property set #190

Closed jishnu7 closed 9 years ago

jishnu7 commented 10 years ago

Here is a sample code to reproduce the issue.

import ui.View as View;
import animate as animate;

exports = Class(GC.Application, function () {

  this.initUI = function () {
    var box = new View({
      superview: this.view,
      layout: "box",
      bottom: 0,
      backgroundColor: "red",
      width: 100,
      height: 100
    });

    // BUG!
    animate(box).now({
        height: 50
      }, 1000).
      then({
        height: 150
      }, 1000);

    // working
    animate(box).now(function (i) {
        box.updateOpts({height: i*100});
      }, 1000);
  };
});
collingreen commented 9 years ago

I refactored this a bit to make it a bit easier to see what is going on, and both animations appear to be working. What is the issue?

import ui.View as View;
import ui.TextView as TextView;
import animate as animate;

exports = Class(GC.Application, function () {

  this.initUI = function () {

    this.box = new View({
      superview: this.view,
      layout: "box",
      bottom: 0,
      backgroundColor: "red",
      width: 100,
      height: 100
    });

    this.buttonWorking = new TextView({
      superview: this.view,
      text: 'Working Animate',
      color: "white",
      width: (this.view.style.width - 100) / 2,
      height: 100,
      x: 25,
      y: 50
    });
    this.buttonWorking.on("InputSelect", bind(this, this.animateWorking));

    this.buttonBroken = new TextView({
      superview: this.view,
      text: 'Broken Animate',
      color: "white",
      width: (this.view.style.width - 100) / 2,
      height: 100,
      x: (this.view.style.width / 2) + 25,
      y: 50
    });
    this.buttonBroken.on('InputSelect', bind(this, this.animateBroken));

  };

  this.animateBroken = function () {
    // BUG!
    animate(this.box).now({
        height: 50
      }, 1000).
      then({
        height: 150
      }, 1000);
  };

  this.animateWorking = function () {
    // working
    animate(this.box).now(bind(this, function (i) {
        this.box.updateOpts({height: i*100});
      }), 1000);
  };

});
jishnu7 commented 9 years ago

Broken Animate button is not working for me. I'll check in detail and comment.

jishnu7 commented 9 years ago

This is working fine on latest version.