Gka is a simple, efficient frame animation generation tool, image processing tool.

Just one line command, fast image optimization, generate animation files, support effect preview.

  • One-click: image file batch serialization rename, generate frame animation files, support preview
  • Better performance:supportReuse of same image✓ Image whitespace cropping✓ Graph optimization✓ Image compression✓ Image blank split optimization✓ Image pixel difference optimization✓ Polygraph adaptation✓
  • Multiple templates: Provides multiple built-in file output templates and supports custom templates

Official online document: gka.js.org



Quick start

The installation

npm i gka -gCopy the code

Begin to use

Just one line command, quickly generate animation files, support effect preview.

Gka E:\img # Processes images in the E:\img directoryCopy the code

The official documentation

Gka.js.org, Github address

Use examples and optimization principles

Frame animation contains a large number of images, so by optimizing the image and reducing the overall size of the image, resources can be saved and performance can be improved. Gka provides multiple optimizations and supports combination use. For example, to use gKA, run the following command:

Gka <dir> -cus # dir is the frame picture directoryCopy the code

The following work can be completed:

  • Image whitespace cropping -c
  • Image de-weight -u
  • Figure processing -s
  • Generate frame animation code
  • Preview animation playback

optimization

1. Blank Cropping – Crop the blank area around the picture

Reduce the size of the image by cropping out the white space around it.

Work to be done:

A. Cut the blank area around the picture

B. Record the clipping information for restoring the picture


[ crop ]

2. Unduplicate – display frames of the same picture for image sharing

In frame animation, some frames use exactly the same image. If you can make these frames reference the same image and not load the same image repeatedly, you can reduce the loading of the same image.


Work to be done:

A. Image reprocessing

B. Record the reference relationship between each frame and the deleted picture

[ unique ]


3. The graph

In order to reduce HTTP requests and reduce the size of the overall frame image, images can be combined.

Work to be done:

A. Picture combination

B. Record the combined picture information of each picture

[ sprites ]

(combination) blank clipping + remove weight + match the desired ✓

In frame animation, the difference between some frames is actually only the movement of the image content. When the image is whittled, it will be found that the cropped image is the same. So you can first cut the picture blank, and then the picture to remove the weight, and finally the image processing, the optimization effect is very considerable.


Image optimization can greatly reduce the size of image resources by whitespace cropping + repetition + combination. After the final processing of the picture and picture information file, GKA will automatically generate the corresponding code, restore each frame of picture display, and play the animation.


I have quite a few other articles on GKA:

  • Method and principle of rapid production of multi-fold image frame animation: GKA [– Ratio]
  • Optimization scheme for partial same animation between multiple animations: GKA
  • Use GKA to generate frame animation with one click
  • Pictures with design sister two or three things
  • Create adaptive scaling Sprite animation with one click
  • Quick production of high performance frame animation solutions
  • Accelerate createJS animation development and image optimization with GKA

Welcome to use, any comments or suggestions, thank you: D