八音盒的上半部分，是七组城市的流畅变化，下半部分是为这七个城市生活带来便利的西门子业务。

为了做到流畅这短短的几十秒，在动画的部分甚至需要精确到半秒来制作。虽然是大家无法直接看到的细节，但是带着匠人之心…来自NIX团队的Nixer们还是强迫症般的做了。

接下来就一起来看看这几十秒是怎么“偏执”出来的吧。

Client：SIEMENS

Agency：NIX Studio

Creative Director：朱青

Animation Director：木木

3D Sketch：Tracy / 李明辉

3D Design：Yuko / Tuparke

3D Animation：杨泽坤 / 攀攀 / UKll

AE Animation：木木

Music：刘天义Studio

Illustration：熊猫

Copywriting：某花

先看一个最终完成效果后剪辑出来的小视频

https://v.qq.com/x/page/c05100v5g4t.html

一、整个H5最初的样子？

在最初的时候，我们主要考虑到西门子的业务是城市发展的幕后支撑，是不被大家看到的智慧。所以八音盒这个元素被我们看中，圆形的八音盒上面是展现的城市，下面是内里的运转。

而在最下面，用一个城市长图，体现出城市“群”的概念。会根据八音盒城市而自动移动到相关的位置。

二、以半秒为单位计算的3D动画，制作过程是什么样？

1.草图-精致草图

最初必须绘画草图，并且绘画草图的时候就要考虑到动态设计。大概长以下这样。

在沟通清楚之后，开始绘画精致草图，因为如果不画精致草图，3D同学并无法想象出来最后想要的效果…虽然，我们画的精致草图，真的有点太精致到3D很难实现的程度吧…在画完之后，建模了P1，效果还不错。

精致草图是真的很精致就对了…

2.视觉风格的探索

实际上，视觉风格在一开始我们找了不少ref，也不是一开始就确定用c4d来制作。在大海捞针的找了许多“现代感”风格的案例之后，都觉得还是有点“俗套”。

来看看那些看着都差了点意思的视觉ref…（弱弱：当然其实这些ref都是很高水平的！

所以，最终总结出来一个问题，就是在做一个创意的时候，如果用已有的ref直接作为参考，会带来的问题一个是可能最后无法追到这个ref的效果，最重要的是，现成的东西是无法直接贴合原创想法的！

然后就大概做了一个结构小样，类似原型图。颗颗，下半部分一开始就是其实想的有个大屏幕，现在看起来真是……呃，失态了。

最后我们决定用C4D进行三维建模制作，在看遍了能找到的参考后，也无法直接找到符合我们这次方案想要到达的“优雅且高科技”的感觉。虽然这个感觉到底是什么感觉，到了现在我们也还是没有定论。

在这样的前提下，自己动手丰衣足食，我们开始了自我探索之路。果然世界上最近的道路是套路，但是能走的好的只能是自己走出的路啊。当然探索的过程中也有很多不忍直视的方案。。

下半部分一直在纠结，一些无法直视的方案…

底部城市的图呈现出来的效果也经历了不少的挣扎。

最后的最后，我们终于把主场景的图给做出来啦！锵锵锵~

3.用生命+生命+n条生命做动画

做动画这件事就是一件让人又爱又恨的事，爱的是你做出来一个动画的成就感和喜悦感，恨的是在做的过程中真的很辛苦很累，尤其是渲染了三天三夜出来的素材最后又发现bug的时候…

所以在一次次的崩溃中，我们最终完成了初版的动画。

AE小伙伴进行最终的合成也是无比辛苦的事情，因为3D直接导出的素材bug重重，AE进行最终的后期合成往往伴随着修修补补的感觉，有种修补匠的感觉，有图为证…

4.技术难点

这一次最难的部分，当然是在于每一组动画的自循环和每一组动画之间的流畅衔接。因为用户在停留在当前页面的时候，画面上要一直有动态，然而这个动态如果不是循环的，就会一直跳。但是当用户点击下一页的时候，如果不是流畅的过渡，也会觉得没有sense…

因此，最终给到技术同学的制作要求大概就长成了这个样子…

P1.【循环5s】0-125(共5s125帧)循环

P1-P2【过度4s】126-224散开聚拢(4s)

P2【循环3s】225-300(共3s75帧)

P2-P3【过度2s】301-349散开聚拢(2s)

P3【循环3s】350-425(共3s75帧)

P3-P4【过度2s】426-474散开聚拢(2s)

P4【循环3s】475-550(共3s75帧)

P4-P5【过度2s】551-599散开聚拢(2s)

P5【循环3s】600-675(共3s75帧)

P5-P6【过度2s】676-724散开聚拢(2s)

P6【循环3s】725-800(共3s75帧)

P6-P7【过度2s】801-849散开聚拢(2s)

P7【循环3s】850-925(共3s75帧)

*C4D工作界面

5.开场BOX

开场这次做了一个摄像机动画从在一个城市穿梭，最后拉远变成是在一个音乐盒上方俯瞰，最终进入盒子内部。画面中上方的模型都是用后面的模型，但是也并没有节约多少力气…因为模型量太多，导致电脑十分卡顿哈哈。

不过看到硬渲之后的效果…大家也都还是很激动的。

6.城市长图

这一次在底部的城市长图也是煞费苦心，完全根据上面的建模来绘画制作，根据八音盒的变化下面的长图也会跟着变化。真的让每一个停留画面都有可以看的地方~

7.提分项 - 原创音乐

因为现在使用音乐基本上都是直接购买现成的音乐了，所以这次的H5项目，我们坚持使用了原创音乐，也是一件很加分的事情。

在音乐上，定位是在八音盒结合科技感上，其实乍听之下很难想象音乐是什么样…八音盒的音乐一般都是比较优雅的感觉，但是科技感又很电子。不过最后顺利完成的时候，大家都觉得很好听。

三、最终上线

西门子音乐之城在实际制作一个月之后最终愉快的上线了。

正如大家现在所看到的样子！

*因为序列帧的多少问题，gif导出速度比较快

话痨写了几千字终于总结完毕，谢谢大家的观看。

可以扫描二维码点击进去观看H5

谢谢支持啦~~