[TIMOB-2851] Android: Opacity property and animation not working as expected.

GitHub Issue	n/a
Type	Bug
Priority	Trivial
Status	Closed
Resolution	Fixed
Resolution Date	2011-09-28T13:59:28.000+0000
Affected Version/s	Release 1.6.2
Fix Version/s	Sprint 2011-37, Release 1.8.0
Components	Android
Labels	stage
Reporter	Fred Spencer
Assignee	Allen Yeung
Created	2011-04-15T03:31:10.000+0000
Updated	2011-11-01T00:09:37.000+0000

Description

The specific problem relates to an issue where Android will not display a view instantiated at 0.0 opacity. In addition, animation works strangely even when instantiating at > 0.0 opacity.

Sidebar: An additional expectation may lie in the necessity to set the view's opacity after the animation completes. Should the property be set by the completion of the animation, or leave this to the developer?

Please note that the Android example uses a workaround for issue: https://appcelerator.lighthouseapp.com/projects/32238/tickets/2776-android-animation-callback-is-called-multiple-times"> https://appcelerator.lighthouseapp.com/projects/32238/tickets/2776-android-animation-callback-is-called-multiple-times

Comparison between iOS and Android @ 1.6.0 (HTC Evo 2.2)

// iOS / Ti 1.6.0:
// Red box displays at 0.0 opacity. Use toggle button to fade in and fade out view.

var win = Ti.UI.createWindow({ backgroundColor:'#000' });
var view = Ti.UI.createView({ backgroundColor:'#f00', opacity:0.0, width:100, height:100 });
var toggleBtn = Ti.UI.createButton({ width:200, height:30, bottom:10, title:'toggle opacity' });

function toggleOpacity(e) {
    view.animate({ opacity:(view.opacity === 0.0) ? 1.0 : 0.0, duration:1000 }, function(e) {
        view.opacity = (view.opacity === 0.0) ? 1.0 : 0.0;
            Ti.API.info(view.opacity);
    });
}

toggleBtn.addEventListener('click', toggleOpacity);

win.add(view);
win.add(toggleBtn);
win.open();

// iOS / Ti 1.6.0:
// Red box displays at 1.0 opacity. Use toggle button to fade out and fade in view.

var win = Ti.UI.createWindow({ backgroundColor:'#000' });
var view = Ti.UI.createView({ backgroundColor:'#f00', opacity:1.0, width:100, height:100 });
var toggleBtn = Ti.UI.createButton({ width:200, height:30, bottom:10, title:'toggle opacity' });

function toggleOpacity(e) {
    view.animate({ opacity:(view.opacity === 0.0) ? 1.0 : 0.0, duration:1000 }, function(e) {
        view.opacity = (view.opacity === 0.0) ? 1.0 : 0.0;
            Ti.API.info(view.opacity);
    });
}

toggleBtn.addEventListener('click', toggleOpacity);

win.add(view);
win.add(toggleBtn);
win.open();

// Android 2.2 HTC Evo / Ti 1.6.0
// Red box displays at 1.0 opacity. Toggle button will successfully fade.
// After fade, toggle button will not work until the second press. Fade back in.
// Next press will fade out to 0.0. Rinse, repeat. :-)

var win = Ti.UI.createWindow({ backgroundColor:'#000' });
var view = Ti.UI.createView({ backgroundColor:'#f00', opacity:1.0, width:100, height:100 });
var toggleBtn = Ti.UI.createButton({ width:200, height:30, bottom:10, title:'toggle opacity' });

function toggleOpacity(e) {
    var counter = 0;
    
    view.animate({ opacity:(view.opacity === 0.0) ? 1.0 : 0.0, duration:1000 }, function(e) {
        if (counter === 0) {
            Ti.API.info('This is only called once due to the counter.');
            
            view.opacity = (view.opacity === 0.0) ? 1.0 : 0.0;
            
            Ti.API.info(view.opacity);
            
            counter ++;
        }
    });
}

toggleBtn.addEventListener('click', toggleOpacity);

win.add(view);
win.add(toggleBtn);
win.open();

Comments

Pedro Enrique 2011-06-01

There is a helpdesk ticket that has encounter a similar problem where the webViews do not obey the opacity property. Here is a sample code: var win = Ti.UI.createWindow({ backgroundColor: 'black' }); var web = Ti.UI.createWebView({ backgroundColor: 'white', opacity: 0.5 }); win.add(web); win.open(); http://support.appcelerator.com/tickets/APP-338713/tickets
Allen Yeung 2011-09-20

We also need to test adding a view with 0 opacity and verify that it works.

Allen Yeung 2011-09-26

To test, use the following in app.js:

   // Android 2.2 HTC Evo / Ti 1.6.0
   // Red box displays at 1.0 opacity. Toggle button will successfully fade.
   // After fade, toggle button will not work until the second press. Fade back in.
   // Next press will fade out to 0.0. Rinse, repeat. :-)
   
   var win = Ti.UI.createWindow({ backgroundColor:'#000' });
   var view = Ti.UI.createView({ backgroundColor:'#f00', opacity:1.0, width:100, height:100 });
   var toggleBtn = Ti.UI.createButton({ width:200, height:30, bottom:10, title:'toggle opacity' });
   
   function toggleOpacity(e) {
       var counter = 0;
       
       view.animate({ opacity:(view.opacity === 0.0) ? 1.0 : 0.0, duration:1000 }, function(e) {
           if (counter === 0) {
               Ti.API.info('This is only called once due to the counter.');
               
               view.opacity = (view.opacity === 0.0) ? 1.0 : 0.0;
               
               Ti.API.info(view.opacity);
               
               counter ++;
           }
       });
   }
   
   toggleBtn.addEventListener('click', toggleOpacity);
   
   win.add(view);
   win.add(toggleBtn);
   win.open();

Click on the "toggle opacity" button and verify that it fades in and out without any flickering

Fred Spencer 2011-09-27

Adding a view at 0.0 and animating opacity to 1.0 doesn't appear to animate the view or show.

   var win = Ti.UI.createWindow({ backgroundColor:'#000' });
   var view = Ti.UI.createView({ opacity:0.0, backgroundColor:'#f00', width:100, height:100 });
   
   win.add(view);
   
   win.open();
   
   view.animate({ opacity:1.0, duration:1000 });

Original test case shows that view is at 0.0. However, 0.0 -> 1.0 does not appear to work. After 1 second, the view appears at 1.0, but that seems to be due to the opacity set on animation callback.

   var win = Ti.UI.createWindow({ backgroundColor:'#000' });
   var view = Ti.UI.createView({ backgroundColor:'#f00', opacity:0.0, width:100, height:100 });
   var toggleBtn = Ti.UI.createButton({ width:200, height:30, bottom:10, title:'toggle opacity' });
   
   function toggleOpacity(e) {
       view.animate({ opacity:(view.opacity === 0.0) ? 1.0 : 0.0, duration:1000 }, function(e) {
           view.opacity = (view.opacity === 0.0) ? 1.0 : 0.0;
               Ti.API.info(view.opacity);
       });
   }
   
   toggleBtn.addEventListener('click', toggleOpacity);
   
   win.add(view);
   win.add(toggleBtn);
   win.open();

Bill Dawson 2011-09-28

Re-resolving after merge of newer fixes.
Natalie Huynh 2011-10-05

Tested with 1.8.0.v20111005130613 on Galaxy Tab 10 3.1 Hero 2.1 iPod Touch 5.0

JSON Source