目前的 C4D 设计受到很多人的喜欢，因为其效果呈现很有立体感、空间感。而且搭配一定的动画效果可以更突出灵动、高技术的视觉效果。
本次将讲解下面 C4D 图动画效果的制作，主要由两大效果组成：闪光以及球体椭圆效果。
本章先讲解闪光效果制作，效果可前往睿江云官网观看 → http://www.eflycloud.com。
1-1 C4D动态效果图
一、底图以及闪烁图准备（1）原始设计稿：一开始设计师给的设计图是这样子的 ↓↓↓
1-2 原始设计稿
（2）设计稿剖析：那如何才能做到闪烁效果呢？
首先我们要剖析这张图：一张底图 闪光切割图，剖析图如下↓↓↓
1-3 底图
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;
}
我们可以根据需要，调节动画时间、延迟执行动画时间来实现动画闪动的快慢以及动画在不同点上闪动。
按照以上的方法就可以简单配置闪动效果，但是动画不宜一下子闪动太多，否则会起到反效果，给人乱糟糟的感觉，建议做单闪动或者控制多个闪动几个闪动就可以了。
关于椭圆动态效果以及闪动控制将在下一期给大家分享，敬请期待！
如果大家对此感兴趣，欢迎各位关注、留言，大家的支持就是我的动力！
,
