成为人生的赢家都有哪些书

It’s been a week since we launched our quick Code Challenge #1, which means it’s time to announce a winner! It was tricky. While the quantity of entries wasn’t high, there’s no questioning the quality of our winning entries.

自我们推出快速代码挑战＃1以来，已经过去了一周，这是时候宣布获奖者了！ 这很棘手。 尽管参赛作品的数量不多，但毫无疑问我们获奖作品的质量。

But first, let’s run through a few different approaches to the challenge we supplied.

但是首先，让我们通过几种不同的方法来应对所提供的挑战。

轮到我了！ (My turn first!)

As I set the rules for this challenge, I thought it was only fair that I take the challenge on first.

当我为这个挑战制定规则时，我认为我首先接受挑战是公平的。

(* And no, I can’t award the prize to myself… well, I’m pretty sure I can’t… right?!? ).

(* 而且，我不能将奖金授予自己……嗯，我敢肯定我不能……对吗？！？ )。

I played around with both a CSS and SVG solution – two of my stronger suits – and decided to not use any scripting. As there’s no true random function available in either CSS or SVG, the trick was always to make regular animation loops appear more random than they actually are. Here’s my solution.

我试用了CSS和SVG解决方案(这是我的两个强项)，并决定不使用任何脚本。 由于CSS或SVG中都没有真正的随机函数，因此诀窍始终是使常规动画循环显得比实际更随机。 这是我的解决方案。

See the Pen Pure CSS ‘organic-looking’ EKG Animation by Alex (@alexmwalker) on CodePen.

见笔纯CSS“有机-寻找” EKG动画由Alex( @alexmwalker上) CodePen 。

Feel free to pick through the code, but the main points of interest are:

随意选择代码，但主要的兴趣点是：

• The EKG line animation only uses one external SVG and two separate animation loops.EKG线动画仅使用一个外部SVG和两个单独的动画循环。
• One CSS animation (travel) loops the green gradient from left to right. An overlaying mask shapes the EKG line.一种CSS动画(旅行)使绿色渐变从左到右循环。 覆盖蒙版使EKG线成形。
• I created 6 unique ‘EKG heartbeats’ on the SVG graphic and set them up as sprite keyframes. I’m switching these keyframes to make them look randomized (I’ve added tiny numbers at the bottom to make the keyframe switching more obvious).我在SVG图形上创建了6个独特的“ EKG心跳”，并将它们设置为sprite关键帧。 我正在切换这些关键帧以使它们看起来是随机的(我在底部添加了小数字，以使关键帧切换更加明显)。
• The second animation treats each ‘heartbeat’ as a separate sprite and switches to a new one on each pass – but this is timed to only take place in the dark section of the loop when it can’t be seen.第二个动画将每个“心跳”视为一个单独的子画面，并在每次通过时切换到一个新的子画面-但这被安排为仅在看不见的循环的黑暗部分发生。

• Of course, as each ‘heartbeat unit’ uses exactly the same CSS animation, we would normally expect them all to show the same keyframes. The trick to make them all appear different is to offset their starting times using animation-delay. And if we use negative delays (e.g. animation-delay: -9s) we can jump immediately to any mid-point in an animation loop. That’s a really useful performance trick.

  当然，由于每个“心跳单元”都使用完全相同CSS动画，因此我们通常希望它们都显示相同的关键帧。 使它们看起来都不同的技巧是使用animation-delay偏移其开始时间。 如果我们使用负延迟(例如animation-delay: -9s )，我们可以立即跳到动画循环中的任何中点。 这是一个非常有用的性能技巧。

• All animation is controlled by a single Sass variable at the top of the CSS window – $animation-time: 5s;. Changing that number will alter the big readout number and the EKG speed.

  所有动画均由CSS窗口顶部的单个Sass变量控制- $animation-time: 5s; 。 更改该数字将改变大读数数字和EKG速度。

• It’s built for Chome and not widely tested but should work anywhere.它是为Chome构建的，未经广泛测试，但可以在任何地方使用。

There are some limitations to a purely CSS approach, but I’m fairly happy with the overall effect. I’d need JS to improve the elements I don’t like.

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

三等奖：PaulOB (Third Prize: PaulOB)

We’ve been very lucky to have Paul as a longtime contributor, mentor and advisor to SitePoint users for well over a decade (possibly approaching two?). In this case, he sacrificed precious holiday time in the sun to produce a tasty SVG solution.

我们非常幸运，有Paul担任SitePoint用户的长期贡献者，导师和顾问已有十年之久(可能接近两个？)。 在这种情况下，他在阳光下牺牲了宝贵的假期，以制作出美味的SVG解决方案。

See the Pen Machine that goes Ping! by Paul O’Brien (@paulobrien) on CodePen.

看到去Ping的制笔机！ 由Paul O'Brien( @paulobrien )在CodePen上编写 。

Paul said:

保罗说：

It’s just an SVG for the graph and an animated linear gradient to provide the motion effect. If I had time I would draw it properly and make it responsive and not just repeat the same svg each time to make it look a little bit random.

它只是图形的SVG，还有动画的线性渐变以提供运动效果。 如果我有时间，我会适当地绘制它并使之具有响应性，而不仅仅是每次重复相同的svg使其显得有些随机。

Must get back to the swimming pool now :)

现在必须回到游泳池:)

Paul, we salute you, sir!

保罗，我们向您致敬，先生！

(Also, we’ll work out which SitePoint t-shirt, can holder or assorted SitePoint shwag we can send you.)

(此外，我们将计算出可以发送给您的哪种SitePoint T恤，可以持有或搭配的SitePoint shwag。)

均等头奖：nickwatton (Equal First prize: nickwatton)

While there weren’t a huge quantity of entries for this first code challenge, there was certainly no lack of quality with the top two entries. In fact, we thought the best 2 entries were so worthy of reward that we decided to award them both $200 Amazon Gift Card prizes.

尽管第一个代码挑战的条目数量不多，但前两个条目肯定不乏质量。 实际上，我们认为最好的2个参赛作品是如此值得奖励，因此我们决定向他们授予200美元的Amazon Gift Card奖品。

Nickwatton’s entry was exactly the kind of thing I had in mind.

Nickwatton的入职正是我所想到的那种。

See the Pen Machine that goes Ping! by Nick Watton (@2Mogs) on CodePen.

看到去Ping的制笔机！ 由Nick Watton( @ 2Mogs )在CodePen上编写 。

As Nick explains, his solution:

正如尼克所说，他的解决方案是：

Uses particle systems, because I like them. Also, you can get a very cheap trail effect with canvas by filling the drawing context with a nearly transparent black, which makes the fading trail for my ‘ping’ line.

使用粒子系统，因为我喜欢它们。 另外，通过用几乎透明的黑色填充绘图上下文，可以用画布获得非常便宜的跟踪效果，这使我的“ ping”线变淡。

RAF keeps the whole animation running smoothly, with the heartbeat animations controlled with a recursive setTimeout(). I am using the setTimeout() to drive effects that are not per-frame, and it also means I can fire this at slightly random intervals, for an organic feel. The heartBeat() method controls and lightly randomizes the pulse rate, seen in the heart and pulse line.

RAF使心跳动画通过递归setTimeout()控制，从而使整个动画平稳运行。 我正在使用setTimeout()来驱动不是每帧的效果，这也意味着我可以稍微随机的间隔触发此效果，以获得自然的感觉。 heartBeat()方法控制并轻微地随机化在心脏和脉搏线中看到的脉搏率。

Nick’s JS and Canvas approach offers flexibility that is hard to match with other approaches. I can’t imagine how you could begin to mimic those particle effects with an SVG based method.

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

It’s also relatively easy to slightly randomize the speed of the animation. This is tough to fake without JS but really sells the plausibility of this animation.

稍微随机化动画速度也相对容易。 没有JS很难伪造，但确实卖出了该动画的合理性。

均等一等奖：davidomarfch (Equal First prize: davidomarfch)

David submitted his entry just before the cut-off time – and we’re so glad he made it. I have to admit this one had me grinning from ear to ear.

大卫在截止时间之前提交了他的参赛作品-我们很高兴他参加了比赛。 我不得不承认，这个让我不停地咧嘴笑。

See the Pen Machine that goes Ping! by David Omar Flores Chávez (@davidomarf) on CodePen.

看到去Ping的制笔机！ 由David Omar FloresChávez ( @davidomarf )在CodePen上编写 。

Firstly, David started out with some serious research into how a real ECG machine produces its output and built that knowledge into his animation. He’s also added ebbing and flowing blood pressure, temperature, oxygen saturation readings, and even hemoglobin count. This thing feels legit.

首先，David首先进行了认真的研究，以研究真正的ECG机器如何产生输出并将该知识构建到他的动画中。 他还增加了血压的下降和流动，温度，氧饱和度读数，甚至血红蛋白计数。 这东西感觉合法。

But David also added two killer X-factor elements.

但大卫还添加了两个致命的X因子元素。

1. Audio: The classic machine ‘boop…boop…boop…’ adds so much drama when the heart rate increases.

   音频 ：经典机器“ boop…boop…boop…”会在心率增加时增加很多戏剧性。

2. Interactivity: Beside some automatic ‘passive randomness’, David lets the user control the heart rate via the cursor position. Move to the far left to put your patient to sleep – move to the right to give your patient an adrenalin shot to the heart.

   交互性 ：除了一些自动的“被动随机性”，David还允许用户通过光标位置控制心率。 向左移动可让您的患者入睡-向右移动可使患者的心脏产生肾上腺素。

That finite control of the ECG speed makes this unit potentially genuinely useful in a movie/TV set scenario.

ECG速度的有限控制使该装置在电影/电视机场景中可能真正有用。

Like Nick’s solution, the ECG unit is written to canvas with JavaScript but David uses the P5.js library. I haven’t used P5 before, but with modules for drawing, animation, and audio, it seems like a great foundation to base a project like this on.

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

All up, a super impressive contribution.

总的来说，这是一个令人印象深刻的贡献。

Both thanks and congrats to David, Nick, and Paul. We’ll be in contact shortly.

谢谢大卫，尼克和保罗。 我们会尽快与您联系。

下一步是什么？ 代码挑战2：CSS之战 (What’s Next? Code Challenge #2: The CSS Battle)

For our next challenge we’re partnering with our friends at CSSbattles.dev to sponsor Battle round #4 . There are 3 cash prizes and 20 SitePoint Premium Memberships to compete for over a three week period. Details to come in my next post.

对于我们的下一个挑战，我们将与CSSbattles.dev上的朋友合作， 以赞助第4轮战斗 。 有3个现金奖励和20个SitePoint高级会员资格可以在三周内竞争。 详细信息将在我的下一篇文章中介绍。

翻译自: https://www.sitepoint.com/so-do-we-have-a-winner-for-code-challenge-1/

成为人生的赢家都有哪些书