Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-2851

Android: Opacity property and animation not working as expected.

    Details

      Description

      {html}<div><p>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.</p>
      <p>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?</p>
      <p>Please note that the Android example uses a workaround for
      issue: <a href=
      "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</a></p>
      <p>Comparison between iOS and Android @ 1.6.0 (HTC Evo 2.2)</p>
      <pre>
      <code class="javascript">// 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();</code>
      </pre>
      <pre>
      <code class="javascript">// 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();</code>
      </pre>
      <pre>
      <code class="javascript">// 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();</code>
      </pre></div>{html}

        Attachments

          Activity

            People

            • Assignee:
              ayeung Allen Yeung
              Reporter:
              fspencer Fred Spencer
            • Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-2476
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Integration