Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Does ImageView support GIF file?

Does ImageView support GIF file?I mean,a single *.gif file that seems a moving animation,but not a image array.
I want load a single gif file downloaded from web,but it seems does not MOVE.

many thanks!

— asked October 11th 2010 by Wen Bin
  • gif
  • imageview

3 Answers

  • Philip's solution to animate using a sequence of images works fine. You could either create an array of image names – or name your images with a sequential number and use an index to load the correct one. Here is a sample of how to code it. Assume that you have 12 images and you number them loader1.png, loader2.png, etc:

    var win = Ti.UI.createWindow();
    // create an imageview and set it to the width and height of your images
    var loaderImage = Ti.UI.createImageView({
    // add it to your window
    // set the length of the images you have in your sequence
    var loaderArrayLength=12;
    // initialize the index to 1
    var loaderIndex=1;
    // this function will be called by the setInterval
    function loadingAnimation(){
      // set the image property of the imageview by constructing the path with the loaderIndex variable
      loaderImage.image = "images/loader-sequence/frame" + loaderIndex + ".png";
      //increment the index so that next time it loads the next image in the sequence
      // if you have reached the end of the sequence, reset it to 1
    // start the setInverval -- adjust the time to make a smooth animation
    var loaderAnimate = setInterval(loadingAnimation,80);
    — answered June 3rd 2011 by brian kurzius
    • To stop it nicely use

      — commented January 20th 2012 by Léon Doornkamp
    • thanks for that , it really helped me , just a point about it :

      • you must stop loaderAnimate using clearInterval(loaderAnimate); when no need for the animation anymore because it take some of the CPU ( in my galaxy tab it take 25% all the time even if the app in the background )

      — commented July 13th 2012 by abdulmajeed h
    • This doesn't seem to work on Android…or am I doing something wrong? I just copy pasted as is.

      — commented July 19th 2012 by Franz Allan See
    • thanks for this…

      for me,
      I added this to stop the Interval.


      — commented August 29th 2013 by Mark Tangpus
    • Thanks for this. One problem which i am facing is the image flickers the first time it is rendered. I am testing this on Android. is this a titanium bug? I am on 3.3.0 GA

      — commented August 27th 2014 by Vishnu Khaunte
  • Image array is great. Using photoshop , save each frame as picture using File->Export->Render Video->Image Sequence.

    Then make array , and start the animation. It's simple and works.

    — answered March 11th 2011 by Philip Rosel
    • Can anyone confirm that this works?

      — commented March 16th 2011 by Joe iEntry
    • do i have to export a gif image or a video??

      — commented September 9th 2011 by Sebastian Klaus
  • Just to confirm, it appears that gif is not supported. See Jigar Panchal's thread: http://developer.appcelerator.com/question/49181/run-animated-gif-image-in-webview-on-andorid.

    However, thanks to Dan Giulvezan who pointed out on a thread (link) you can use the activity indicator to show activity (See docs here). Or it may be appropriate to use the progress bar. Both have examples in KitchenSink/Resources/examples/activity_indicator.js and progress_bar.js.

    — answered March 11th 2011 by Joe iEntry
    1 Comment
    • This is great solution unless the ActivityIndicator doesn't show correctly – for instance, using the videoPlayer on android, the ActivityIndicator does not appear at all until the video loads – so it doesn't help much :-)

      — commented June 3rd 2011 by brian kurzius
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.