Animacja poklatkowa z GIF-ów na HTML5 canvas

Zamiast uruchamiać gifa w znaczniku ‘img’ możemy uruchomić animację serii gifów na HTML5 canvas.

Klasa Listing31c_04

package rozdzial31c;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

import java.net.URL;

public class Listing31c_04 extends Application {
    public static void main(String[] args) {
        Application.launch(args);
    }

    @Override
    public void start(Stage stage) {
        try {
            VBox root = new VBox();
            WebView wv = new WebView();
            WebEngine we = wv.getEngine();
            URL url = this.getClass().getClassLoader().
                getResource("rozdzial31c/html_animation2.html");
            System.out.println(url);
            if (url != null) {
                we.load(url.toExternalForm());
            }
            root.getChildren().add(wv);
            Scene scene = new Scene(root, 454, 567);
            stage.setScene(scene);
            stage.setTitle("Animacja poklatkowa JavaScript");
            stage.setOnCloseRequest(e -> Platform.exit());
            stage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

Plik html_animation2.html

Ściągnij plik html_animation2.zip

<!DOCTYPE html>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="HTML5 canvas - animacja HTML" />
<meta name="keywords" content="HTML5, canvas, animacja HTML">
<title>HTML5 canvas - animacja HTML</title>
<script>
	var i = 0;
	var path = new Array();
	path[0] = "zaba-smut_01.gif";
	path[1] = "zaba-smut_02.gif";
	path[2] = "zaba-smut_03.gif";
	path[3] = "zaba-smut_04.gif";
	path[4] = "zaba-smut_05.gif";
	path[5] = "zaba-smut_06.gif";
	path[6] = "zaba-smut_07.gif";
	path[7] = "zaba-smut_08.gif";
	path[8] = "zaba-smut_09.gif";
	path[9] = "zaba-smut_10.gif";
	path[10] = "zaba-smut_11.gif";
	path[11] = "zaba-smut_12.gif";
	path[12] = "zaba-smut_13.gif";
	function swapImage() {
		document.slide.src = path[i];
		if (i < path.length - 1)
			i++;
		else
			i = 0;
		setTimeout("swapImage()", 120);
	};
	window.onload = swapImage;
</script>
</head>
<body>
	<section>
		<h2 class="derby">Animacja w miejscu: smutna żaba</h2>
		<img name="slide" src="zaba-smut_01.gif" width="454" 
height="567" />
	</section>
</body>
</html>

Po uruchomieniu zobaczymy animację uruchomiona na HTML5 canvas.

zaba-smut