c4d粒子闪动(C4D搭配闪光动画效果)

前言

目前的 C4D 设计受到很多人的喜欢,因为其效果呈现很有立体感、空间感。而且搭配一定的动画效果可以更突出灵动、高技术的视觉效果。

本次将讲解下面 C4D 图动画效果的制作,主要由两大效果组成:闪光以及球体椭圆效果。

本章先讲解闪光效果制作,效果可前往睿江云官网观看 → http://www.eflycloud.com。

c4d粒子闪动(C4D搭配闪光动画效果)(1)

1-1 C4D动态效果图

一、底图以及闪烁图准备

(1)原始设计稿:一开始设计师给的设计图是这样子的 ↓↓↓

c4d粒子闪动(C4D搭配闪光动画效果)(2)

1-2 原始设计稿

(2)设计稿剖析:那如何才能做到闪烁效果呢?

首先我们要剖析这张图:一张底图 闪光切割图,剖析图如下↓↓↓

c4d粒子闪动(C4D搭配闪光动画效果)(3)

1-3 底图

c4d粒子闪动(C4D搭配闪光动画效果)(4)

1-4 闪光切割图

以上 “1-3底图” 黑色块便是可以进行闪光的部分,其闪光切割图是 “1-4图” 中相对应数字标签的图。

我们可以考虑把体积小的闪光切割图合并一张图,以减少图片的请求处理。

二、css闪光效果处理

(1)底图与切割图吻合处理

先通过定位把切割图完美匹配底图,合并成一张完整的1-2原始设计图。

代码实现如下:

<!-- html --> <!-- 底图 --> <divclass="servicMainOut"> <!-- 切割图5 --> <divclass="service-top1"></div> <!-- 切割图6 --> <divclass="service-top2"></div> <!-- 切割图1、2、3、4 --> <divclass="service-cloud1"></div> <divclass="service-cloud2"></div> <divclass="service-cloud3"></div> <divclass="service-cloud4"></div> </div>

.servicMainOut { position: relative; width: 1017px; height: 469px; background: url(https://static.eflycloud.com/V5/pc/image/home/service.png) no-repeat center; } .service-top1 { position: absolute; top: 23px; right: 416px; background: transparent url(https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat -396px 0; width: 224px; height: 89px; } .service-top2 { position: absolute; top: 66px; right: 563px; background: transparent url(https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat -620px 0; width: 135px; height: 202px; } .service-cloud1 { position: absolute; top: 100px; right: 840px; background: transparent url(https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat 0 0; width: 89px; height: 84px; } .service-cloud2 { position: absolute; top: 246px; right: 671px; background: transparent url(https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat -89px 0; width: 126px; height: 120px; } .service-cloud3 { position: absolute; top: 228px; right: 233px; background: transparent url(https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat -215px 0; width: 103px; height: 59px; } .service-cloud4 { position: absolute; top: 136px; right: 50px; background: transparent url(https://static.eflycloud.com/V5/pc/image/home/cloud.png) no-repeat -317px 0; width: 79px; height: 54px; }

(2)闪光效果

闪光效果主要是通过控制切割图标签块透明度 opacity 来实现。在动画过程中,使切割图的透明图过亮或过暗,令底图与切割图叠加呈现不同的效果:

opacity=1时,闪亮度最高,全然呈现切割图;

opacity=0时,闪亮度最暗,无亮灯状态,全然呈现底图状态。

代码如下:

@-webkit-keyframes serviceFlash { from, 0%, to { opacity: 1; } 40% { opacity: 0; } 60%,100% { opacity: 1; } } .service-top1 { animation: serviceFlash 2s infinite; } .service-top2 { animation: serviceFlash 0.65s infinite; animation-delay: 1s; } // 切割图1、2、3、4添加service-cloud .service-cloud { animation: serviceFlash 0.3s 2; }

小结

我们可以根据需要,调节动画时间、延迟执行动画时间来实现动画闪动的快慢以及动画在不同点上闪动。

按照以上的方法就可以简单配置闪动效果,但是动画不宜一下子闪动太多,否则会起到反效果,给人乱糟糟的感觉,建议做单闪动或者控制多个闪动几个闪动就可以了。

关于椭圆动态效果以及闪动控制将在下一期给大家分享,敬请期待!

如果大家对此感兴趣,欢迎各位关注、留言,大家的支持就是我的动力!

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页