当前位置: 首页 > 面试题库 >

您可以使用Javascript控制GIF动画吗?

聂奇
2023-03-14
问题内容

是否可以使用JavaScript来控制GIF显示图像的哪一帧和/或停止动画。我希望能够加载GIF多个框架并仅显示其中一个。

我知道我可以用很多单独的图像来做,但是如果我可以用来做我想做的事GIF,那就只需要担心一个文件了。


问题答案:

您可以使用libgif库。

它使您可以启动/停止gif并控制gif所在的帧。

<script type="text/javascript" src="./libgif.js"></script>
<img src="./example1_preview.gif" rel:animated_src="./example1.gif"
 width="360" height="360" rel:auto_play="1" rel:rubbable="1" />

<script type="text/javascript">
    $$('img').each(function (img_tag) {
        if (/.*\.gif/.test(img_tag.src)) {
            var rub = new SuperGif({ gif: img_tag } );
            rub.load(function(){
                console.log('oh hey, now the gif is loaded');
            });
        }
    });
</script>

(大多数代码直接取自其示例



 类似资料:
  • 是否可以使用javascript来控制图像的哪一帧正在显示和/或停止动画。我希望能够加载一个和几个帧,并且只显示其中一个帧。 我知道我可以用很多单独的图像来完成,但是如果我可以用来完成我想要的,那么只需要担心一个文件。

  • 1.4. GIF动画 下面的程序会演示Go语言标准库里的image这个package的用法,我们会用这个包来生成一系列的bit-mapped图,然后将这些图片编码为一个GIF动画。我们生成的图形名字叫利萨如图形(Lissajous figures),这种效果是在1960年代的老电影里出现的一种视觉特效。它们是协振子在两个纬度上振动所产生的曲线,比如两个sin正弦波分别在x轴和y轴输入会产生的曲线。

  • 问题内容: 是否有人设法说服ImageIO编写动画GIF,尤其是设置正确的元数据?我的第一次尝试大致如下(其中b1和b2是BufferedImages): 这似乎几乎可以工作,但是: 我显然需要以某种方式设置“适当的”元数据来设置图像之间的时间,并理想地使它们循环(我天真地希望默认设置会做一些明智的事情,但嘿…) 它默认情况下写入的任何元数据显然都不是正确的:GIMP在加载文件时会给出一些错误消息

  • 动画控制器 动画控制器允许你为一个角色或其他游戏对象安排和维护一组动画。 控制器引用了动画剪辑,并且使用 状态机 来管理各种动画状态和它们之间的转换,可以把状态机认为是一种流程图,或者是一段在 Unity 中用可视化编程语言编写的简单程序。 下面的章节涵盖了 动画系统 Mecanim 提供的控制和序列化动画的主要功能。

  • play / pause(暂停/播放) 播放暂停的动画,如果autoplay 参数设置为false,则启动动画。 animation.play(); 暂停正在运行的动画。 animation.pause(); var animation = anime({ targets: '.play-pause-demo .el', translateX: 270, delay: function

  • 动画控制器视图 动画控制器视图允许你创建、查看和修改动画控制器资源。 动画控制器视图显示了一个新的空动画控制器资源 动画控制器视图主要有两部分:网格布局主体区域,左侧的分层和参数面板。 动画控制器视图的布局区域 深灰色网格部分是主体布局区域。你可以在这里创建、排列和连接 动画控制器 的状态(即动画剪辑)。 可以在网格上右键点击创建一个新的状态节点。使用鼠标中键拖动,或拖动时按住 Alt/Optio