持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

哈喽各位jym，我又来参加更文挑战了，臣妾卷不动了，奈何奖励实在太香，太适合夏天办公了。那还说什么，撸起袖子加油干吧。

第一天，就写个最近需求里出现的一个小动画吧。且听我听我细细道来。

最近我们需求，新增了一个视频播放。既然是视频播放，那就得用一些花里胡哨的动画来诱导用户点击它，从而播放视频。怎么诱导就需要UI来设计了。我们UI设计了通过两个圆圈闪烁来实现。

使用svga实现

最初，我们的想法是让UI切一个gif图，直接放图上去，但是因为有透明度，gif对透明度的支持又不友好，所以摆在面前的有两种方法，一种是svga实现，一种是css实现。先来简单说一下svga实现吧。 首先需要安装svgaplayerweb依赖。

npm i svgaplayerweb --save or yarn add svgaplayerweb

const player = new SVGA.Player('#svgaContainer');
const parser = new SVGA.Parser('#svgaContainer');
//注意，load中引用的必须是服务器地址
parser.load('', function(videoItem) {       
    player.loops = 10;  // 设置循环播放次数
    player.setVideoItem(videoItem);
    player.startAnimation();
});

svga毕竟是一个动画文件。首先，循环播放这个动画，svga制作的不合适有可能会造成收尾连接处会出现一些卡顿，观感上不是很好；其次，对于多样性的根据用户操作来实现个性化展示的 还是需要依托于基础的js或者css来控制实现。

难道svga就没有优点了吗？有，与css相比，开发和使用起来比css简单，与svg相比，性能会有较大提升，还有就是对透明度的支持。

所以，现在Android动画便是用的svga。

使用css实现

介绍完svga，就回到了我们本期的重点，纯css做一个简单的实现。

首先，我们先明确我们的页面结构，得有两个圆圈来进行闪烁，得有播放按钮。

<div class="box">
    <div class="big-circle">
        <div class="little-circle">
        </div>
    </div>
    <div class="triangle-box">
        <div class="triangle"></div>
    </div>
</div>

原谅我不清楚怎么制作GIF，就不放css效果图了，直接撸代码最后看看效果吧。

.box{
    margin: 100px;
    cursor: pointer;
}
.triangle-box {
    display: inline-block;
    position: relative;
    left: -38px;
    background-color: #4154a0;
    width: 18px;
    height: 25px;
    padding: 7px 0 0 14px;
    border-radius: 50%;
}

.triangle {
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-left-color: #fff;
}
.big-circle {
    display: inline-block;
    background: radial-gradient(rgba(113, 127, 187, 0), rgba(113, 127, 187, .4));
    width: 32px;
    height: 32px;
    border-radius: 50%;
    animation-duration: 2s;
    animation-name: bigger;
    animation-iteration-count: infinite;
    transform-origin: center center;
}

.little-circle {
    background: radial-gradient(rgba(113, 127, 187, 0), rgba(113, 127, 187, .4));
    width: 32px;
    height: 32px;
    border-radius: 50%;
    animation-duration: 2s;
    animation-delay: 200ms;
    animation-name: smaller;
    animation-iteration-count: infinite;
    transform-origin: center center;
}

@keyframes bigger {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(2.25);
    }

    100% {
        transform: scale(1);
    }
}
@keyframes smaller {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.66);
    }

    100% {
        transform: scale(1);
    }
}

看看最终效果吧。

总结

本次我们说了两种方案实现一个小动画。在开发中，我们需要根据实际情况来进行选型。不确定的情况下可以试着写一些demo来帮助我们选型。就比如我在开发中，使用svga时，刚开始在load中引用的是本地资源，导致直接报错，又去查文档。发现在load中必须是服务器地址。再者呢，我们团队倾向于使用公司内部的组件库进行开发，不会去额外的引入第三方依赖。所以我选择原生css实现。