El método getCurrentFrame() de p5.Image en la biblioteca p5.js se usa para devolver el índice del cuadro que se muestra actualmente de la animación GIF.
Sintaxis:
getCurrentFrame()
Parámetros: Esta función accept no acepta ningún parámetro.
Valor devuelto: este método devuelve un número que representa el cuadro actual de la animación que está visible actualmente.
Las siguientes bibliotecas se incluyen en la sección «head» de la página HTML al implementar los siguientes ejemplos.
<script src=”p5.Image.js”></script>
<script src=”p5.min.js”></script>
Ejemplo 1: El siguiente ejemplo ilustra el método getCurrentFrame() en la biblioteca p5.js.
Javascript
function setup() { example_gif = loadImage("sample-gif.gif"); createCanvas(500, 300); textSize(18); incSpeedBtn = createButton("Increase GIF Speed"); incSpeedBtn.position(30, 240); incSpeedBtn.mousePressed(() => { // Decrease the delay between frames example_gif.delay(25); }) decSpeedBtn = createButton("Decrease GIF Speed"); decSpeedBtn.position(200, 240); decSpeedBtn.mousePressed(() => { // Increase the delay between frames example_gif.delay(150); }) } function draw() { clear(); text("The current frame is shown " + "using getCurrentFrame()", 20, 20); // Draw the GIF on screen image(example_gif, 20, 40, 260, 140); // Get the current frame let currFrame = example_gif.getCurrentFrame(); text("The current frame is: " + currFrame, 20, 200); }
Producción:
Ejemplo 2:
Javascript
function preload() { example_gif = loadImage("sample-gif.gif"); } function setup() { createCanvas(500, 300); textSize(18); text("Click on the button to get " + "the current frame", 20, 20); frameBtn = createButton("Get current frame"); frameBtn.position(30, 40); frameBtn.mousePressed(getFrame); } function draw() { // Draw the GIF on screen image(example_gif, 20, 60, 240, 120); } function getFrame() { clear(); // Get the current frame let currFrame = example_gif.getCurrentFrame(); text("The current frame is: " + currFrame, 20, 200); text("Click on the button to get " + "the current frame", 20, 20); }
Producción:
Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ referencia/#/p5.Imagen/getCurrentFrame
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA