Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How I can stop an animated GIF in JavaFX?

I want to use an animated GIF in my project, but I dont know how I can stop the loop animation. I mean, I want the GIF to play 1 time only.

Thanks!

like image 329
Ezequiel Avatar asked Jan 28 '15 02:01

Ezequiel


People also ask

How do you stop an animated GIF?

The next time you're tired of seeing a GIF on a webpage just hit Esc on your keyboard and the GIF stops. This includes every GIF on a webpage. Even a page filled with animated GIFs, like Giphy, will stop with one key press. Hit Esc again and the GIFs start moving again.

How do you stop a GIF from looping in CSS?

Go to the Window tab and select timeline(if the timeline is not already open). At the bottom of the timeline panel, you will find an option, which says "Forever". Change that to "Once". Go to File> Export> Export for Web and save it as a gif.

How do you stop a GIF from looping in JavaScript?

To stop an animated gif from looping with JavaScript, we can copy the animated GIF content to a canvas element. Then we hide the original img element with the animated GIF when the animation is over. to add the canvas and the img element.

How do you keep a GIF from repeating?

Loop a part of an animated GIF image Or you can right-click and choose 'Split'. Right-click on the other clips and select 'Delete'. You can now add the same GIF file and repeat the process to create a loop.


1 Answers

I haven't done GIF animation, wasn't even aware that JavaFX would have methods for starting and stopping them. If you wish to do ANY animation using images, I rather suggest you do it frame by frame yourself. This way you have full control over it and you can have more than just 256 colors in your image.

I read a very good article about Creating a Sprite Animation with JavaFX in Mike's blog.

It's very easy to do. You simply extend the Transition class, add an ImageView to it and implement the Transition's Interpolate method.

Edit: oh, and by the way, GIFs have a loop flag which tells them to either play in a loop or not to play in a loop. In other words: In theory you could modify the GIF file's loop property. In theory only, because I just tried with specifying to play only once and in JavaFX it still played in an endless loop while in FireFox it played once. By the way, JavaFX doesn't seem to support animated PNGs (APNG) which would support more than 256 colors. So the automatic image animation capabilities are very limited. Best to do the animation by yourself.

I hope someone comes up with something better, but here's an example code about how you could get full control over your gif.

import java.awt.image.BufferedImage;
import java.net.URISyntaxException;

import javafx.animation.Interpolator;
import javafx.animation.Transition;
import javafx.application.Application;
import javafx.embed.swing.SwingFXUtils;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.WritableImage;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 * Requires GifDecoder from here: http://www.java2s.com/Code/Java/2D-Graphics-GUI/DecodesaGIFfileintooneormoreframes.htm
 */
public class AnimatedGifDemo extends Application {

    @Override
    public void start(Stage primaryStage) throws URISyntaxException {

        HBox root = new HBox();

        // TODO: provide gif file, ie exchange banana.gif with your file
        Animation ani = new AnimatedGif(getClass().getResource("banana.gif").toExternalForm(), 1000);
        ani.setCycleCount(10);
        ani.play();

        Button btPause = new Button( "Pause");
        btPause.setOnAction( e -> ani.pause());

        Button btResume = new Button( "Resume");
        btResume.setOnAction( e -> ani.play());

        root.getChildren().addAll( ani.getView(), btPause, btResume);

        Scene scene = new Scene(root, 1600, 900);

        primaryStage.setScene(scene);
        primaryStage.show();

    }

    public static void main(String[] args) {
        launch(args);
    }

    public class AnimatedGif extends Animation {

        public AnimatedGif( String filename, double durationMs) {

            GifDecoder d = new GifDecoder();
            d.read( filename);

            Image[] sequence = new Image[ d.getFrameCount()];
            for( int i=0; i < d.getFrameCount(); i++) {

                WritableImage wimg = null;
                BufferedImage bimg = d.getFrame(i);
                sequence[i] = SwingFXUtils.toFXImage( bimg, wimg);

            }

            super.init( sequence, durationMs);
        }

    }

    public class Animation extends Transition {

        private ImageView imageView;
        private int count;

        private int lastIndex;

        private Image[] sequence;

        private Animation() {
        }

        public Animation( Image[] sequence, double durationMs) {
            init( sequence, durationMs);
        }

        private void init( Image[] sequence, double durationMs) {
            this.imageView = new ImageView(sequence[0]);
            this.sequence = sequence;
            this.count = sequence.length;

            setCycleCount(1);
            setCycleDuration(Duration.millis(durationMs));
            setInterpolator(Interpolator.LINEAR);

        }

        protected void interpolate(double k) {

            final int index = Math.min((int) Math.floor(k * count), count - 1);
            if (index != lastIndex) {
                imageView.setImage(sequence[index]);
                lastIndex = index;
            }

        }

        public ImageView getView() {
            return imageView;
        }

    }

}

It provides a pause/resume button for testing. What you need in addition is the Gif Decoder code and an animated banana.gif.

enter image description here

like image 123
Roland Avatar answered Oct 04 '22 06:10

Roland