gif动画闪动闪烁问题分析

听柳

                                   gif动画闪动闪烁问题分析

  前些日子肖燕老师我们在探讨动画的时候，谈到了有些gif动画在运行中会出现画面闪动、抖动或画面闪一下的现象，并且这个话题引起了我们的共鸣。我们在网上看到的动画和发在咱们版面上的动画，都会时不时的出现这个问题。出现这个现象的原因肯定有很多，但究竟都有哪些原因呢？

      这几天我一直在思考这个问题，并为此制作了几十个小动画，通过反复测试、分析，并对比出现闪动和无闪动的动画，发现了一些规律和原因。我现在由于没有完整的时间，只是利用零碎时间断断续续地做这些事儿，所以迟迟未能行文。下面谈谈我个人的体会，也算是给肖燕老师交的作业吧。个人理解错误或不全面的地方，欢迎各位老师指正交流补充。

  我们一起先回忆一下动图出现画面闪动、闪烁、抖动是什么状况吧？发几个我故意制作的让画面出现闪动、闪烁或闪白的动画，再发一个AI生成的视频转换成的gif动画，这些动图出现的画面的闪动、闪烁和闪白现象，相信大家都不陌生吧？

图1（动画中误插入空白帧）



图2（首尾帧位置跨度较大导致首尾衔接不连贯）



图3（首尾帧位置跨度较大导致首尾衔接不连贯）



图4（首尾帧之间过渡太突兀导致首尾帧衔接不自然）



图5（首尾帧角色形状不同导致画面闪动）



图6（首尾帧颜色不同导致画面闪烁）



图7（这就是所谓的全景动画，首尾帧处风景相差巨大，循环播放时致首尾帧衔接处画面变化突然而出现画面抖动感）



图8（这个是即梦AI生成的动画。画面中首尾帧人物位置相差甚远，导致循环播放时首尾帧衔接处无法自然衔接而给人以画面跳动感。）

听柳

       通过观察分析，我们可以发现画面出现闪动、闪烁或闪白的动画，原因并不是单一的。

         1．动画的第一帧和最后一帧画面元素的位置、颜色或形态上存在明显的差异，导致循环播放时出现视觉跳跃，从而感觉画面闪动或抖动了一下。即使首尾帧视觉上相似，若存在1像素的位置偏移、透明度差异或图层残留，循环播放时会因微小跳跃产生闪动。

比如图2和图3，我故意制作了两个不同的画面，图2是长方形画面，小球水平运动；图3是圆形画面，小球环形运动，但问题都是一样的：即首尾帧位置相差太远，循环播放时首尾帧衔接不上而出现画面闪动。

  以图2为例，第1帧放个球在画面的最左侧，最后1帧在画面中间稍偏右的位置，播放时这个球还没有滚到画面最右侧，更没有滚出舞台，就又重新返回画面的左侧再次向右滚动，肯定会出现画面抖动闪动一下。

    只不过球是轴对称图形，虽然出现闪动，我们的视觉上还不是太明显，如果是其他不规则物体（如图4）、不同的形状（如图5）、不同的颜色（如图6）、不同的风景画面（如图7），则视觉跳跃会更明显。尤其是用AI生成的动画，不管是风景动画还是人物动作动画，由于动画帧数较少，画面的第1帧和最后1帧的画面差别巨大，循环播放时，画面从尾帧跳回到第1帧再次循环播放时，首尾帧画面肯定会结合的不好，甚至根本无法吻合，肯定会难以避免的出现画面闪动。这是发在咱们版面上的个别动图画面出现闪动最常见的原因。

       明白了其中的原因和原理，我们就会有对应的解决办法了。比如上面说的图２那个滚球的动画，要确保最后一帧的球完全移出画布右侧（如位置坐标等于画布宽度+球自身宽度），而第一帧的球从画布左侧外开始，形成无缝循环路径。我们要考虑优化首尾帧设计，首先要内容衔接：确保首尾帧的主体位置、形态接近（如首帧角色向右移动，尾帧角色应处于循环起始位置）。其次要色彩统一：调整首尾两帧的亮度、色调一致性，避免色差导致闪烁。

  其他不同画面的动画，如移动的风景动画（全景动画），小动物、飞鸟、游鱼、人物等活动的画面等等，都可以按这个思路去处理。不过，对于AI生成的动画则处理起来太难，例如用AI生成一个几个人跳舞的画面，第1帧画面中的人物刚举起手，然后第2帧第3帧等继续举手，而最后1帧变成刚要踢腿的画面，循环播放时，就会突然由踢了一半的腿还没落地的画面，突然变成了腿早已落地又扬手的画面，出现画面中播放到最后跳舞的人刚踢起腿却因循环到了第1帧。遇到这种情况如果我们可以在画面的最后再添加几帧人物踢腿后又能落地又举起手的画面，再循环到第1帧时，正好和第1帧刚好扬起手的画面紧密贴合，就不会有画面闪动的现象了。但像这种需要添加几帧画面以达到和第1帧画面吻合的处理，对于简单的画面我们完全可以这样做，而对于复杂的画面并不容易，比如上面举例说的跳舞的画面，添加几个帧的时候，除了考虑主角的举手抬腿等动作首尾要吻合，还要考虑背景画面的变动是否首尾吻合，如果是多人画面还有小动物等复杂的画面，更得统一考虑首尾帧交接时画面都要吻合，这处理起来是非常复杂的，所以大多只能不处理了。

     多帧动画在制作过程中，如果其中的某一帧或某几帧画面中动画元素出现移位、错位，或颜色出现改变，或不小心加入了空白帧，也会在动画循环播放时出现画面闪动。解决的办法就是在制作时避免出现这种情况，如果有空白帧，删除这多出来的空白帧后闪白就消失了。

　　２．在一个gif动画中，需要添加另一个gif动画时，为了达到作者想要的效果，肯定会调整新加入动画的位置和大小。但如果在移动新添加的动画位置时，仅移动了第1帧，其他帧还保留在刚导入画面时的位置，在循环播放时肯定会出现较明显的画面闪动，如果位置差别过大，则会出现很奇怪的播放画面。解决的办法是如果新导入的gif多帧可以整体移动时，就整体移动到画面中你想放的位置，比如Flash中就可以整体移动新导入的gif动画。而在ps或U5中，我们通常一次只能移动1帧，我们可以选中第1帧，把需要移动的对象放到需要的位置后，在U5中我们可以选择“与对象重叠帧同步”，在PS中我们可以选择“跨帧匹配图层”，这样在第1帧把对象移动到需要的位置后，其余帧也自动移动到相同的位置，而不至于出现画面错位而闪动了。

　　３．其他因素。动画帧数太少、动画帧率与导出设置不匹配（如24帧/秒的动画以30帧/秒导出），会导致播放速度异常引发跳跃感；过渡帧处理缺失；首尾帧透明区域未完全对齐。也有资料提示美图秀秀的闪图工具仅支持手动添加静态帧，无法自动生成首尾之间的动态过渡效果（如渐隐、位移补间），导致画面跳跃。

听柳

根据上面的分析，我们可以根据动画的原理，根据动画出现闪动的原因，在我们能力范围内尽可能地加以修改调整，能够消除很多动画中出现的闪动或闪烁现象。

以图3为例：环形运行的小球，出现闪动的环形运行的小球是首尾帧处距离过远，只要将尾帧处的小球移到距首帧处和小球不要太远，距离合适（尾帧放小球放的位置，要考虑帧频<我这个动画的帧频是每秒12帧>和小球自身的直径），就不会再出现闪动了。

  

环形运行的小球出现闪动，首尾帧位置过远。

将尾帧处小球移到合适的位置

下面把上面的几个出现闪动、闪烁或闪白的动画，经过修改和调整，看看效果如何？仔细看，闪动、闪烁或闪白是不是不明显或消失了？

水平运行的小球修改后的效果

立方体运行修改后的效果

环形运行小球修改后的效果

图7那个风景水平移动扫描效果（全景摄影效果），制作成动画后画面出现闪动，由于这是画面复杂的风景图（位图），并不是矢量图，所以无法单独移动风景图中的某一个局部，即使能移动画面也会乱七八糟。这时我们利用图片拼接的方式来改变画面左右侧的内容，以达到首尾完美相接，消除闪动。

这是图7那个模拟全景摄影动画的原图，可以明显看出画画左、右侧风景差别巨大。

将上面那张原图用三张水平拼接到一起（其中第2张水平翻转）

拼接完成后，再制作成动画，看看效果，这次不闪动了吧？

至于AI生成的动画，由于帧数较少，时长较短，画面复杂，修改、调整和添加过渡帧以消除闪动更是不易，是否修改调整，只能是根据作者制作动图的水平而决定了。

  咱们版面制作动画，每人习惯使用的软件不太一样，我习惯使用Flash、PS、U5、3D和水波软件，有的老师还擅长使用美图秀秀和剪映等。虽然每款软件的特点和特长不太一样（如剪映有叠化转场等），但制作gif动画的原理是一样的。由于不同软件的界面和操作是不相同的，大家可以根据gif动画的原理和引起画面闪动的原因，根据这个思路结合各自使用软件特点的不同，采取各自相应的方法去解决。

听柳

以上只是我个人对动画出现闪动、闪烁或闪白的一些理解和见解，也算是给肖燕老师的一份答卷吧，难免会有错误或不全面，恳请肖燕老师和各位制图高手指正和补充。

沧海笑

做动画时，在首尾帧衔接时把时间缩短一些，这样跳动的情况就不太显眼了，这是我摸索出来的一点经验，供参考！

肖燕

非常感谢听柳版主花了如此多的时间和精力，对gif动画闪动闪烁问题进行了专业和详细的分析。您简直可以说是一个动画学习的专家了！您说的修改方法我看了一下，确实有效可行，问题是大家不一定能操作。就拿我来说吧，添加动画基本上是“拿来主义”，也就是直接将得到的动画添加至美图秀秀或剪映，与其他图片、动画进行组合，调整帧数、拼接图片等我基本上没搞过。估计有些网友跟我的情况是一样的。如此，想要修正动图闪动闪烁问题可能就比较难了。我们有可能学到一些调整帧数、拼接图片的方法吗？再次感谢听柳，向您致敬！

听柳

沧海笑 发表于 2025-3-14 09:44
做动画时，在首尾帧衔接时把时间缩短一些，这样跳动的情况就不太显眼了，这是我摸索出来的一点经验，供参考 ...

沧海笑老师说得对，首尾帧衔接处时间缩短一些，确实可以使动画的跳动不太明显。谢谢沧海笑老师的补充。
一般来说，影像在视网膜的视觉暂留时间大约在0.1至0.4秒之间，而人眼能处理的帧频范围在24-60帧之间，当我们以一定的速度将一连串画面不同的静止的画面播放的时候，我们就感觉到了原来静止的画面已经动起来了的原理，这也就是电影胶片在以一定的速度（每秒24帧）播放时画面会动的原理。根据这个原理，我们在制作动画时可以综合考虑。

听柳

肖燕 发表于 2025-3-14 11:19
非常感谢听柳版主花了如此多的时间和精力，对gif动画闪动闪烁问题进行了专业和详细的分析。您简直可以说是 ...

若利用U5、PS、Flash等软件自己制作的动画，我们自己调整的范围要大一些。“拿来主义”估计不太容易修改，只能根据添加到不同的软件中时，利用各个不同软件的特点，来尽量减少闪动，比如剪映有转场等。至于图片的拼接，可以将一张图片水平翻转后再拼接到一起，这个在PS和Flash中都可以轻松做到，我上面那个图片拼接是由三张图片拼接到一起的，其中一张水平翻转，这样拼接图片后给人的感觉是视野非常广阔的，动起来会给人一种全景摄影的效果。老网玩PS的老师应该很多的。
谢谢肖燕老师的肯定和鼓励！之前答应了您的事儿，不完成总觉得有欠钱不还的感觉，交卷后真的有无债一身轻的感觉。

肖燕

听柳 发表于 2025-3-14 11:41
若利用U5、PS、Flash等软件自己制作的动画，我们自己调整的范围要大一些。“拿来主义”估计不太容易修改 ...

是的，自己制作的动画要容易修改一些。就这样吧，大家开心就好！都怪我，乱提问题，让您辛苦了这么久，太不好意思了！道歉！

黑土恋

向听柳版主学习！本人另发文专门谈谈感想。