我将如何制作自己的 GIF 启动器？答案

【问题标题】：How would I go about making my own GIF launcher?我将如何制作自己的 GIF 启动器？
【发布时间】：2021-08-27 20:15:16
【问题描述】：

我正在尝试在我正在开发的应用上创建一个按钮，当我单击该按钮时会启动 GIF 录制。我不熟悉 GIF 的制作方式或创建它需要哪些资源。有没有我需要知道的语言/工具才能做到这一点？

【问题讨论】：

您使用什么语言制作您的应用/网站？
主要是 Python，但也有一些 Javascript 和 HTML/CSS。该应用是由我实习期间的一个团队创建的，我只是在我的任务中添加新功能。

标签： gif

【解决方案1】：

这是一个在单击按钮或单击静止图像时播放 gif 的功能。

number = 0;
var animations = ['https://media.giphy.com/media/sCPGYa9EAeTFC/giphy.gif',
  'https://media.giphy.com/media/sCPGYa9EAeTFC/giphy.gif',
  'https://media.giphy.com/media/sCPGYa9EAeTFC/giphy.gif'
]; // array of gif

//function to play gif
function playGif() {
  image = document.getElementById('hiddenimageid');
  image.src = animations[number];
}

.gifButton {
  position: absolute;
  top: 10%;
  left: 25%;
}

.board {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 50%;
  height: 50%;
  cursor: pointer;
}

.board img {
  width: 100%;
  height: 100%;
}

<body>
  <button class="gifButton" onclick="playGif()">Click to play Gif</button>
  <div class="board">
    <img src="https://im7.ezgif.com/tmp/ffffff-ezgif-7-0ed398c8bb8a-gif-jpg/frame_07_delay-0.13s.jpg" id="hiddenimageid" onclick="character();" />
  </div>
</body>

<!--The img src here is the still image to display before the gif starts running-->

或者，如果您只想显示链接中的 Gif，您可以将其放入 iframe

iframe {
  position: absolute;
  left: 20%;
  width: 40%;
  height 40%;
}

<iframe src="https://giphy.com/embed/eoxomXXVL2S0E" width="480" height="360" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
<p><a href="https://giphy.com/gifs/internet-eoxomXXVL2S0E">via GIPHY</a></p>

【讨论】：