Haben wir also einen Gewinner für die Code Challenge Nr. 1?

Vor einer Woche haben wir die Quick Code Challenge Nr. 1 gestartet und es ist Zeit, den Gewinner bekannt zu geben! Diese Herausforderung ist ziemlich schwierig. Obwohl es nicht viele Einträge gibt, ist die Qualität der Gewinnerwerke unbestreitbar.

Lassen Sie uns zunächst einige der verschiedenen Ansätze in der Herausforderung überprüfen.

mein Versuch

Als Hersteller herausfordernder Regeln werde ich es zuerst versuchen.

( Natürlich kann ich mir keine Auszeichnung geben ... zumindest glaube ich nicht, dass ich ... richtig?! )

Ich habe sowohl CSS- als auch SVG -Lösungen - meine Stärken - ausprobiert und beschlossen, keine Skripte zu verwenden. Da es in CSS und SVG keine wirklichen zufälligen Funktionen gibt, besteht der Trick darin, die regulären Animationsschleifen zufällig aussehen zu lassen, als sie tatsächlich sind. Das ist meine Lösung.

Pure CSS "Organic Aussehen" anstellen von Alex (@alexmwalker) auf CodePen

Sie können den Code so anzeigen, wie Sie möchten, aber das Hauptanliegen ist:

• EKG Line Animation verwendet nur eine externe SVG und zwei separate Animationsschleifen.
• A CSS -Animation (Reise) schleift den grünen Gradienten von links nach rechts. Die überlagerte Maske prägt die EKG -Linie.
• Ich habe 6 eindeutige "EKG Heartbeats" im SVG -Diagramm erstellt und sie als Sprites Keyframes festgelegt. Ich habe diese Keyframes umgeschaltet, damit sie zufällig aussieht (ich habe unten eine kleine Zahl hinzugefügt, um den Keyframe -Schalten offensichtlicher zu machen).
• Die zweite Animation behandelt jeden "Herzschlag" als separates Sprite und wechselt jedes Mal zu einem neuen Sprite - dies ist jedoch nur im dunklen Teil der Schleife stattgefunden, wenn sie nicht sichtbar ist.
• Natürlich erwarten wir, dass jede "Heartbeat -Einheit" genau dieselbe CSS -Animation verwendet, die dieselben Keyframes zeigen. Der Trick, um sie anders aussehen zu lassen, besteht darin, animation-delay zu verwenden, um ihre Startzeit auszugleichen. Wenn wir eine negative Verzögerung verwenden (z. B. animation-delay: -9s), können wir sofort zu einem beliebigen Zwischenpunkt in der Animationsschleife springen. Dies ist ein sehr nützlicher Leistungstrick.
• Alle Animationen werden von einer einzelnen Sass -Variablen oben im CSS -Fenster gesteuert - $animation-time: 5s;. Wenn Sie diese Zahl ändern, wird die große Lesezahl und die EKG -Geschwindigkeit geändert.
• Es funktioniert für Chrome und hat keine umfangreichen Tests, sollte aber überall funktionieren.

Die reine CSS -Methode hat einige Einschränkungen, aber ich bin mit dem Gesamteffekt ziemlich zufrieden. Ich brauche JS, um Elemente zu verbessern, die ich nicht mag.

dritter Platz: Paulob

Wir haben großes Glück, Paul über zehn Jahre lang als langfristiger Mitwirkender, Mentor und Berater bei SitePoint-Nutzern zu haben (vielleicht fast zwanzig Jahre?). In diesem Fall opferte er seine kostbare Urlaubszeit in der Sonne, um eine wundervolle SVG -Lösung zu schaffen.

Paul O’Brien (@paulobrien) 'Ping -Maschine auf Codepen

anzeigen

Paul sagte:

Es ist nur ein SVG für die Grafik und ein animierter linearer Gradient, um den Bewegungseffekt zu liefern. Wenn ich Zeit habe, zeichne ich sie richtig und reaktionsfreudig und wiederhole nicht nur das gleiche SVG, damit es ein wenig zufällig aussieht.

Jetzt musst du zum Pool zurückkehren :)

Paul, wir zollen dir Tribut!

(Darüber hinaus finden wir Wege, Ihnen SitePoint-T-Shirts, Untersetzer oder andere SitePoint-Peripherieprodukte zu schicken.)

Testpreis für Testverhandlung: Nickwatton

Obwohl es in dieser ersten Code -Herausforderung nicht viele Einträge gibt, gibt es absolut kein Problem mit der Qualität der beiden besten Arbeiten. Tatsächlich dachten wir, dass beide die besten Werke die Belohnung verdient haben, also beschlossen wir, ihnen jeweils einen Amazon -Geschenkkartenbonus von 200 US -Dollar zu geben.

Nickwattons Arbeit ist genau das, was ich denke.

Nick Watton (@2mogs) auf CodePen

anzeigen

Wie Nick erklärt, seine Lösung:

Verwenden Sie Partikelsysteme, weil ich sie mag! Sie können auch einen sehr billigen Track -Effekt erhalten, indem Sie den Zeichnungskontext mit fast transparentem Schwarz füllen, was einen verblassten Track für meine "Ping" -Linien erstellt.

RAF lässt die gesamte Animation reibungslos laufen und die Herzschlaganimation wird durch rekursive setTimeout() gesteuert. Ich benutze setTimeout(), um einen Nicht-Frame-by-Frame-Effekt zu treiben, was auch bedeutet, dass ich ihn für ein organisches Gefühl in leicht zufälligen Intervallen auslösen kann. Der Heartbeat () -Methode kontrolliert und randomisiert leicht die Herzschlagrate, die auf den Herzen und im Pulszeilen sichtbar ist.

Nicks JS- und Canvas -Methoden bieten Flexibilität, mit denen andere Methoden schwer zugänglich sind. Ich kann mir nicht vorstellen, wie man diese Partikeleffekte mit einem SVG-basierten Ansatz nachahmt.

leicht randomisierte Animationsgeschwindigkeit ist ebenfalls relativ einfach. Dies ist schwer ohne JS zu schmieden, aber es trägt zur Glaubwürdigkeit dieser Animation bei.

Versuch Erster Preis: Davidomarmach

David reichte seine Arbeit per Deadline ein-wir sind froh, dass er es getan hat. Ich muss zugeben, dass es mich zum Lächeln gebracht hat.

Die "Ping" -Maschine von David Omar Flores Chávez (@davidomarf) auf CodePen

anzeigen

Erstens begann David ernsthaft zu untersuchen, wie echte EKG -Maschinen Ausgaben produzieren und dieses Wissen in seine Animation einbezogen haben. Er erhöhte auch den schwankenden Blutdruck, die Temperatur, die Sauerstoffsättigungswerte und sogar die Hämoglobinzahlen. Dieses Ding fühlt sich sehr real an.

Aber David fügte auch zwei Killer-X-Faktorelemente hinzu.

1. Audio: Die klassische Maschine "Beep ... Beep ... Beep ..." fügt viel Drama hinzu, wenn die Herzfrequenz zunimmt.
2. Interaktivität: Zusätzlich zu einer automatischen "passiven Zufälligkeit" ermöglicht David auch Benutzern, ihre Herzfrequenz durch die Cursorposition zu steuern. Wenn Sie nach links in die Links gehen, können Sie Ihren Patienten schlafen. Wenn Sie nach rechts bewegt werden, können Sie Ihr Patient Adrenalin in das Herz injizieren.

Die begrenzte Kontrolle der EKG -Geschwindigkeit macht diese Einheit in Film-/TV -Szenen wahrscheinlich nützlich.

Wie Nicks Lösung ist die EKG -Einheit auf der Leinwand in JavaScript geschrieben, aber David verwendet die P5.JS -Bibliothek. Ich habe P5 noch nicht verwendet, aber mit Modulen für Zeichnen, Animation und Audio scheint eine großartige Grundlage für den Aufbau eines solchen Projekts zu sein.

Insgesamt ist dies ein sehr beeindruckender Beitrag.

Danke und Herzlichen Glückwunsch an David, Nick und Paul. Wir werden Sie bald kontaktieren.

Nächste Herausforderung: Code Challenge Nr. 2: CSS Battle

Für unsere nächste Herausforderung werden wir mit Freunden bei CSSBattles zusammenarbeiten. Im Laufe von drei Wochen werden 3 Bargeldprämien und 20 SitePoint -Premium -Mitgliedschaften zum Wettbewerb angeboten. Details werden in meinem nächsten Beitrag bekannt gegeben.

Code Challenge 1 FAQ (FAQ)

Was ist der Zweck der Code Challenge 1?

Code Challenge 1 wurde entwickelt, um Ihre Codierungsfähigkeiten zu testen und zu verbessern. Dies ist eine wettbewerbsfähige Plattform, auf der Codierer aus der ganzen Welt teilnehmen und ihr Codierungswissen verwenden, um ein bestimmtes Problem zu lösen. Das Hauptziel dieser Herausforderung ist es, das Lernen, Austausch und Verbesserung der Codierungsfähigkeiten in einem Wettbewerbsumfeld zu fördern, zu teilen und zu verbessern.

Welche Programmiersprachen kann ich in Code Challenge 1 verwenden?

Sie können jede Programmiersprache in Code Challenge 1 verwenden. Die Herausforderung besteht nicht um die Sprache, die Sie verwenden, sondern um die Logik und Effizienz des Codes. Egal, ob Sie gut in Python, Java, C oder einer anderen Sprache sind, Sie können gerne teilnehmen.

Wie kann man den Gewinner der Code Challenge 1 bestimmen?

Der Gewinner der Code Challenge 1 wird auf der Grundlage der Effizienz und Genauigkeit ihres Codes bestimmt. Der Code wird gegen mehrere Testfälle getestet, und der Code, der alle Testfälle in einer Mindestzeit übergeht, wird als Gewinner erklärt.

Können Anfänger an Code Challenge 1 teilnehmen?

natürlich! Die Code Challenge 1 ist offen für Codierer aller Qualifikationsstufen. Selbst wenn Sie Anfänger sind, werden Sie ermutigt, teilzunehmen. Dies ist eine großartige Gelegenheit, sich selbst zu lernen, zu verbessern und herauszufordern.

Was ist, wenn ich Schwierigkeiten habe, Probleme in der Code Challenge 1 zu lösen?

Wenn Sie Schwierigkeiten bei der Lösung von Problemen haben, machen Sie sich keine Sorgen. Sie können die Community immer um Hilfe bitten. Es gibt viele erfahrene Codierer, die Sie helfen und Ihnen führen können.

Wie kann man sich auf die Code Challenge 1 vorbereiten?

Die beste Möglichkeit, sich auf die Code Challenge 1 vorzubereiten, besteht darin, regelmäßig zu codieren. Sie können Probleme aus verschiedenen Online -Plattformen lösen, Codierungsbücher lesen und an anderen Codierungsherausforderungen teilnehmen. Je mehr Sie üben, desto besser werden Sie es tun.

Wenn ich nicht weiß, wie ich codieren soll, kann ich dann an Code Challenge 1 teilnehmen?

Wenn Sie wissen, wie man codiert, ist es eine Voraussetzung für die Teilnahme an der Code Challenge 1, ist es nie zu spät, um zu lernen. Es gibt viele Online -Ressourcen, mit denen Sie die Codierung von Grund auf neu lernen können. Sobald Sie die Grundlagen haben, können Sie an der Coding Challenge teilnehmen.

Was sind die Vorteile der Teilnahme an der Code Challenge 1?

Die Teilnahme an der Code Challenge 1 hat viele Vorteile. Es kann Ihnen helfen, Ihre Codierungsfähigkeiten zu verbessern, eine Wettbewerbsplattform für die Prüfung von Fähigkeiten zu bieten und Lernmöglichkeiten zu bieten. Es kann Ihnen auch helfen, sich mit der Codierungsgemeinschaft aus der ganzen Welt zu verbinden.

Wie oft wird die Code Challenge 1 abgehalten?

Die Häufigkeit der Code -Herausforderung 1 kann variieren. Es kann eine wöchentliche, monatliche oder sogar jährliche Veranstaltung sein. Es ist am besten, die offizielle Website zu besuchen oder ihren Newsletter für die neuesten Updates zu abonnieren.

Gibt es eine Belohnung für den Gewinn der Code Challenge 1?

Die Belohnungen für den Gewinn der Code Challenge 1 können variieren. Einige Herausforderungen bieten Bargeldprämien, während andere Anerkennung, Zertifikate oder Möglichkeiten zur Teilnahme an tatsächlichen Projekten anbieten. Details zu Belohnungen werden normalerweise in der Herausforderung Beschreibung erwähnt.

Das obige ist der detaillierte Inhalt vonHaben wir also einen Gewinner für die Code Challenge Nr. 1?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!