那么，我们是否有代码挑战＃1的赢家？

一周前，我们启动了快速代码挑战赛#1，现在是时候宣布获胜者了！这次挑战颇具难度。虽然参赛作品数量不多，但获奖作品的质量毋庸置疑。

首先，让我们回顾一下挑战中的一些不同方法。

我的尝试

作为挑战规则的制定者，我先来尝试一下。

（当然，我不能给自己颁奖……至少我认为不能……对吧？！）

我尝试了CSS和SVG两种方案——我的强项——并决定不使用任何脚本。由于CSS和SVG中都没有真正的随机函数，所以诀窍在于让规则的动画循环看起来比实际更随机。这是我的解决方案。

查看 CodePen 上 Alex (@alexmwalker) 的纯 CSS“有机外观”心电图动画

您可以随意查看代码，但主要的关注点是：

• 心电图线动画仅使用一个外部SVG和两个单独的动画循环。
• 一个CSS动画（travel）将绿色渐变从左到右循环。叠加的蒙版塑造了心电图线。
• 我在SVG图形上创建了6个独特的“心电图心跳”，并将它们设置为精灵关键帧。我切换这些关键帧以使其看起来随机（我在底部添加了很小的数字，使关键帧切换更明显）。
• 第二个动画将每个“心跳”视为一个单独的精灵，并在每次通过时切换到一个新的精灵——但这被计时为仅在循环的黑暗部分发生，那时它不可见。
• 当然，由于每个“心跳单元”都使用完全相同的CSS动画，我们通常会期望它们都显示相同关键帧。使它们看起来不同的诀窍是使用animation-delay来偏移它们的起始时间。如果我们使用负延迟（例如animation-delay: -9s），我们可以立即跳转到动画循环中的任何中间点。这是一个非常有用的性能技巧。
• 所有动画都由CSS窗口顶部的单个Sass变量控制——$animation-time: 5s;。更改该数字将改变大读数数字和心电图速度。
• 它适用于Chrome，并且没有广泛测试，但在任何地方都应该可以工作。

纯CSS方法有一些局限性，但我对整体效果相当满意。我需要JS来改进我不喜欢的元素。

第三名：PaulOB

我们非常幸运地拥有Paul作为长期贡献者、导师和SitePoint用户的顾问超过十年（可能接近二十年？）。在这种情况下，他牺牲了在阳光下宝贵的假期时间来制作一个精彩的SVG解决方案。

查看 CodePen 上 Paul O’Brien (@paulobrien) 的“Ping”机器

Paul说：

它只是一个用于图形的SVG和一个动画线性渐变来提供运动效果。如果我有时间，我会正确绘制它，并使其具有响应性，而不仅仅是每次都重复相同的svg，以使其看起来有点随机。

现在必须回到游泳池了:)

Paul，我们向你致敬！

（此外，我们会想办法给你寄送SitePoint的T恤、杯垫或其他SitePoint周边产品。）

并列一等奖：nickwatton

虽然这次第一次代码挑战赛的参赛作品数量不多，但前两名作品的质量绝对没有问题。事实上，我们认为最好的两篇作品都值得奖励，因此我们决定给他们每人颁发200美元的亚马逊礼品卡奖金。

Nickwatton的作品正是我心中所想的那种。

查看 CodePen 上 Nick Watton (@2Mogs) 的“Ping”机器

正如Nick解释的那样，他的解决方案：

使用粒子系统，因为我喜欢它们！此外，您可以通过使用几乎透明的黑色填充绘图上下文来获得非常便宜的轨迹效果，这为我的“ping”线创建了褪色的轨迹。

RAF使整个动画流畅运行，心跳动画由递归setTimeout()控制。我使用setTimeout()来驱动非逐帧效果，这也意味着我可以以略微随机的间隔触发它，以获得有机的感觉。心跳()方法控制并轻微地随机化心跳率，这在心脏和脉搏线上可见。

Nick的JS和Canvas方法提供了其他方法难以匹敌的灵活性。我无法想象如何用基于SVG的方法来模仿那些粒子效果。

稍微随机化动画速度也相对容易。这在没有JS的情况下很难伪造，但这确实增加了这个动画的可信度。

并列一等奖：davidomarfch

David在截止时间前提交了他的作品——我们很高兴他做到了。我必须承认，这让我喜笑颜开。

查看 CodePen 上 David Omar Flores Chávez (@davidomarf) 的“Ping”机器

首先，David开始认真研究真实的ECG机器如何产生输出，并将这些知识融入到他的动画中。他还增加了起伏的血压、温度、血氧饱和度读数，甚至血红蛋白计数。这东西感觉很真实。

但是David还添加了两个杀手级的X因素元素。

1. 音频：经典的机器“哔…哔…哔…”在心率增加时增加了许多戏剧性效果。
2. 交互性：除了某些自动的“被动随机性”之外，David还允许用户通过光标位置来控制心率。移动到最左边可以让你的病人入睡——移动到右边可以让你的病人给心脏注射肾上腺素。

对ECG速度的有限控制使得这个单元在电影/电视场景中可能真正有用。

像Nick的解决方案一样，ECG单元是用JavaScript编写到画布上的，但David使用了P5.js库。我以前没有使用过P5，但是有了用于绘图、动画和音频的模块，它似乎是一个构建像这样的项目的绝佳基础。

总而言之，这是一个非常令人印象深刻的贡献。

感谢并祝贺David、Nick和Paul。我们很快就会联系你们。

接下来的挑战：代码挑战赛#2：CSS大战

对于我们的下一个挑战，我们将与CSSbattles.dev的朋友们合作，赞助第四轮战斗。在三周的时间里，将有3个现金奖励和20个SitePoint高级会员资格可供竞争。详情将在我的下一篇文章中公布。

代码挑战赛1常见问题解答（FAQ）

代码挑战赛1的目的是什么？

代码挑战赛1旨在测试和提高您的编码技能。这是一个竞争平台，来自世界各地的编码人员参与并使用他们的编码知识解决给定的问题。这项挑战赛的主要目标是在竞争环境中鼓励学习、分享和提高编码技能。

我可以在代码挑战赛1中使用哪些编程语言？

您可以在代码挑战赛1中使用任何编程语言。挑战赛不是关于您使用的语言，而是关于代码的逻辑和效率。无论您是否擅长Python、Java、C 或任何其他语言，都欢迎您参与。

如何确定代码挑战赛1的获胜者？

代码挑战赛1的获胜者是根据其代码的效率和准确性来确定的。代码将针对多个测试用例进行测试，在最短时间内通过所有测试用例的代码将被宣布为获胜者。

初学者可以参加代码挑战赛1吗？

当然！代码挑战赛1向所有技能水平的编码人员开放。即使您是初学者，也鼓励您参与。这是一个学习、改进和挑战自己的绝佳机会。

如果我在代码挑战赛1中解决问题时遇到困难怎么办？

如果您在解决问题时遇到困难，请不要担心。您可以随时向社区寻求帮助。有很多经验丰富的编码人员随时准备帮助和指导您。

如何为代码挑战赛1做准备？

为代码挑战赛1做准备的最佳方法是定期练习编码。您可以从各种在线平台解决问题，阅读编码书籍，并参加其他编码挑战赛。您练习得越多，就会做得越好。

如果我不知道如何编码，可以参加代码挑战赛1吗？

虽然知道如何编码是参加代码挑战赛1的先决条件，但学习永远不会太晚。有很多在线资源可供您从头开始学习编码。一旦您掌握了基础知识，就可以开始参加编码挑战赛了。

参加代码挑战赛1的好处是什么？

参加代码挑战赛1有很多好处。它可以帮助您提高编码技能，为您提供一个测试技能的竞争平台，并为您提供学习机会。它还可以帮助您与来自世界各地的编码人员社区建立联系。

代码挑战赛1多久举行一次？

代码挑战赛1的频率可能会有所不同。它可以是每周、每月甚至每年的活动。最好查看官方网站或订阅他们的新闻通讯以获取最新更新。

赢得代码挑战赛1是否有奖励？

赢得代码挑战赛1的奖励可能会有所不同。一些挑战赛提供现金奖励，而另一些挑战赛则提供认可、证书或参与实际项目的机会。奖励的详细信息通常会在挑战说明中提到。

以上是那么，我们是否有代码挑战＃1的赢家？的详细内容。更多信息请关注PHP中文网其他相关文章！