Apple 美工居然用 122 张图片制作 2 秒钟 MG 动画

iLAndroid:
原理：通过代码来播放png序列。png序列就是一堆png图片，一个图代表一帧，一堆png就是一组序列。就好像以前玩的动画书一样，迅速翻动变成动画。好处就是比GIF保存的动图质量更好，体积更小便于网页加载，而且可以通过代码来正放，倒放以及随意暂停开始，附和浏览网页时的习惯。许多网站的许多动效都是这个原理，比如b站网页端的三连、投币、和正在加载的小电视。

【回复】但是体积巨大吧，每帧都是没压缩的图片，不适合做长视频
【回复】回复 @iLAndroid :谢谢科普，讲的清楚明白[脱单doge]
尓惹儿:
确实尬吹了，我把你的视频导出成图片，一共3544张图片，其中展示苹果电脑的，我导出了521张图片，这么看起来，我比苹果的美工还精致[doge]

【回复】回复 @野生苹果技术协会 :“拍摄而成”可还行……这种动画业界都是用3D建模后渲染而成的。建模，贴图，打光，然后出视频，就像3D动画片的制作流程一样。要想让屏幕的内容变化，那就在贴图上下点功夫。最后渲染视频，导出图片序列。如果你真想明白先有蛋还是先有鸡，你可以去了解一下3D动画的制作流程。友善提醒一下，从你的发言来看，你要学习的还有很多，加油[打call]
【回复】我想要说明的是这个视频是由122张拍摄而成的照片制成的，要想明白先有蛋还是先有鸡[辣眼睛]
【回复】回复 @-_-ill :关于这个问题确实有可能从视频转出的图片，但也有可能从图片制作的视频。经过大家的讨论和反复的查看，我也认为这有可能是一个3D模型导出的。但我也查看更多苹果官网其它产品的动画，全部不是采用的这种格式，而是一种乱码样式的图片，我不了解原因也得不出来结论。我比较了24寸iMac的动画，是采用的视频格式，而那个一眼可以看出是3D模型渲染出来的。只有16寸MacBook Pro这个网页动画的源文件是由这么多图片构成的，这是一个孤例，所以我才会那么判断，也可能我的判断有误，但是我认为3D渲染出来那么充足的细节是很难的。另外也不要拿自己的经验来衡量这群不羁成本的人，他和我们的工作流程不一定一样。明天晚上这个页面可能就下线了，我们的讨论也就这样了，我们都只是在猜测，我不比你高明，你也不比我高明。认真才能做好事情。[OK]
CDTony:
这是序列帧，在网页特效里经常使用的，可以是连续拍摄的定格动画或者是视频分解导出的序列帧，或者是3D软件渲染的序列帧。视频就是由序列帧+音频合成的，做序列帧动画可以说是很多设计师的基本功

隔壁家の哈布:
毕竟展示给全球用户看的页面 不做精致点

【回复】回复 @野生苹果技术协会 :才高端笔记本1w8不算贵
【回复】是啊，精致的东西才会有人喜欢，否则要找个什么理由花18000大洋呢[尴尬]
ParadoxKr:
那不叫没美工，其次视频序列，就好像你打开gif也是非常多图片，实际上视频就是每秒多少张图，所以没存在很大的工作量，

【回复】回复 @yacht-zhao :说真的，百度下，很多啊，ppt插入多张，序列帧，都有的
【回复】回复 @yacht-zhao :额，你还是不要评价自己不太熟悉的事情了，windows的视觉设计，在全球也是排得上号的，windows很多超前的美工设计，也是有的，都是被领导层给砍掉了，其次，现有图片和现有视频，现在除非是手绘动画帧数，不然都不会太大，而且你都不知道122张图放ppt的快捷办法，还是建议不要瞎评论把。。。其次现在的制作工具，都能很快捷的图片-视频，视频-图片。而且你说叫美工屈才，又喊美工是apple员工的基本素养
【回复】回复 @ParadoKr :我只能告诉你我每次都是一张张放进去的，每一张的位置都要调整几个方案，进入方式，退出方式，也都要做不同的方案进行比较[藏狐]
洛梓风anemo:
很细节的是看Touch Bar，是跟着动画播放的

【回复】在视频中感觉不明显，在网页中随着自己的滑动变化那个流畅感很是解压[呆]
上课睡觉氏:
果子的广告一直感觉有种和别人不一样的感觉，有点像翻译腔怪怪的，倒是有趣

删库然后跑路:
其实打包成zip，然后用zipjs加载后用canvas播放应该对服务器更友好