素材:
期望效果:http://v.youku.com/v_show/id_XMjY2NTc1MzYw.html
一开始需要制作这个动画的时候,其实我是拒绝的,因为单凭这几个素材,即便我对动画了如指掌,也是无从下手的。后来有一天,我见到了 wow 军团再临的 CG 动画,脑海中突然灵光一闪,便出现了这样的构思:
“ 穿越重重的云层,伴随着白天到黑夜的转化,logo 从遥远的地方出现,随后往屏幕方向快速移动,在 logo 快要充满整个屏幕的时候星光一闪,又消逝在远方...”
于是我开始了开场动画的坎坷历程。
云层制作:
云层的制作耗时比较久,期间参阅了网上一些使用 CSS 模拟云层的博文及示例,下面列出两个比较好的示例:
移动的云:https://codepen.io/montanaflynn/pen/orxwK
3D 云:https://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d
实际上使用单图片来模拟云层会有一些体验问题,比如,当我们试图穿过一片图片生成的云时,会感觉一下就没了,对用户而言会产生一定的视觉落差,而真实的云层是一片区域,所以一片云我使用了 5 张图片转换方向来生成,这样在三维的场景下我们的云就有了充实感。
下面引用一段 Jaume Sanchez Elias 写的 3D 云的生成代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
function createCloud() { vardiv = document.createElement('div'); div.className = 'cloudBase'; // 随机定位当前云团位置 var t = 'translateX( ' + random_x + 'px ) ' + 'translateY( ' + random_y + 'px ) ' + 'translateZ( ' + random_z + 'px )'; div.style.transform = t; world.appendChild(div); for (varj = 0; j < 5 + Math.round(Math.random() * 10); j++) { varcloud = document.createElement('div'); cloud.className = 'cloudLayer'; // 随机产生云层的'translateX/translateY/translateZ/rotateZ/scale // CSS值,这里是云团充实感的关键实现 cloud.data = { x: random_x, y: random_y, z: random_z, a: random_a, s: random_s }; var t = 'translateX( ' + random_x + 'px ) ' + 'translateY( ' + random_y + 'px ) ' + 'translateZ( ' + random_z + 'px ) ' + 'rotateZ( ' + random_a + 'deg ) ' + 'scale( ' + random_s + ' )'; cloud.style.transform = t; div.appendChild(cloud); layers.push(cloud); |