그렇다면 Code Challenge #1의 승자가 있습니까?

일주일 전 우리는 Quick Code Challenge #1을 시작했으며 이제 승자를 발표 할 때입니다! 이 도전은 매우 어렵습니다. 출품작은 많지 않지만 승리 작품의 품질은 의심 할 여지가 없습니다.

먼저, 도전에서 다른 접근법 중 일부를 검토합시다.

내 시도 도전적인 규칙의 제작자로서 먼저 시도해 볼 것입니다.

( 물론, 나는 나 자신에게 상을 줄 수 없습니다 ... 적어도 나는 할 수 없다고 생각합니다 ... 맞습니까? 나는 CSS와 SVG 솔루션 (내 강점)을 모두 시도했으며 스크립트를 사용하지 않기로 결정했습니다. CSS와 SVG에는 실제 임의의 기능이 없기 때문에 일반 애니메이션 루프를 실제보다 임의적으로 보이게하는 요령입니다. 이것이 내 해결책입니다.

Codepen에서 Alex (@alexmwalker)의 순수한 CSS "유기농 외관"ECG 애니메이션보기 원하는대로 코드를 볼 수 있지만 주요 관심사는 다음과 같습니다.

ekg 라인 애니메이션은 외부 SVG와 2 개의 개별 애니메이션 루프 만 사용합니다.

CSS 애니메이션 (Travel)은 녹색 구배를 왼쪽에서 오른쪽으로 고정시킵니다. 중첩 된 마스크는 ECG 라인을 형성합니다.

나는 SVG 그래프에서 6 개의 독특한 "ECG 하트 비트"를 만들어 스프라이트 키 프레임으로 설정했습니다. 이 키 프레임을 전환하여 무작위로 보이게했습니다 (하단에 소수를 추가하여 키 프레임을 더 분명하게 만들었습니다).

두 번째 애니메이션은 각 "하트 비트"를 별도의 스프라이트로 취급하고 통과 할 때마다 새로운 스프라이트로 전환하지만 이는 보이지 않을 때 루프의 어두운 부분에서만 발생합니다. 물론, 각 "하트 비트 유닛"은 동일한 CSS 애니메이션을 사용하기 때문에 일반적으로 동일한 키 프레임을 모두 보여줄 것으로 기대합니다. 그것들을 다르게 보이게하는 속임수는 를 사용하여 시작 시간을 상쇄하는 것입니다. 음의 지연 (예 : )을 사용하면 즉시 애니메이션 루프의 중간 지점으로 이동할 수 있습니다. 이것은 매우 유용한 성능 트릭입니다.

모든 애니메이션은 CSS 창의 상단에 단일 SASS 변수로 제어됩니다. 이 숫자를 변경하면 큰 판독 횟수와 ECG 속도가 변경됩니다.

크롬에서 작동하며 광범위한 테스트는 없지만 어디서나 작동해야합니다.

순수한 CSS 방법에는 몇 가지 한계가 있지만 전반적인 효과에 매우 만족합니다. 마음에 들지 않는 요소를 개선하려면 JS가 필요합니다. 3 위 : Paulob 우리는 Paul을 장기 기고자, 멘토 및 컨설턴트로 10 년 이상 (20 년에 가까울 수 있습니까?)를 갖는 것은 매우 운이 좋았습니다. 이 경우, 그는 멋진 SVG 솔루션을 만들기 위해 햇볕에 소중한 휴가 시간을 희생했습니다. Codepen

에서 Paul O'Brien (@paulobrien)의 "Ping"기계를 봅니다 바울이 말했다 :

는 그래픽의 SVG 일 뿐이며 모션 효과를 제공하기위한 애니메이션 선형 그라디언트 일뿐입니다. 시간이 있다면, 올바르게 그려서 매번 같은 SVG를 반복하여 약간 무작위로 보이게하는 것이 아니라 반응을 보이게 할 것입니다.

이제 수영장으로 돌아 가야합니다 :)

폴, 우리는 당신에게 경의를 표합니다!

(또한, 우리는 당신에게 itepoint 티셔츠, 코스터 또는 기타 itepoint 주변 제품을 보내는 방법을 찾을 것입니다.)

. <: :> 재판 첫 상 : Nickwatton

이 첫 번째 코드 챌린지에는 항목이 많지 않지만 상위 두 가지 작품의 품질에는 전혀 문제가 없습니다. 실제로, 우리는 최고의 작품 모두에게 보상을받을 자격이 있다고 생각했기 때문에 각각 200 달러의 Amazon 기프트 카드 보너스를 주기로 결정했습니다.

Nickwatton의 작품은 정확히 내가 생각하는 것입니다.

Codepen에서 닉 Watton (@2mogs)을 봅니다 Nick이 설명 하듯이, 그의 해결책 :

입자 시스템을 좋아하기 때문에 입자 시스템을 사용하십시오! 또한 드로잉 컨텍스트를 거의 투명한 검은 색으로 채워 매우 저렴한 트랙 효과를 얻을 수 있습니다.

RAF는 전체 애니메이션을 부드럽게 실행하고 하트 비트 애니메이션은 재귀 에 의해 제어됩니다. 나는 를 사용하여 프레임이 아닌 프레임 효과를 구동하여 유기적 느낌을 위해 약간 임의의 간격으로 트리거 할 수 있음을 의미합니다. 하트 비트 () 메소드는 심장 및 맥박 선에서 볼 수있는 심장 박동 속도를 제어하고 약간 무작위 화합니다.

Nick의 JS 및 Canvas 방법은 다른 방법이 일치하기 어려운 유연성을 제공합니다. SVG 기반 접근법을 사용하여 입자 효과를 모방하는 방법을 상상할 수 없습니다.

약간 무작위로 된 애니메이션 속도도 비교적 쉽습니다. JS 없이는 위조하기는 어렵지만이 애니메이션의 신뢰성을 추가합니다. <: :> 시험 첫 상 : Davidomarmach 데이비드는 마감일에 자신의 작품을 제출했다. 나는 그것이 나를 웃게 만들었다는 것을 인정해야한다. Codepen에서 David Omar Flores Chávez (@davidomarf)의 "Ping"기계를 봅니다. David는 실제 ECG 기계가 어떻게 출력을 생산 하고이 지식을 그의 애니메이션에 통합하는지 심각하게 연구하기 시작했습니다. 그는 또한 변동하는 혈압, 온도, 산소 포화도 판독 및 헤모글로빈 수를 증가시켰다. 이것은 매우 현실적인 느낌입니다.

그러나 David는 또한 두 개의 킬러 X-Factor 요소를 추가했습니다.

오디오 : 클래식 머신 "경고음 ... 경고음 ... 경고음 ..."심박수가 증가 할 때 많은 드라마를 추가합니다.
1. <:> 상호 작용 : 일부 자동 "수동 무작위성"외에도 David는 사용자가 커서 위치를 통해 심박수를 제어 할 수 있도록합니다. 맨 왼쪽으로 이동하면 환자가 잠을 자게됩니다. 오른쪽으로 이동하면 환자가 아드레날린을 심장에 주사하게됩니다.
2. ECG 속도의 제한된 제어로 인해이 장치는 영화/TV 장면에서 진정으로 유용 할 수 있습니다.
Nick의 솔루션과 마찬가지로 ECG 장치는 JavaScript의 캔버스에 작성되었지만 David는 P5.JS 라이브러리를 사용합니다. 나는 전에 p5를 사용하지 않았지만 그림, 애니메이션 및 오디오를위한 모듈을 사용하면 이와 같은 프로젝트를 구축하기위한 훌륭한 기초처럼 보입니다.

대체로, 이것은 매우 인상적인 기여입니다.

David, Nick 및 Paul에게 감사하고 축하합니다. 곧 연락 드리겠습니다.

다음 챌린지 : 코드 챌린지 #2 : CSS 배틀 다음 도전을 위해 CSSBattles.dev에서 친구들과 협력하여 네 번째 전투를 후원합니다. 3 주 동안 3 주 동안 3 개의 현금 보상과 20 개의 Sitepoint 프리미엄 멤버십이있을 것입니다. 세부 사항은 다음 게시물에서 발표됩니다. <p> <fa> 코드 챌린지 1 FAQ (FAQ) <purpose> 코드 챌린지 1의 목적은 무엇입니까? </purpose></fa></p> <is> 코드 챌린지 1은 코딩 기술을 테스트하고 향상 시키도록 설계되었습니다. 이것은 전 세계의 코더가 참여하여 코딩 지식을 사용하여 주어진 문제를 해결하는 경쟁 플랫폼입니다. 이 도전의 주요 목표는 경쟁 환경에서 코딩 기술을 학습, 공유 및 개선하는 것입니다. <p> <langu> 코드 챌린지 1에서 어떤 프로그래밍 언어를 사용할 수 있습니까? </langu></p> <any> 코드 챌린지에서 모든 프로그래밍 언어를 사용할 수 있습니다 1. 도전은 사용하는 언어가 아니라 코드의 논리와 효율성에 관한 것입니다. Python, Java, C 또는 기타 언어에 능숙하든 참여할 수 있습니다. <p> <the> 코드 챌린지 1의 승자를 결정하는 방법 1? </the></p> <of> 코드 챌린지 1의 우승자는 코드의 효율성과 정확도에 따라 결정됩니다. 코드는 여러 테스트 사례에 대해 테스트되며 모든 테스트 사례를 최소 시간 내에 통과하는 코드는 승자로 선언됩니다. <h3> <particip> 초보자가 코드 챌린지 1에 참여할 수 있습니까? </particip> </h3> 물론 <p>! 코드 챌린지 1은 모든 기술 수준의 코더에게 공개됩니다. 초보자라도 참여하는 것이 좋습니다. 이것은 자신을 배우고, 향상시키고, 도전 할 수있는 좋은 기회입니다. </p> <have> 코드 챌린지 1에서 문제를 해결하는 데 어려움이 있다면 어떻게해야합니까? <h2> <difficult> 문제 해결에 어려움이 있다면 걱정하지 마십시오. 항상 커뮤니티에 도움을 요청할 수 있습니다. 당신을 도울 준비가 된 숙련 된 코더가 많이 있습니다. </difficult> </h2> <for> 코드 챌린지를 준비하는 방법 1? <h3> <to> 코드 챌린지 1을 준비하는 가장 좋은 방법은 정기적으로 코딩을 연습하는 것입니다. 다양한 온라인 플랫폼에서 문제를 해결하고 코딩 서적을 읽고 다른 코딩 문제에 참여할 수 있습니다. 연습을 많이할수록 더 잘할 것입니다. </to> </h3> <know> 코딩 방법을 모르는 경우 코드 챌린지 1에 참여할 수 있습니까? <h3> <to> 코딩 방법을 아는 것은 코드 챌린지 1에 참여하기위한 전제 조건이지만 배우기에는 너무 늦지 않습니다. 코딩을 처음부터 배울 수있는 온라인 리소스가 많이 있습니다. 기본 사항이 있으면 코딩 도전에 참여할 수 있습니다. </to> </h3> <benefits> 코드 챌린지 1에 참여하면 어떤 이점이 있습니까? <p> <benefits> 코드 챌린지에 참여하는 데 많은 이점이 있습니다 1. 코딩 기술을 향상시키고 테스트 기술을위한 경쟁 플랫폼을 제공하며 학습 기회를 제공하는 데 도움이됩니다. 또한 전 세계의 코딩 커뮤니티와 연결하는 데 도움이 될 수 있습니다. </benefits></p> <the> 코드 챌린지 1은 얼마나 자주 유지됩니까? <h3> <of> 코드 챌린지 1의 빈도는 다를 수 있습니다. 매주, 매월 또는 연례 행사 일 수 있습니다. 공식 웹 사이트를 확인하거나 최신 업데이트를 위해 뉴스 레터를 구독하는 것이 가장 좋습니다. </of> </h3> <re> 우승 코드 챌린지 1에 대한 보상이 있습니까? <p> <for> 우승 코드 챌린지 1에 대한 보상은 다를 수 있습니다. 일부 과제는 현금 보상을 제공하는 반면, 다른 과제는 인정, 인증서 또는 실제 프로젝트에 참여할 수있는 기회를 제공합니다. 보상의 세부 사항은 일반적으로 도전 설명에 언급되어 있습니다. </for></p></re></the></benefits></know></for></have></of></any></is>

위 내용은 그렇다면 Code Challenge #1의 승자가 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!