最近我不得不为我的另一个项目,创建一个倒计时,我认为它也可以成为一个好教程。所以在这篇文章里,我们将创建该组件使用和一点点的反应SVG。

你可以在这找到最终的结果Codepen例子:

首先,我们将创建倒计时功能,然后我们将研究如何创建动画弧使用SVG与一些花哨的功能。

创建倒计时功能

我们要用MomentJS图书馆将帮助我们解析、验证操作和显示日期和时间。

基本上我们需要的是有两个日期:

• 当前日期或现在
• 最后的日期或然后

当我们有这两个日期,我们可以减去现在从然后使用时刻我们会得到剩余时间(或倒计时值)。

为然后日期,我们需要通过2字符串:

• 一个,timeTillDate字符串包含最后日期之前,我们想要计数(例句:2019年05年26日早上6:00)
• 两个,timeFormat使用的字符串时刻为了验证时间格式(在我们的例子中是:MM DD YYYY, h: MM)

你可以找到更多关于解析和格式化的字符串文档。

让我们看看这看起来在代码:

请注意:timeTillDate,timeFormat值将被提供在反应组件。现在我们使用它们作为例子。

从倒计时对象,我们可以得到所有我们想要的值显示在我们的组件天,小时,分钟和秒直到我们到达然后时间。

以后我们将添加此代码在一个JS时间间隔就是每一秒,但在此之前让我们设置反应组件。

倒计时组件

我们将创建一个类基础组件,我们需要访问状态组件的因为我们可以节省这四个值(天,小时,分钟,秒)。在默认情况下这些值未定义的。

接下来,让我们创建的时间间隔每秒钟运行和保存的值状态的组件。我们会这样做时间间隔在componentDidMount生命周期方法。我们要清晰的的时间间隔componentWillUnmount生命周期方法,如我们不想让它运行组件后从DOM中删除。

CSS

我们现在都有倒计时功能启动并运行,所以我们风格一下:

没有花哨的CSS;我们使用flexbox包装内物品的位置。

最后,让我们创建的SVG弧,将周围的每个项目在我们的倒计时。

SVGCircle组件

在我们这么做之前,有一些功能,我们需要为了创建可定制的SVG弧。我发现这些StackOverflow。你应该去读的更多信息的功能的详细说明。

基本上上面的函数计算应该如何画弧通过提供一组值为:开始和结束点,半径和角度。

回到我们的反应组件:我们要创建的svg我们会有一个路径标签在它将画弧(d给它一个道具)半径财产。内的其他4个值describeArc函数是固定的,我们不想修改它,我们正在定制好的寻找我们的例子。

我们还需要一点CSS内的位置.countdown-item(看到这个组件的最终结果部分):

之前添加该组件内部倒计时组件,我们需要将值(天,小时,分钟和秒)相应的半径值。

我们需要另一个简单的函数,它将地图数量范围内(在我们的例子中日期值)到另一个范围的数字(在我们的例子中,半径)。这个函数也StackOverflow:

最终结果

最后,让我们添加新的SVGCircle里面的每个组件.countdown-item年代,把一切放在一起:

你所要做的现在使用倒计时组件是通过这两个道具(timeTillDate和timeFormat你在金)和:

结论

这是一个有趣的小项目的反应,不是吗?

当我建造这个我学到了更多关于如何使用momentjs图书馆和svg画一条弧。

让我知道如果你有任何问题关于这个教程。

编码快乐!

最初发表在www.florin-pop.com