Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-7351] Android: ImageView.images - animated images do not start on load and animating property value incorrect

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2012-07-05T03:40:07.000+0000
Affected Version/sRelease 1.8.0.1
Fix Version/sRelease 2.1.0, Sprint 2012-12 API
ComponentsAndroid
Labelsapi, module_imageview, parity, qe-testadded
ReporterPaul Dowsett
AssigneePing Wang
Created2012-01-24T07:34:10.000+0000
Updated2012-07-05T10:32:14.000+0000

Description

Problem

The animating property defaults to false on creation, but is then set to true on load, even though the animation does not run. The start() method needs to be invoked to start the animation, and the animating property remains set at the same value (true). Hence, to resolve this, ensure that the start() method works correctly, and the animating property reflects the actual animation state. Hence, surely animating should be false on load until the start event is fired?

Test case

create a new project

replace the app.js code with the code below

extract the attached zip of images to the /images folder. Note that the campfire images included in the archive are taken from the KS

launch project

on second launch, enable the start() method in the load eventListener

Ti.UI.backgroundColor = 'white';
var win = Ti.UI.createWindow({
  exitOnClose: true,
  layout: 'vertical'
});

var switchAnimation = Ti.UI.createSwitch({
  title: 'Start',
  value:false,
  top: 20
});
win.add(switchAnimation);

var imageArray = [];

var imgName = 'campFire';
var imgExt = 'gif';
var imgNum = 17;

for (var i=1;i<=imgNum;i++){
  imageArray.push('/images/' + imgName + ((i<10) ? '0'+i : i) + '.' + imgExt);
}

var imageSeries = Ti.UI.createImageView({
  defaultImage: '/images/campFire01.gif',
  images: imageArray,
  duration:100,
  repeatCount:0,
  top: 20,
  height:200
});
win.add(imageSeries);

Ti.API.info('Before load 1): imageSeries.animating = ' + imageSeries.animating); // returns false

imageSeries.addEventListener('load', function(e){
  Ti.API.info('After load 1): imageSeries.animating = ' + imageSeries.animating); // returns true
  // e.source.start();  // uncomment this to allow the animation to run properly
  Ti.API.info('After load 2): imageSeries.animating = ' + imageSeries.animating); // returns true
});

switchAnimation.addEventListener('click', function(e){
  if(imageSeries.animating === false){
    e.value = true;
    imageSeries.start();
    Ti.API.info('After switch 3): imageSeries.animating = ' + imageSeries.animating);
  } else {
    e.value = false;
    imageSeries.stop();
    Ti.API.info('After switch 4): imageSeries.animating = ' + imageSeries.animating);
  }
});

win.open();

Logs

With start() NOT invoked in the load event listener, animation DOES NOT start and gives the following results. 
887                   TiAPI  I  (kroll$1: app://app.js) [247,923] Before load 1): imageSeries.animating = false
887                   TiAPI  I  (kroll$1: app://app.js) [622,1384] After load 1): imageSeries.animating = true
887                   TiAPI  I  (kroll$1: app://app.js) [1,1385] After load 2): imageSeries.animating = true
With start() invoked in the load event listener, animation DOES start, and gives the same results. 
887                   TiAPI  I  (kroll$1: app://app.js) [247,923] Before load 1): imageSeries.animating = false
887                   TiAPI  I  (kroll$1: app://app.js) [622,1384] After load 1): imageSeries.animating = true
887                   TiAPI  I  (kroll$1: app://app.js) [1,1385] After load 2): imageSeries.animating = true

Attachments

FileDateSize
images.zip2012-01-24T07:42:34.000+00001145043

Comments

  1. Ping Wang 2012-06-07

    Test case for functional test: 
       Ti.UI.backgroundColor = 'white';
   var win = Ti.UI.createWindow({
     exitOnClose: true,
     layout: 'vertical'
   });
    
   var switchAnimation = Ti.UI.createSwitch({
     title: 'Start',
     value:false,
     top: 20
   });
   win.add(switchAnimation);
    
   var imageArray = [];
    
   var imgName = 'campFire';
   var imgExt = 'gif';
   var imgNum = 17;
    
   for (var i=1;i<=imgNum;i++){
     imageArray.push('/images/' + imgName + ((i<10) ? '0'+i : i) + '.' + imgExt);
   }
    
   var imageSeries = Ti.UI.createImageView({
     defaultImage: '/images/campFire01.gif',
     images: imageArray,
     duration:100,
     repeatCount:0,
     top: 20,
     height:200
   });
   win.add(imageSeries);
    
   Ti.API.info('******************* Before load: imageSeries.animating = ' + imageSeries.animating);
    
   imageSeries.addEventListener('load', function(e){
     Ti.API.info('******************* After load: imageSeries.animating = ' + imageSeries.animating);
   });
   
   imageSeries.addEventListener('start', function(e){
     Ti.API.info('******************* After start: imageSeries.animating = ' + imageSeries.animating);
   });
   
   imageSeries.addEventListener('stop', function(e){
     Ti.API.info('******************* After stop: imageSeries.animating = ' + imageSeries.animating);
   });
   
   switchAnimation.addEventListener('click', function(e){
     if(imageSeries.animating === false){
       e.value = true;
       imageSeries.start();
     } else {
       e.value = false;
       imageSeries.stop();
     }
   });
    
   win.open();
    Test steps: 1. Extract the attached zip of images to the /images folder 2. Run the above code and check the console. Output should be: 
       ******************* Before load: imageSeries.animating = false
   ******************* After load: imageSeries.animating = false
    3. Click the switch button. Animation is shown and started. Output in the console is: 
       ******************* After start: imageSeries.animating = true
    4. Click the switch button again. Animation is stopped. Output is: 
       ******************* After stop: imageSeries.animating = false
  2. Ping Wang 2012-06-07

    PR https://github.com/appcelerator/titanium_mobile/pull/2349
  3. Olga Romero 2012-06-27

    Verified fix with Titanium Studio, build: 2.1.0.201206251749 Titanium SDK: 2.1.0.v20120626204252 LG VS910 4G Android version 2.3.6
  4. Shyam Bhadauria 2012-07-05

    Re-opening to edit the label.

JSON Source