Animation clears entire page until complete

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Animation clears entire page until complete

Kenneth Tilton-3
Been one of those two days. :)

I was on qx 3.0 and did my first animation. Source follows this, and after I recover I'll try setting it up in the playground.

Takes a few seconds before the captions start to change: http://tiltonsalgebra.com/#

Then I decided to get fancier than I have lately with qooxdoo layouts and styling and decided I needed to run from source -- been running from nothing but build for years.

Then I see qx is at 3.5 and upgrade. Animations continue to work.

Then I hit a problem: generate build is not copying stuff from source to build. Check my @assets and all the docs and google and nothing. 

Well, this project started back in qx 0.8 and has been thru some upgrades, meanwhile a virgin project created under 3.5 copys source-to-build exactly as documented, so I regenerate my project, work my code back into it, and am successfully reloading that landing page, except for one thing.

When the animation runs, this happens:

1. the whole page goes white
2. the quotations label animates in as it should
3. the page reappears

All console.log output looks correct. The right widget is found, the DOM looks like DOM.

I can have all the code for the timer in place and comment out only the call to animate and the page does not disappear.

I can change it to animate width (worked briefly then not again) and the page does not go white.

Animating backgroundColor works pretty well, but is unsatisfactory graphically.

Overall, the code generally works under 3.0 and 3.5 and for some parameters being animated. Only opacity (so far) blows away the whole page for the duration of the animation.

Any ideas? I'll do the sandbox shortly to see if I can recreate.

Thx, kt


 clDict[46] = new qx.ui.basic.Label();
 clDict[46].oid = 46;
 clDict[46].set({"rich":true,"textColor":"black"
  ,"enabled":true,"visibility":"visible","width":800
  ,"marginTop":12,"allowGrowY":false,\allowGrowX":false});
clDict[46].tmr = new qx.event.Timer(3000);
clDict[46].qidx = 0;
clDict[46].setFont(new qx.bom.Font(16,['Open Sans']));
clDict[46].setValue('<center>'+hotQuote[0][0]
+ ' -- <i>' + hotQuote[0][1] + '</i></center>');
clDict[46].tmr.addListener('interval'
     , function(e) {
          var w = clDict[46];
          console.log('boom interval ' + w + ' lisp idx='+ 46);
          var ce = w.getContentElement();
          console.log('boom ce '+ce);
          if (ce) {
            var d = ce.getDomElement();
            var qidx = w.qidx + 1;
            console.log('boom '+qidx+' '+d);
            if (qidx > hotQuote.length - 1) {
               qidx = 0;
            }
            qx.bom.element.Animation.animate(d, hqFadeIn);
            w.setValue('<center>\"'+hotQuote[qidx][0] + '\" -- <i>' + hotQuote[qidx][1] + '</i></center>');
            w.qidx = qidx;
          }
});
clDict[46].addListener('appear'
      , function(e) {
          var w = clDict[46];
          console.log('carou appear ' + w + w.tmr);
          w.tmr.start();
     });
clDict[46].addListener('disappear'
      , function(e) {
          var w = clDict[46];
          console.log('carou disappear ' + w + w.tmr);
          w.tmr.stop();
     });

--
Kenneth Tilton
Fort Lauderdale, FL
"In a class by itself." -Macworld



------------------------------------------------------------------------------
"Accelerate Dev Cycles with Automated Cross-Browser Testing - For FREE
Instantly run your Selenium tests across 300+ browser/OS combos.
Get unparalleled scalability from the best Selenium testing platform available
Simple to use. Nothing to install. Get started now for free."
http://p.sf.net/sfu/SauceLabs
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Animation clears entire page until complete

Kenneth Tilton-3
btw, this is desktop qooxdoo and at this point* only Chrome (not Safari or FireFox) manifests the problem and only when the window has been resized small enough to cramp things in precise ways I have not deduced.

* Thought I saw this in FireFox at one point, mebbe not.

Ah, yes. All three browsers are using CSS animation to animate.

Trying soon in sandbox.

-kt



On Tue, May 20, 2014 at 12:42 PM, Kenneth Tilton <[hidden email]> wrote:
Been one of those two days. :)

I was on qx 3.0 and did my first animation. Source follows this, and after I recover I'll try setting it up in the playground.

Takes a few seconds before the captions start to change: http://tiltonsalgebra.com/#

Then I decided to get fancier than I have lately with qooxdoo layouts and styling and decided I needed to run from source -- been running from nothing but build for years.

Then I see qx is at 3.5 and upgrade. Animations continue to work.

Then I hit a problem: generate build is not copying stuff from source to build. Check my @assets and all the docs and google and nothing. 

Well, this project started back in qx 0.8 and has been thru some upgrades, meanwhile a virgin project created under 3.5 copys source-to-build exactly as documented, so I regenerate my project, work my code back into it, and am successfully reloading that landing page, except for one thing.

When the animation runs, this happens:

1. the whole page goes white
2. the quotations label animates in as it should
3. the page reappears

All console.log output looks correct. The right widget is found, the DOM looks like DOM.

I can have all the code for the timer in place and comment out only the call to animate and the page does not disappear.

I can change it to animate width (worked briefly then not again) and the page does not go white.

Animating backgroundColor works pretty well, but is unsatisfactory graphically.

Overall, the code generally works under 3.0 and 3.5 and for some parameters being animated. Only opacity (so far) blows away the whole page for the duration of the animation.

Any ideas? I'll do the sandbox shortly to see if I can recreate.

Thx, kt


 clDict[46] = new qx.ui.basic.Label();
 clDict[46].oid = 46;
 clDict[46].set({"rich":true,"textColor":"black"
  ,"enabled":true,"visibility":"visible","width":800
  ,"marginTop":12,"allowGrowY":false,\allowGrowX":false});
clDict[46].tmr = new qx.event.Timer(3000);
clDict[46].qidx = 0;
clDict[46].setFont(new qx.bom.Font(16,['Open Sans']));
clDict[46].setValue('<center>'+hotQuote[0][0]
+ ' -- <i>' + hotQuote[0][1] + '</i></center>');
clDict[46].tmr.addListener('interval'
     , function(e) {
          var w = clDict[46];
          console.log('boom interval ' + w + ' lisp idx='+ 46);
          var ce = w.getContentElement();
          console.log('boom ce '+ce);
          if (ce) {
            var d = ce.getDomElement();
            var qidx = w.qidx + 1;
            console.log('boom '+qidx+' '+d);
            if (qidx > hotQuote.length - 1) {
               qidx = 0;
            }
            qx.bom.element.Animation.animate(d, hqFadeIn);
            w.setValue('<center>\"'+hotQuote[qidx][0] + '\" -- <i>' + hotQuote[qidx][1] + '</i></center>');
            w.qidx = qidx;
          }
});
clDict[46].addListener('appear'
      , function(e) {
          var w = clDict[46];
          console.log('carou appear ' + w + w.tmr);
          w.tmr.start();
     });
clDict[46].addListener('disappear'
      , function(e) {
          var w = clDict[46];
          console.log('carou disappear ' + w + w.tmr);
          w.tmr.stop();
     });

--
Kenneth Tilton
Fort Lauderdale, FL
"In a class by itself." -Macworld





--
Kenneth Tilton
Fort Lauderdale, FL
"In a class by itself." -Macworld



------------------------------------------------------------------------------
"Accelerate Dev Cycles with Automated Cross-Browser Testing - For FREE
Instantly run your Selenium tests across 300+ browser/OS combos.
Get unparalleled scalability from the best Selenium testing platform available
Simple to use. Nothing to install. Get started now for free."
http://p.sf.net/sfu/SauceLabs
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel