CSS实现金币喷发动画效果

Aug-17-2019 14-19-52.gif

简单的金币喷发效果。

可以看到主要有两个动效，一个是抛物线，一个从小变大且翻转。
实现思路：一个金币是一个元素，可以通过控制他们各自的x轴方向的移动距离和延迟，达到多个金币凌乱抛洒的效果。
技术关键点：
1：需要两层元素，外层是box，里层是需要放大或者反转操作的元素，两个一个沿着x轴移动，一个沿着y轴移动，同时移动达到抛物线效果。如果只有一层，则只会直线移动（即垂直抛）。
2：animation-timing-function: cubic-bezier(0.14,-0.2,1,0.18); 贝塞尔曲线函数，控制移动进度和时间的关系。创造抛的效果。
3：@keyframes 定义一个关键帧动画，配合进行放大缩小或旋转的操作。两个元素各有一个，我们只需要控制一个元素（比如里层）的大小旋转等属性即可。

注意点：两层都要设置animation-timing-function，且animation-time、和animation-delay必须相同。
下面是例子代码，使用了Vue的for来创造了5个金币元素。

<!-- 金币动画 -->
            <div v-for="index in 5" :key="index" class="anboxclass" :id="'anbox'+index" >
                <img class="gildclass"  :id="'gild'+index" src="../../assets/gold_animation.png" alt="">
            </div>

下面是金币的样式，因为每个金币都要设置自己的动画，所以要针对每个金币设置必要的个性属性，比如延迟，落脚的x点（即注释中的left）等。y落脚点因为可以都一样，所以只设置一次就行了。

/* 金币动画-基础样式 */
.anboxclass{
    animation-name: boxanname1;
    animation-duration: 1.5s;
    animation-delay: 1s;
    animation-timing-function: cubic-bezier(0,0,0,0);
    animation-fill-mode:forwards;
    /* animation-iteration-count: infinite; */
}
.gildclass{
    position: absolute;
        /* top: 15%; */
        /* left: 50%; */
        margin-left: 50%;
        margin-top: 30%;
        width: 5px;
        
        animation: myfirst 1.5s;
        animation-delay: 1s;
        animation-timing-function: cubic-bezier(0.14,-0.2,1,0.18);
        animation-fill-mode:forwards;
        /* animation-iteration-count: infinite; */
}

/* 只动盒子的left就行 */
/* 第一个金币 */
#anbox1{
    animation-name: boxanname1; 
    animation-delay: 0.5s;
}
#gild1{
    animation-delay: 0.5s;    
}   
@keyframes myfirst {
    0% { }
    10%  {width: 15px}
    20%  {width: 25px}
    100% {  margin-top: 1000px; width: 40px; transform:rotateX(1500deg); opacity: 0;}
}
@keyframes boxanname1 {
    0% { }
    100% { margin-left: 60%; }
}

/* 第二个金币 */
#anbox2{
    animation-name: boxanname2;
    animation-delay: 0.7s;   
}
#gild2{
    animation-delay: 0.7s;    
} 
@keyframes boxanname2 {
    0% { }
    100% { margin-left: 20%; }
}

/* 第三个金币 */
#anbox3{
    animation-name: boxanname3;
    animation-delay: 0.8s;  
}
#gild3{
    animation-delay: 0.8s;    
}
@keyframes boxanname3 {
    0% { }
    100% { margin-left: 0%; }
}

/* 第四个金币 */
#anbox4{
    animation-name: boxanname4;
    animation-delay: 0.3s;
}
#gild4{
    animation-delay: 0.3s;    
}
@keyframes boxanname4 {
    0% { }
    100% { margin-left: -20%; }
}

/* 第五个金币 */
#anbox5{
    animation-name: boxanname5;
    animation-delay: 0.3s; 
}
#gild5{
    animation-delay: 0.3s;    
}
@keyframes boxanname5 {
    0% { }
    100% { margin-left: -60%; }
}

应该还能再优化优化，比如把延迟弄成1秒内的随机数，则能再减少每个金币的好几行代码。不知道keyframes能不能通过其他方式也弄成能循环出来的，那就能随意定义金币的数量，再配合随机，就能简单的弄出来大量金币的爆发效果。