【Scratch工具介绍】扩展知识:画面是怎么“动”起来的?
在《小恐龙祝你生日快乐》的实例中,大家知道了循环切换角色的造型可以实现恐龙跳舞和烛光摇曳的动画效果,而且如此操作后确实有效。那么,你有没有思考过,为什么这样做就会出现动画的效果呢?
本文将会涉及到视频、动画等的基础原理、视觉残影、视频帧率等内容。
01 从静态图到动画动画、电影、电视剧等任何形式的视频,都是由一张张的静态图片串联而成的,将视频静止(如,暂停)在任意一个时间节点上,看到的都将是特定的一张图片。
随着技术的发展,视频制作的方式在发生变化,也许是数码设备拍摄、也许是电脑绘图、亦或是其他,但是追溯到原始的胶片电影,会帮助我们更好的理解动态画面的本质。
胶片的每一个小格子(也叫帧,下文会讲到)都记录着一张影像,并且和它相邻的格子记录的内容只有微弱的差别,拍摄和放映时按照相同的进度,即每秒放映的格子数量,就能回放原始的连续动画。
这个技术其实并不高端,我上小学的时候就流行过类似事情,并且很多同学都自导自演完成了人生中第一部动画片。
在作业本的每页页脚画上简笔画,完工后快速翻动作业本,画面就“动”了起来
理解了动画的原理,再来看下更专业的定义吧
02 视觉暂留动画是指由许多帧静止的画面,以一定的速度(如每秒16张)连续播放时,肉眼因视觉残象产生错觉,而误以为画面活动的作品。为了得到活动的画面,每个画面之间都会有细微的改变。
来源:wikipedia
上面的“动画”概念定义说明了2点内容:
-
动画制作的方式:许多静止画面连续播放
-
动画连续感的原理:视觉残象,又叫视觉暂留
什么是视觉暂留?
视觉暂留(英文:Persistence of vision)也称为正片后像,是光对视网膜所产生的视觉,在光停止作用后,仍然保留一段时间的现象,其具体应用是电影的拍摄和放映。原因是由视神经的反应速度造成的,其时值约是1/16秒,对于不同频率的光有不同的暂留时间。是动画、电影等视觉媒体形成和传播的根据。比如:我们日常使用的日光灯每秒大约熄灭100余次,但我们基本感觉不到日光灯的闪动。这都是因为视觉暂留的作用。所以,要达成最基本的视觉暂留效果至少需要10fps。
来源:wikipedia
现实生活中,我们经常遇到“视觉暂留”现象,比如,你盯着太阳或者其他高亮的光源看一会,再转而看其他物品时,视野中仍能看到之前的亮光源,一会后这个光源逐渐从视线中消失。
电影、动画等视频正是利用这个现象,让观看者视野中的图像形成连续感,此外,对于动画这种相邻画面可能差异较大的视频(因为每张图片都要绘制,成本高),视觉暂留仍能让人感觉画面连贯,无法发现画面中的缺失。就比如之前实例中的“烛光摇曳”,其实蜡烛只有2个造型,一个烛光饱满、一个没有烛光,可在我们的视觉中,蜡烛却是忽闪忽闪的,好似不止2个造型存在。
另外还有一个比较著名的例子和这个现象有关,在聪明的一休哥动画片中,有一集一休哥遇到了一个难题,他需要将一副画中的小鸟放到另一幅画中的笼子中,最终他的做法是这样的:
扇子的反正面分别是鸟和笼子,快速转到扇子,看着扇面,感觉小鸟进到了笼子里
03 帧率前面2个从维基百科摘录的概念,出现“帧”、“帧率”、“fps”之类的名词,它们和视频的关系至关重要,并且在日常生活中也是高频词汇。
帧(frame)是指视频的每一张画面,比如上面提到的电影胶片的一格。
帧率,是用于测量显示帧数的量度。测量单位为“每秒显示帧数”(Frame per Second,FPS)或“赫兹”,一般来说FPS用于描述视频、电子绘图或游戏每秒播放多少帧。
来源:wikipedia
人类视觉的时间敏感性和分辨率根据视觉刺激的类型和特征而变化,并且在个体之间是不同的。由于人类眼睛的特殊生理结构,如果所看画面之帧率高于每秒约10至12帧的时候,就会认为是连贯的(视觉暂留)。这也就是为什么电影胶片是一格一格拍摄出来,但是借由快速播放,能让画面看起来是连续的。
不同的视频/动画类型,想要保证流畅感的话,对帧率的要求是不同的。
现在的电影、电视剧帧率均为每秒24帧,早期的无声电影更低,介于16到24帧/秒之间。然而,游戏画面,以及手机APP页面刷新帧率要60帧以上才能让用户有流畅的体验。在一些低端手机上玩王者荣耀之类的手游,经常会出现界面卡顿,或者出现不连贯感,这就是所谓的“掉帧”、“丢帧”,当然,一些高端手机在某些场景下也会出现掉帧现象。
游戏需要60帧而电影只需要24帧的原因,主要有2点:第一个原因是
两者图像生成原理不同;第二个原始是,电影的帧数是稳定的,而游戏则是不稳定的。
END
—
总结
综上所述,我们得到一些提示。当我们编写Scratch动画时,如果想要得到流畅的动画体验,可以考虑从两个方面进行改善:
-
相邻图片(角色的造型)的差异不能太大,差异大会导致动作跳跃,所以,图片越多越好
-
每秒帧数要合适:帧数太少了会卡顿不连贯,太多了又可能会变成“快进”,让人看不清。帧率体现在造型切换之间的等待时间上,具体数值和第一条结合确定
--end--
声明:本文章由网友投稿作为教育分享用途,如有侵权原作者可通过邮件及时和我们联系删除:freemanzk@qq.com