Example of playing GIF animation in Android custom view
preface
GIF is a very common dynamic picture format. In Android, it has many use scenarios, ranging from start-up page animation to a loading display, which can be completed with GIF animation. It is also very convenient to use. It can be used directly from the artist. If the project is in a hurry or it is too troublesome to customize the native animation, GIF is a good choice. Compared with the latest webp format animation, it also has better compatibility (after all, it has appeared for many years).
For image loading, I always use glide recommended by Google. Image loading and caching are done well, and GIF animation is also supported. However, glide plays GIF by default, and does not open relevant interfaces to control GIF. This makes us unable to control the playback of GIF well, such as controlling the playback start time, playback times, and monitoring of playback pause, playback start and end events. Although it is possible to use glide (it is said that it is OK on the Internet, but I can't find a way), the operation will also be very troublesome.
analysis
In addition to third-party libraries, android.graphics.movie can also be used to load and play GIF animation, and its implementation is very simple.
According to the source, you can get the real column of movie from the input stream, file path and byte array of GIF file. Then we can manipulate the GIF file by manipulating the movie object.
The following methods are introduced:
Int width() the width of the movie. The value is equal to the width of the GIF picture. Unit: px.
Int height() the height of the movie. The value is equal to the height of the GIF picture. Unit: px.
Int duration() the length of time a movie is played once, that is, the length of time GIF is played once, unit: Ms.
Boolean isopaque() GIF is the picture transparent
Boolean setTime (int relativemilliseconds) sets the current time of the movie, and then finds the picture frame corresponding to the time, ranging from 0 to duration. Returns whether the frame was successfully found.
Draw the image corresponding to the current frame in canves. x. Y corresponds to the coordinates of the upper left corner of movie in canves.
The above are most of the methods that movie usually uses. Here we use these custom views to play GIF animation.
realization
First, define some required attributes to set GIF in the layout file
Then define gifde's playback listener to listen to events in various periods. It's very simple. I won't introduce it again:
Declare class and directly inherit ImageView, so that we can display not only GIF animation, but also ordinary pictures:
Then load GIF image resources
Call requestlayout to recalculate the view size and redraw.
Start playback:
Continuously call the OnDraw method to draw the picture frame of the current time of GIF:
The core method is to calculate which time segment in the movie needs to be played at the current time.
Pause GIF playback:
Continue GIF playback:
Can better control the playback process of GIF. Let's take a brief look at the finished product drawing:
Advanced
Flashback play
I believe that after reading the implementation principle of gifimageview above, the implementation of flashback playback is also very easy.
As shown in the figure below, the dog's head has changed from the original left to the right to the current right to the left (ಠ ᴗ ಠ).
Play the GIF animation like a video
This part is an advanced function I came up with after writing gifview. Since we have realized playback and pause, that is, we can control the playback of the specified GIF picture frame at a certain time point. If we add progress bar, fast forward and other functions, can we not achieve the same function as the video player? Due to space limitations, I have only simply implemented the progress bar function. For more functions, please move to GitHub, address: gifview.
The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.