那麼，我們是否有代碼挑戰＃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中文網其他相關文章！