Home / Blog / note

植树节活动的一些总结(动效)

Author: Vic.Wang 2016/03/12 Tags:noteanimationmake动效动画效果

关于植树节的活动:

那天拿到视觉稿,瞄了一眼,这种风格对我胃口,对于视觉稿,我向来很挑剔的,什么样的视觉稿决定了什么样的产出。当这个任务给我的时候,我就已经决定要将它做好,尤其是当某H说了句期待你做的动效。

9号开始做的,11号晚上上的线,时间还是有些紧的,期间还进行了一次大改。开始做的那天我真不是有意表现自己很辛苦。。。(像我这么低调的人,大多数是在幕后工作,自己要是不说没有多少人会知道我做了些什么的)实在是公司的显示器太渣,视觉稿中有很多云层,设计MM跟我说有很多图层都是分开的,但那显示器根本就看不到,切出的图里会漏掉某些或多切了某些,只好下班带回家切,弄着弄着就凌晨3点了,那会还挺精神的没什么睡意,想到第二天还得上班就睡了,睡前顺手在朋友圈发了条消息。。

关于动效制作的过程:

出的第一版的效果是5屏的,后来改成了1屏,调整幅度还是大的,第一版的时候花了很多心思,动效之间的衔接也是最好的,和最终版比流畅度在自我评定里面差了2级左右。

临时改的那版,没有那么多时间细细品味动效衔接了,有一部分因为某个特效和某个特效之间的动效去掉了造成了迟滞,有的因为调整了时间参数影响了整体性,总之,就那么匆匆的上线了。

最后还发现了微信一个坑死人的BUG,iPhone手机的识别二维码,在某些情况下识别区会偏移的很厉害,能偏移好几个二维码图的位置,造成的效果就是按了没反应,查了资料搞的偏方勉强解决了iPhone6上的问题,5下面的还是有问题的,这个问题还是要深入的找原因和解决办法。

这次的动效还是有很多可取之处的,不知道看过的1200个人里面有人注意到背景的星星会闪烁么,估计很少甚至没有吧。

地球污染的时候,上面是有很多浮尘,地球变绿的过程中浮尘减少了一半,地球完全变绿浮尘都去掉了,换成了一大块飘动的云。在整个过程中,有几块小云是一直在运动的,你不仔细看是发现不了。

最初还有烟囱冒烟的效果,设计MM说这个效果不好就给去掉了,我觉得还可以。

最不满意的要数首屏的地球滴水的效果,那是两组动画连起来的,处理的不好,缺了几帧的样子,两组动画合成一组,从上滴下由小变大,我觉得效果会好很多。

点睛之笔应该是水滴从叶子上滴落到地球上,然后地球慢慢由污染扩散为绿色,天空也变成了蓝天白云,个人觉得滴的过程最好的应该是第一版的第三屏,那里的滴落扩散效果处理的相当完美,整合成一屏后,有点不衔接了,尤其是最终变绿的过程。

树叶飘动的效果是唯一的用了别人的特效,这个效果我现在都没搞清楚怎么弄的,还得花点时间鼓捣鼓捣。

有个水波效果,算是搞懂了,之前在微站首页产品哥要求的效果,结果实现的一点都不好,简直是差评中的差评,这次算是解决了,但不知是不是因为太小了,IOS系统下看上去并不是很圆,有点菱形感觉,这也是要查找问题所在的。热气球的效果也不怎么满意,升上去回来的时候有跳动感。这次动效给八二开,8分满意,2分不足。

动效的感悟:

动效的难点不在于某个具体的效果,而在于动画之间的衔接。再难再复杂的效果只要有思路、有想法、有时间总会有实现的方法,具体的做法反而是细枝末节。

而动画衔接靠的完全是感觉,你只有一遍一遍的看,不断的调整动画各项参数,运行速度、延迟时间、持续时间、运动方式、重复运动、方向运动、透明度、颜色、背景、字号、形状、平滑、缓动、强烈、冲击力,各种参数不停的组合,直到得到满意的效果,真的很费心思,要想得到行云流水般的效果,花的时间和精力真的不是一点一点的。

对于CSS3的动画特性,并没有多少熟练程度,之前做的效果不多,最佳东方11周年的时候,有些动效还是做不出来的,仅有的一些效果也很生硬。

进入中均后刚开始做的是指尖海报系列,第一期的大白,做的很勉强,一开始的时候只有Word文档,强烈要求下帝都的同事给了些AI的图,这让我吐槽的厉害,各种尺寸完全是对不上,用平面来做WEB是不行的,何况是移动端,没办法只好用易企秀估摸着做了一版。

老板看到后说我们做的太LOW了,马上整改,= =! 我也不想的。。后来mix出来一版做出来就好了很多,易企秀的不满足需求,只有自己写了,那种弹入的动效不会写,索性就将易企秀上的动画扒了下来,接着几期的指尖用的都是这个动画组合。

到做招聘那版的时候,我已经放弃了易企秀的动画库了,开始了自己写keyframes,用到的CSS3的动画属性就查,实在是英文不好,记不住新增的属性单词,到现在都还没记住,看来真有必要整理一下打印出来贴在墙上,有事没事的看几眼。

招聘那版的动效有区别于之前的指尖了,已经渐渐的有了自身的风格,我的风格是那种连贯、轻动、缓行、渐进,行云流水这个词就很符合我的动效风格,极少会出现那种强烈的视觉冲击效果,这可能和我的个性有关吧。

我能做到的,我会做到自认为最好的,就算我做不到,我也不会让效果太差,这是我的理念,也是明雪思维之一。做动效,做的人不仅要有美感,还要有动感,要有不谐者我改之的敏锐,更要用心入情。

Vic 16.03.12 于蒹葭



扫一扫二维码,查看植树节活动H5效果:

植树节活动H5效果