尊重原创,欢迎转载,转载请注明 FROM GAStudio http://blog.csdn.net/tianjian4592/article/details/54087913
谈到贝塞尔曲线,很多人会觉得高逼格、复杂、头疼,实则不然,贝塞尔曲线经过android封装,已经显得娇俏可爱,简单好用,之前一些红极一时的效果也均是由其打造,比如QQ的“一键退潮”效果、电子书曲面翻页效果…… 现在咱们就用贝塞尔曲线一起从0到1打造一个拥有极致体验、清秀灵动的GABottleLoading效果;
好了,不多吹NB了,老规矩先上一个原始效果图:
如果你想看 GAStudio Github主页,请戳这里;
如果你想看 GAStudio更多技术文章,请戳这里;
QQ技术交流群:277582728;
github地址: https://github.com/Ajian-studio/GABottleLoading
看到这个效果,估计有人开喷:
“我擦,听你吹半天NB,这个效果老子两年前就看过了,github上早有了,垃圾……”
此时,沉稳优雅、帅气逼人的GA哥在github上通过关键字搜索,两个实现赫然出现在我的面前,看来天不助我,然后通过查看他们的实现,发现其中一个实现的很棒,老实说GA哥都没有信心实现到如此完美,but看过之后发现他是直接加载gif,fuck, too young, too simple, 另一个呢?通过代码实现,现在让我们瞻仰下他实现的效果:
从效果上来看,基本实现了瓶身、波纹晃动,但真正复杂的气泡与动态并倾斜的水面的脱离过程却并未实现,而这才是GA哥感兴趣的地方,此时天空响起一声惊雷,GA哥闪亮登场;
首先,让我们一起分解下这个动效,简单来看,该效果可以分成以下几个部分:
1.水滴从水面弹出和融入;
2.水面的波动;
3.瓶身的绘制;
接下来,咱们一起从以上三个内容逐个处理:
一、水滴从水面弹出和融入
正式分析之前,请和GA哥一起通过一个慢镜头看看其中一个水滴脱离水面的过程;
我擦,不看不知道,没想到过程如此细腻!
是不是突然感觉这个动效没那么简单了?是不是有点难度了?尤其是水滴离开水面的过程中,水面还在不断的变动,而整个水滴弹出和融入的过程都需要和水面柔和爽朗的连接;
俗话说,“擒贼先擒王”,咱们第一步就来搞定水滴的粘连出入过程!
首先我们来看一下过程分解图(请关注左边的水滴):