- 0
- 0
- 0
分享
- 为什么静态图会动?
-
2020-03-07

Hi,我是铅笔。
俗话说,耳听为虚,眼见为实。但也不乏被眼睛欺骗的例子:有人用动起来的静态图来测试心理压力。
下面这张图片与大家的心理压力有关,你的心理压力越大,下图中的蛇转得越快。

事实上,像这种所谓的心理学测试实际上就是一个骗局,这就是一张简单的静态图,并不是GIF。
ASSUME。01
但为什么静态图会动?
周边漂移错觉的现象。
这种现象可能涉及到眼球运动和神经生物学机制,目前有一些理论来解释这种现象。
比如,外界信息传递到眼睛里,经过大脑处理,让人意识到看到了东西,这需要一段时间,这段时间就称作反应潜伏期,代表了人的视觉对外界信息刺激的反应过程。

而人识别高对比度(比如黑与白)比识别低对比度(比如深灰与浅灰)的潜伏期更短,当高对比画面与低对比画面同时出现时,就显得我们先看到了高对比画面;或者也有人认为,人的视觉一般有两种状态,扫视和注视。
像照相机一样,照相机本身移动时成像是模糊的,静止时才能清晰地成像 。
当人转动头或者眼球运动时,视网膜上的成像同样是模糊的,这个时候大脑就会对视觉进行补偿,根据实际情况生成一段类似的信息给补上,以保持我们感受世界的连贯性,而且即使是在注视的情况下,人的眼球多少还是会有一定的运动。

总之,不管这个现象背后生物学原理具体是怎样的,一定是与规律性的明暗变化,和人自身的眼部运动有关,而绝非什么心理压力导致静态的图动了起来。
「本文引用“中科院物理所”,已经原作者授权」
ASSUME02
如何让静态图动起来?
搞懂AE曲线,让动效更有趣
前不久,东京奥组委、残奥组委公布了73个奥运比赛项目的动态图标,视觉效果堪称惊艳!
图标先以碎片的形式,从白色背景中出现,完成动作后又以碎片化形式消失,回到最初的空白帧让人意犹未尽。


没有一点多余的修饰,仅用最简洁的图形,就巧妙地传达出每项运动的特点,同时把运动员充满活力的姿态展现得
栩栩如生。
有同学问我,这种动效是怎么做出来的呢?所以今天也给大家介绍一点动效知识:AE曲线。
位移速度曲线
速度曲线表示物体移动速度随时间的变化关系,横坐标表示时间,纵坐标表示移动速度,四种速度曲线:匀速运动,缓入缓出,快~慢,慢~快。






旋转的速度曲线
旋转的速度曲线表示物体的旋转速度随时间的变化情况,匀速旋转曲线也可以作出很好看的动画效果。




ASSUME。03
如何让静态图动起来?
Processing让名画动起来
达芬奇的「蒙娜丽莎」笑了几百年终于可以不笑了;蒙克的「呐喊」终于可以歇歇嗓子了;梵高的「星空」终于互动起来了...

这个过程主要是模拟自然界风吹的时候用到了柏林噪声,用这个方法产生的力来模拟自然界的风力会非常的自然。
processing中的「noise」函数可以产生柏林噪声,接收x,y,z三个坐标分量作为输入,并返回0.0~1.0的「double」值作为输出。
关于风的参数「参考openprocessing.org」



示例中“多个小球”汇聚在一起又离开,从而想到如果这个小球有特定的图像,赋予不同的贴图图片,比如贴上的是不同的人脸,那么这个示例就可以表现一些人员流动和人格魅力的吸引力。
目标定在了有运动联系的群组图元,并且受到不同风速的影响,模拟图元构成的画被风吹动的效果。
读入JPG图片

绘制元图

让静态图动起来的方式有很多种,本次举例是让名画有被风吹动起来的效果,还可以让名画顺着其自身轨迹运动与人互动。
确认过眼神
是不会写代码的人

PENCIL 七节课系列课程即将上线咯~
看看我们往期分享教程文章
联系铅笔咨询课程详情
-
阅读原文
* 文章为作者独立观点,不代表数艺网立场转载须知
- 本文内容由数艺网收录采集自微信公众号PENCIL新媒体艺术 ,并经数艺网进行了排版优化。转载此文章请在文章开头和结尾标注“作者”、“来源:数艺网” 并附上本页链接: 如您不希望被数艺网所收录,感觉到侵犯到了您的权益,请及时告知数艺网,我们表示诚挚的歉意,并及时处理或删除。