PHP Classes

Move Me GIF: Create animated GIF images in pure PHP

Recommend this page to a friend!
  Info   View files Example   View files View files (83)   DownloadInstall with Composer Download .zip   Reputation   Support forum (7)   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 79%Total: 1,008 All time: 3,628 This week: 105Up
Version License PHP version Categories
movemegif 1.0.5MIT/X Consortium ...5.3PHP 5, Graphics, Video
Description 

Author

This package can create animated GIF images in pure PHP.

It can compose an animation from multiple frames that could be defined by external image files.

The class can also overlay sequences of images in different positions on top of a fixed background.

The composed image can be saved to a file in GIF format for animated images.

Innovation Award
PHP Programming Innovation award nominee
May 2016
Number 3


Prize: PhpStorm IDE personal permanent license
Animated GIF images became popular because they allow to display videos on social network sites that only support image formats.

Assembling an animated GIF is just composing a sequence of still pictures. However, this class goes further to assembling pictures as animated GIFs by allowing to render sequences of images overlaid on top of custom background images.

It also provides optimization methods to generate smaller GIFs files by clipping regions of the images and skipping frames.

Manuel Lemos
Picture of Patrick Van Bergen
  Performance   Level  
Name: Patrick Van Bergen <contact>
Classes: 2 packages by
Country: The Netherlands The Netherlands
Age: 54
All time rank: 218258 in The Netherlands The Netherlands
Week rank: 312 Up10 in The Netherlands The Netherlands Up
Innovation award
Innovation award
Nominee: 1x

Example

<?php
/**
 * A simple animation created from with 8 png images.
 *
 * The horse images were taken from this Wikipedia page
 *
 * https://en.wikipedia.org/wiki/Animated_cartoon
 */

use movemegif\domain\FileImageCanvas;
use
movemegif\GifBuilder;

// just for debugging
error_reporting(E_ALL);
ini_set('display_errors', 1);

// include movemegif's namespace
require_once __DIR__ . '/../php/autoloader.php';

// no width and height specified: they will be taken from the first frame
$builder = new GifBuilder();
$builder->setRepeat();

for (
$i = 1; $i <= 8; $i++) {

   
$builder->addFrame()
        ->
setCanvas(new FileImageCanvas(__DIR__ . '/horse/' . $i . '.png'))
        ->
setDuration(8);
}

$builder->output('horse.gif');


Details

movemegif

An Animated GIF creation library in pure PHP.

This library focuses on the use of GD in the creation of animated gif images.

  • Requires PHP 5.3 or higher.
  • Requires GD library (use `apt-get install php5-gd` or similar, to install)

Features

  • Looping
  • Frame positioning (left, top)
  • Clipping of frame areas.
  • Specifying a color for transparent pixels
  • The duration of a frame in 1/100s of a second
  • Explicit use of global and local color tables (default = global)
  • End-of-frame actions: leave as is (= default), restore to previous frame, restore to background
  • Adding comments

There are three ways to create a frame:

  • Use an existing image (FileImageCanvas)
  • Create a frame with GD lib functions (GdCanvas)
  • Create frames based on a string of indexes and a color table array (StringCanvas)

About speed

The library uses GD's imagegif function to generate frames quickly. But in some cases it cannot be used, and compression is done in PHP, which is much slower.

  • Frames are fast when GdCanvas or FileImageCanvas is used in combination with a local color table (the default).
  • Frames are much slower when the global color table is used. However this frame takes up less space in the GIF.
  • Frames are also much slower when StringCanvas is used.

Comments

  • A duration of 2/100-ths of a second is the minimum, since browsers impose a slowness fine for values of 0 and 1.
  • GIF (or rather Netscape's Application Block) does not allow you to start looping a subset of all frames.
  • While GIF allows you to _restore to background color_ at the end of a frame, browsers interpret this by "restoring" to the pixels that show though from the page on which the image is located.
  • The global color table is a color table that is shared by all frames that use it. Use the global color table only when space requirements are much more important than GIF creation time requirements.

Thanks a great deal to Matthew Flickinger for writing an awesome GIF format explanation

Examples

The source code (directory "example") contains a few examples to help you on the way.

Each example shows a different animation strategy. Choose the strategy that best suits your needs. Combinations of the strategies are also possible, since all settings are done on the frame level.

Horse

The Horse example shows how to animate a series of same-sized images.

Horse

The horse image was taken from Wikipedia

Moki

In this example we find Moki running in the mountains.

Frame 1 shows a background JPEG image. The following 46 frames show 10 different poses of Moki on different horizontal positions. These are transparent GIF images that are drawn and erased per frame.

The strategy here is to start with a background image and use "restore to previous frame" to paint the pictures of the dog on top of it. For each frame of the dogs animation, the GIF renderer draws the image (with transparent background), waits for the duration of the frame, and then puts the image back into the state where it was before the image was drawn. This way, the background image remains and is ready to receive the next image of the dog.

This strategy helps keep the GIF image small, since the background does not need to be stored for every frame. But is also has an important drawback: in a looping, when all frames have drawn, a completely empty background image will be drawn. If the dog would be on a visible position at that time, it would disappear for an instance.

Moki

Pong

The elaborate PONG example shows how you can keep the filesize small while creating a large number of frames, by the use of

  • _Clipping_: mark the area that you want redrawn in the frame. The library turns that clipping area into a frame.
  • _Stepping_: use multiple frames for a single step of your animation, to minimize the area that needs to be redrawn.

In this example a complete frame takes 5kB in the compressed GIF format. The animation takes 270 steps and would take over a MB if unclipped frames were used. Using the two techniques, the image just takes 179 kB.

The strategy here is to draw each frame completely (with GD lib), but to create frames only of the areas of the image that have changed.

Pong

Related

Another PHP animated GIF library was written by László Zsidi and can be found at phpclasses.org

The standard GIF library is written in C and can be found here

The GIF 89a specification is located here


  Files folder image Files  
File Role Description
Files folder imageexample (4 files, 3 directories)
Files folder imageimages (3 files)
Files folder imagephp (1 file, 1 directory)
Files folder imagetest (3 directories)
Accessible without login Plain text file .gitignore Data Auxiliary data
Accessible without login Plain text file LICENSE Lic. License
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  example  
File Role Description
Files folder imagehorse (8 files)
Files folder imagemoki (11 files)
Files folder imagepong (1 file, 2 directories)
  Accessible without login Plain text file autoloader.php Aux. Auxiliary script
  Accessible without login Plain text file horse.php Example Example script
  Accessible without login Plain text file moki.php Example Example script
  Accessible without login Plain text file pong.php Example Example script

  Files folder image Files  /  example  /  horse  
File Role Description
  Accessible without login Image file 1.png Icon Icon image
  Accessible without login Image file 2.png Icon Icon image
  Accessible without login Image file 3.png Icon Icon image
  Accessible without login Image file 4.png Icon Icon image
  Accessible without login Image file 5.png Icon Icon image
  Accessible without login Image file 6.png Icon Icon image
  Accessible without login Image file 7.png Icon Icon image
  Accessible without login Image file 8.png Icon Icon image

  Files folder image Files  /  example  /  moki  
File Role Description
  Accessible without login Image file 0.gif Icon Icon image
  Accessible without login Image file 1.gif Icon Icon image
  Accessible without login Image file 2.gif Icon Icon image
  Accessible without login Image file 3.gif Icon Icon image
  Accessible without login Image file 4.gif Icon Icon image
  Accessible without login Image file 5.gif Icon Icon image
  Accessible without login Image file 6.gif Icon Icon image
  Accessible without login Image file 7.gif Icon Icon image
  Accessible without login Image file 8.gif Icon Icon image
  Accessible without login Image file 9.gif Icon Icon image
  Accessible without login Image file landscape.jpg Icon Icon image

  Files folder image Files  /  example  /  pong  
File Role Description
Files folder imageactor (7 files)
Files folder imagelib (1 file)
  Plain text file Pong.php Class Class source

  Files folder image Files  /  example  /  pong  /  actor  
File Role Description
  Plain text file Actor.php Class Class source
  Plain text file Background.php Class Class source
  Plain text file Ball.php Class Class source
  Plain text file Pad.php Class Class source
  Plain text file PadLeft.php Class Class source
  Plain text file PadRight.php Class Class source
  Plain text file Text.php Class Class source

  Files folder image Files  /  example  /  pong  /  lib  
File Role Description
  Plain text file Font.php Class Class source

  Files folder image Files  /  images  
File Role Description
  Accessible without login Image file horse.gif Data Auxiliary data
  Accessible without login Image file moki.gif Data Auxiliary data
  Accessible without login Image file pong.gif Data Auxiliary data

  Files folder image Files  /  php  
File Role Description
Files folder imagemovemegif (1 file, 3 directories)
  Accessible without login Plain text file autoloader.php Aux. Auxiliary script

  Files folder image Files  /  php  /  movemegif  
File Role Description
Files folder imagedata (21 files)
Files folder imagedomain (6 files)
Files folder imageexception (7 files)
  Plain text file GifBuilder.php Class Class source

  Files folder image Files  /  php  /  movemegif  /  data  
File Role Description
  Plain text file ApplicationExtension.php Class Class source
  Plain text file Clipper.php Class Class source
  Plain text file ColorTable.php Class Class source
  Plain text file CommentExtension.php Class Class source
  Plain text file CompressedCodeString.php Class Class source
  Plain text file DataSubBlock.php Class Class source
  Plain text file Extension.php Class Class source
  Plain text file Formatter.php Class Class source
  Plain text file GDAcceleratedPixelDataProducer.php Class Class source
  Plain text file GifData.php Class Class source
  Plain text file GifParser.php Class Class source
  Plain text file GraphicExtension.php Class Class source
  Plain text file HeaderBlock.php Class Class source
  Plain text file ImageData.php Class Class source
  Plain text file ImageDescriptor.php Class Class source
  Plain text file LogicalScreenDescriptor.php Class Class source
  Plain text file Math.php Class Class source
  Plain text file NetscapeApplicationBlock.php Class Class source
  Plain text file PHPPixelDataProducer.php Class Class source
  Plain text file PixelDataProducer.php Class Class source
  Plain text file Trailer.php Class Class source

  Files folder image Files  /  php  /  movemegif  /  domain  
File Role Description
  Plain text file Canvas.php Class Class source
  Plain text file ClippingArea.php Class Class source
  Plain text file FileImageCanvas.php Class Class source
  Plain text file Frame.php Class Class source
  Plain text file GdCanvas.php Class Class source
  Plain text file StringCanvas.php Class Class source

  Files folder image Files  /  php  /  movemegif  /  exception  
File Role Description
  Plain text file ColorNotFoundException.php Class Class source
  Plain text file DurationTooSmallException.php Class Class source
  Plain text file EmptyFrameException.php Class Class source
  Plain text file GifParseException.php Class Class source
  Plain text file InvalidDimensionsException.php Class Class source
  Plain text file MovemegifException.php Class Class source
  Plain text file TooManyColorsException.php Class Class source

  Files folder image Files  /  test  
File Role Description
Files folder imageheavy (1 file)
Files folder imageregular (6 files)
Files folder imageresources (2 files)

  Files folder image Files  /  test  /  heavy  
File Role Description
  Accessible without login Plain text file FlatDragonTest.php Test Unit test script

  Files folder image Files  /  test  /  regular  
File Role Description
  Accessible without login Plain text file ClipTest.php Test Unit test script
  Accessible without login Plain text file ColorTableTest.php Test Unit test script
  Accessible without login Plain text file ExceptionTest.php Test Unit test script
  Accessible without login Plain text file FeatureTest.php Test Unit test script
  Accessible without login Plain text file SimpleImageTest.php Test Unit test script
  Accessible without login Plain text file UnitTest.php Test Unit test script

  Files folder image Files  /  test  /  resources  
File Role Description
  Accessible without login Image file flat-dragon.gif Data Auxiliary data
  Accessible without login Image file local-dragon.gif Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 100%
Total:1,008
This week:0
All time:3,628
This week:105Up
User Ratings User Comments (2)
 All time
Utility:91%StarStarStarStarStar
Consistency:100%StarStarStarStarStarStar
Documentation:91%StarStarStarStarStar
Examples:75%StarStarStarStar
Tests:75%StarStarStarStar
Videos:-
Overall:79%StarStarStarStar
Rank:22
 
Thank You very much!
5 years ago (Taron)
90%StarStarStarStarStar
Quick support, and very useful
6 years ago (Alexandru Geo)
90%StarStarStarStarStar