Ionic 应用程序如何从第一帧开始显示 GIF 图像

Question

在我的离子应用程序中，我有一个 gif 图像，我想按按钮显示和隐藏它，但是，当我按下显示按钮时，我想显示第一帧的 gif 图像。例如，如果 gif 是倒计时 5,4,3,2,1.... 我想始终从数字 5 开始显示。我尝试使用 display:none/display:block，但图像显示随机。有什么建议吗？

Answer 1

每次切换 GIF 时，我都会创建一个新的 GIF 实例，再次显示时只需将 GIF 重置为其初始帧即可。

HTML 代码：

<img id="gifImage" src="assets/countdown.gif" style="display: none;">
<button (click)="toggleGif()">Toggle GIF</button>

TS代码：

 toggleGif() {
    var gifImage = document.getElementById("gifImage");
    if (gifImage) {
        if (gifImage.style.display === "none") {
            // Show gif
            gifImage.style.display = "block";
            // Created gif based new instance time
            (gifImage as HTMLImageElement).src = 'assets/countdown.gif' + "?timestamp=" + new Date().getTime();
        } else {
            // Hide gif
            gifImage.style.display = "none";
        }
    } else {
        console.error("Gif not found");
    }
    }