AI2 Inventor Forum News: Animated GIFs - displaying frames and adding horizontal motion

2017년 1월 1일 일요일

Animated GIFs - displaying frames and adding horizontal motion

Although static gif images can be displayed in App Inventor, gif animations are not yet supported.

In order to display a gif animation, you can use an image editor and take each of the frames/layers from the gif file and save them as separate images.

These can then be imported into App Inventor's Media folder and displayed one at a time with a Clock Timer block and an Image Sprite on a Canvas.

Each time the Clock Timer fires, the Image Sprite Picture can be changed to the next picture in the animation sequence.

This can be done either by putting the names of the picture files in a list then using an index and select list item to view them or by embedding the index in the file names themselves and using the join Text block to build the file name with every firing of the Timer.

In addition, to make the animation move left or right on the Canvas, you can add or subtract pixels from the Image Sprite X Property.

That is how this example project works.

The top slider adds a variable number of pixels to the X value and the bottom slider changes the Timer Interval.

When the movement of the Baby is most realistic, the value for top slider should be noted.

Also note that once the top value is picked, changing the bottom slider speeds up or slows down the Baby's crawl but the Baby does not slip or slide.

Trying this with other gif animations will likely have different values for the number of pixels to add which I believe is dependent on the stride of the character in the image.

The original GIF animation with 19 layers/frames: