image_sequence_animator

A simple widget for animating a set of images with full custom controls as an alternative to using a GIF file.

If you have a GIF file you would like to use with this package, I recommend EZGIF to convert your GIF file to an image sequence.

It is highly recommended to read the documentation and run the example project on a real device to fully understand and inspect the full range of capabilities.

Media | Description | How-to-Use

Recent

• fullPaths is added. If you would like to specify a list of endpoints for the frames in your image sequence animator, use this value. If set, values for folderName, fileName, suffixStart, suffixCount, fileFormat and frameCount will be ignored.

• isOnline is added. If your folderName is an online path, this value should be set to true.

• waitUntilCacheIsComplete is added. If you want the ImageSequenceAnimator to wait until the entire image sequence is cached, this value should be set to true i. Otherwise, the ImageSequenceAnimator will invoke onReadyToPlay and start playing if isAutoPlay is set to true when it approximates that the remaining caching can be completed without causing stutters. This value is only used if isOnline is set to true.

• cacheProgressIndicatorBuilder is added. If you want to display a widget until the ImageSequenceAnimator is ready to be played, use this function.

---

Media

Watch on Youtube:

Description

This simple widget for animating a set of images (a.k.a an image sequence) with full custom controls as an alternative to using a GIF file.

GIF files are, as far as I know, not possible to control. With this package, you will have full control over your image sequence like controlling a video. You can loop, boomerang, change the color, play, pause, stop, skip, rewind, restart and more.

How-to-Use

First, add your image sequence to your assets and update the "pubspec.yaml" accordingly.

Then create an ImageSequenceAnimator widget as shown in the example:

ImageSequenceAnimator(
  "assets/ImageSequences/MyImageSequence",  //folderName 
  "Frame_",                                 //fileName
  0,                                        //suffixStart
  5,                                        //suffixCount 
  "png",                                    //fileFormat 
  60,                                       //frameCount
 {Key key,
  fps               : 60,
  isLooping         : false,
  isBoomerang       : false,
  isAutoPlay        : true,
  color             : Colors.white,
  onReadyToPlay     : _onReadyToPlay,
  onStartPlaying    : _onStartPlaying,
  onPlaying         : _onPlaying,
  onFinishPlaying   : _onFinishPlaying})

ImageSequenceAnimator(
  "https://www.domain.com/ImageSequences/MyImageSequence",  //folderName 
  "Frame_",                                                 //fileName
  0,                                                        //suffixStart
  5,                                                        //suffixCount 
  "png",                                                    //fileFormat 
  60,                                                       //frameCount
 {Key key,
  fullPahts         :               [],  
  fps               :               60,
  isLooping         :               false,
  isBoomerang       :               false,
  isAutoPlay:                       true,
  isOnline:                         true,
  waitUntilCacheIsComplete:         true,
  cacheProgressIndicatorBuilder:    _cacheProgressIndicatorBuilder,
  color             :               Colors.white,
  onReadyToPlay     :               _onReadyToPlay,
  onStartPlaying    :               _onStartPlaying,
  onPlaying         :               _onPlaying,
  onFinishPlaying   :               _onFinishPlaying})
  
Widget _cacheProgressIndicatorBuilder(BuildContext _context , double _progress);  
void   _onReadyToPlay(ImageSequenceAnimatorState _imageSequenceAnimator);
void   _onStartPlaying(ImageSequenceAnimatorState _imageSequenceAnimator);
void   _onPlaying(ImageSequenceAnimatorState _imageSequenceAnimator);
void   _onFinishPlaying(ImageSequenceAnimatorState _imageSequenceAnimator); 

Further Explanations:

For a complete set of descriptions for all parameters and methods, see the documentation.

• isLooping will override isBoomerang if both are set to true.
• All ImageSequenceProcessCallback callbacks will return a reference to the created ImageSequenceAnimator state. You can save this instance for further actions.
• Use ImageSequenceAnimatorState's void setIsLooping(bool isLooping), void setIsBoomerang(bool isBoomerang), void setColor(Color color), void play({double from: -1.0}), void rewind({double from: -1.0}), void pause(), void skip(double value, {double percentage: -1.0}), void restart(), void stop() methods for the corresponding actions.
• Use ImageSequenceAnimatorState's bool get isLooping, bool get isBoomerang, double get currentProgress, double get totalProgress, double get currentTime and double get totalTime methods to get the respective values.

Notes

I started using and learning Flutter only some weeks ago so this package might have some parts that don't make sense, that should be completely different, that could be much better, etc. Please let me know! Nicely!

Any help, suggestion or criticism is appreciated!

Cheers.