QQ表情 双击之后显示gif

最近流行一种双击才能播放的GIF动画。例如下面这两张：

<img class="alignnone size-full wp-image-2391" title="meinv" alt="" src="http://www.ljf.cn/wp-content/uploads/2012/11/meinv.gif" width="144" height="216" style="margin:5px 20px 20px 0px;padding:0px;border:medium none;display:block;max-width:100%;height:auto;vertical-align:baseline;" />

<img class="alignnone size-full wp-image-2392" title="qunzi3" alt="" src="http://www.ljf.cn/wp-content/uploads/2012/11/qunzi3.gif" width="144" height="216" style="margin:5px 20px 20px 0px;padding:0px;border:medium none;display:block;max-width:100%;height:auto;vertical-align:baseline;" />

在网页上展示不能达到最佳效果。导入QQ表情后，可以达到让人惊讶的效果。因为用户最先看到的，是带有文字的静态画面。QQ用户双击图片后，GIF动画播放。

这种技巧可以把动画隐藏在一张静态的“封面”后面，用户不双击，就无法知道后边的GIF动画是什么内容：可能是美女脱掉衣服，也可能是吓人的女鬼，还可能是凤姐。

众所周知，GIF动画就是按顺序播放一组图片，原理跟播放电影是一样的。通过FireWork，我们可以控制gif重复播放的次数。

上面这些动画的原理，是把gif动画重复播放的次数设置为1，也就是不循环。

另外有两个小技巧需要注意的：

<img class="alignnone size-full wp-image-2394" title="states" alt="" src="http://www.ljf.cn/wp-content/uploads/2012/11/states.jpg" width="274" height="294" style="margin:5px 20px 20px 0px;padding:0px;border:medium none;display:block;max-width:100%;height:auto;vertical-align:baseline;" />

1、State不能停顿。这样是为了在QQ聊天窗口直接显示“封面”。

2、在动画后面，设置一些重复的State，伪造静态效果。这个需要控制一定的数量，例如100个。这样是为了让用户误以为动画结束了，关闭动画。其实用户如果不关闭，最后动画会停留在最后一个State，也就是“封面图片”上。这样的用户体验可能就差一些了。（转自懒惰之计）

Photoshop做法可参考糖豆的文章

最近QQ聊天群里经常会看到一些“双击有惊喜”的图片，一张美女的图片双击后一秒变凤姐真是让人大跌眼镜。同时，<span style="margin:0px;padding:0px;color:#1f75cc;">糖豆</span>也发现很多搞推销的制作了一些“双击有惊喜”的图片，感觉这种推销方法真是成功啊，达到率100%有木有。

    本人经过一番研究也明白了“双击有惊喜”图片的制作方法，在这里教给大家。简单说一下大体制作思路：

1. “双击有惊喜”聊天表情本质上是一张GIF图片，设置只播放一次。

2.GIF图片的“双击有惊喜”显示为封面，需设置为GIF最后一帧。

3.双击后显示的图片实际不是静止的一张图，而是尽可能多的重复帧数。

注意到以上三点，现在就可以着手制作了：

Photoshop制作QQ聊天图片“<span style="margin:0px;padding:0px;color:#1f75cc;">双击有惊喜</span>”

1.准备两张同样大小的图片，一张为“双击”封面，另一张为双击后显示图片。本人准备的是两张360px*360px的图片（360px正好能填满QQ聊天窗口）如下图：

2.分别在图层中双击两张图片解锁，如下图：

3.图片解锁后，把其中一张图片用Ps的移动工具，移动到另一张图片的上层，并且完全覆盖。

4.点击窗口-动画，调出photoshop动画工具。如下图：

5.确保双图层（已被覆盖的图层）文件被激活（鼠标点击后显示到动画窗口），点击动画窗口的复制所有帧按钮，如图：

6.确保鼠标激活动画窗口的第二帧，在图层中修改上方图层透明度为0%，以显示出下方图形。如图：

7.鼠标激活动画窗口第一帧，点击复制所有帧按钮，同第五步，复制帧数在100次以上，并将动作窗口左下角的“永远”改为“一次”。小技巧：鼠标点击100次以上着实脑残，大家可利用ps的动作功能，重复此动作即可。具体可参考：<span style="margin:0px;padding:0px;color:#1f75cc;">photoshop如何批量处理图片？详解ps动作工作</span> 。效果如下：

8.制作完毕，点击文件-存储为web和设备所用格式，在弹出的页面中选择GIF格式，保存即制作完毕。

糖豆双击有惊喜

如图，动画窗口最后一帧图片为封面，前面100帧为双击后显示的效果。以上教程和方法均为本人原创并测试真实有用，请大家仔细参照教程制作。

素女时代（sunv.cn）收集于网络，如遇版权问题请联系客服。