OK 우리는 환영 할 것이다.
그래서이 비디오에서 우리는 이미했던 것을 취해서 약간 움직이게 할 것입니다.
그래서 결국 우리는 모든 키를 누를 때마다 무작위로 원과 색깔로 원을 만듭니다.
그리고 크기 애니메이션도 얻습니다.
그래서 당신이 색상을 바꾸어 주실 수 있는지 모르겠지만 색상에 조금 더하는 것만으로도 멋져요.
그러나 그것들 중 어느 하나가 우리가 시작하도록 할 것입니다.
실제로이 원의 색상을 변경하기 시작합니다. 실제로 원의 색상을 변경하여 더 간단하게 시작할 것입니다.
그래서 그들 모두는 나중에 올 것이다.
Paperchase로 이동하면 자습서로 돌아가서 하단의 애니메이션을 봅니다.
먼저 할 수있는 일 중 일부를 살펴 보는 것입니다.
다음은 그 예입니다.
실제로 애니메이션을 실제로 실제로하는 것은 정말 간단하다는 것을 알 수 있습니다.
우리가하는 일은이 경우에 사각형을 정의하는 것입니다.
우리의 경우 그것은 원형이 될 것이고 프레임에 이것이 있습니다. 우리가 여기에 넣은 코드는 애니메이션의 모든 프레임에서 실행됩니다.
그래서이 경우이 애니메이션의 모든 프레임을이 사각형을 3도 회전합니다.이 경우에는 모든 프레임을 사용하여 여기서 정의한이 원의 색조에 하나를 더합니다.
그래서 이것을 시도해 봅시다.
키를 누르지 않고 새로운 서클을 만들자.
그래서 이것은 페이지가로드 될 때 항상 거기에있을 것입니다.
그래서 우리는 그것을 var animate circle이라고 할 것이고 새로운 경로 점 원과 같을 것이고 새로운 점이 될 것이며이 원을 300 쉼표 300과 반지름으로 만들자.
100을 더 크게 만들자.
그냥 그렇게.
그러면 도트 채우기 색상을 애니메이션화하는 것보다는 움직이는 원을 애니메이션화하는 것입니다. 그런 것처럼 시작하려면 빨간색으로 설정하십시오.
큰.
그래서 애니메이션이 될 수는 없지만 새로 고침을하면 큰 원이 생기며 키를 누를 때마다 무작위로 작은 원이 생깁니다.
이제 애니메이션을 추가해야하며 프레임에서 함수를 보았을 때 정말 간단합니다.이 이벤트 인수를 제외하고는 전달하거나 전달할 수 있습니다.
만약 우리가 그것에 대해 어떤 데이터를 원한다면 우리는 각각의 프레임으로 무엇인가를하고 싶었습니다. 실제로 그것을 필요로하지는 않습니다.
그리고 여기에있는 모든 것은 당신이 플러스 인 하나의 애니메이션 원 도트 채움 색상입니다.
그리고 이것은 바로 그 예에서 나온 것입니다.
그래서 애니메이션이 우리에게 달려 있지 않은 새로운 프레임을 요청할 때마다 프레임 속도를 결정하지 않고 얼마나 자주이 코드가 호출되는지를 결정합니다.
종이가 처리하는 새로운 프레임이있을 때마다 우리는 애니메이션 원의 색조에 하나를 추가합니다.
새로 고침하자 거기에 우리가 간다.
그런 종류의 애니메이션을하는 것은 정말로 정말로 간단합니다.
뭔가의 위치가 바뀌더라도 조금 더 복잡하지만 애니메이션을 할 수 있습니다.
이 점은 한 지점에서 다른 지점으로 움직이는 것이 아니라 고르게 가속화되기 때문에이 예제는 더욱 복잡해집니다.
그래서 좀 더 복잡하지만 여전히 몇 줄 밖에 없습니다.
움직이는 것의 또 다른 예가 있습니다.
다른 애니메이션들.
우리가해야 할 일은 그들이 보여주지 않는 것을 사용하는 것입니다. 그리고 우리가하고 싶은 것을 문서로 파고 들기 위해 여기 몇 시간을 소비하는 예제는 매 프레임마다 하나씩 스케일을 조정하는 것입니다.
그래서 우리가하는 것은 기본적으로 우리가 원을 만들 때 열쇠를 누를 때입니다.
300 또는 300의 반경으로 300 또는 300의 반경으로 시작한다고 가정 해 봅시다. 모든 프레임에서 그 캐릭터를 치거나 기본적으로 포인트 9 9 포인트 9로 스케일링하면 약간 축소됩니다.
정확한 숫자는 잊지 만 모든 프레임에 작은 크기를 곱하면 줄어들고 축소되므로 사라집니다.
그래서 어떻게 작동하는지 보여 드리겠습니다.
우리의 코드로 돌아가서, 원에 애니메이션을 추가하고, 프레임에 안쪽에 색을 더하는 것보다
우리가하는 일은 움직이는 원의 도트 눈금을 사용하는 것입니다.이 방법은 발견 된 방법이며, 우리가 그것을 그냥 남겨두면 같은 크기를 유지하여 실제로 볼 수 없습니다.
그러나 우리가 포인트 9와 같은 일을하고 리프레시한다면 우리는 모든 프레임 변화 헤베를 1로 갈 것입니다.
그리고 그것은 이전 프레임에 있었던 것의 9 또는 90 % 포인트로 조정됩니다.
따라서 점 9와 같은 것으로 변경하면 느린 전환이되고 포인트 5와 같은 것으로 변경하면 매우 빠르게 축소됩니다.
그래서 모든 프레임은 이전 실행 에서처럼 절반만큼 커집니다.
그래서 저는 Point 9가 시작되었다고 생각합니다.
그래서 우리는 그것을 남겨 둘 것입니다.
그리고 이제 우리는 하나의 원이 색이 바뀌고 다음으로하고 싶은 것이 줄어들면 다른 키를 누르게됩니다.
그 서클들이 똑같은 일을하기를 원한다면 조금 더 복잡해지기를 바랍니다.
하지만 정직하게 말하면 코드가 동일하게 유지된다는 점은 페이지에있는 모든 서클에 대해이 작업을 수행해야한다는 것입니다.
그리고 이것은 아마도 실제로 수행 할 작업을 결정 짓는 가장 과감한 변화 일 것입니다. 일련의 서클을 가지고 있고 키를 누를 때마다 그 새로운 배열에 서클을 추가 할 것입니다. 왜냐하면 현재 우리는 실제로 모든 것을 추적하지 않기 때문입니다 우리는 어떻게 든 그들을 모두 구할 필요가있는 원들입니다.
그래서이 함수의 바로 여기 프레임에서 이미 존재하고 움직이는 모든 원을 다시 참조 할 수 있습니다.
그래서 우리는이 코드를 보관할 것입니다.
그러나 우리가하고 싶은 것은 존재하지 않는 배열을 반복하는 것입니다. 그래서 우리는 단지 그것을 원이라고 부를 것입니다.
따라서 var i에 대해 Ayas는 Circle StarLink보다 작습니다.
플러스 플러스 우리가하고 싶은 일은 서클입니다.
나는 여기에 색을 채 웁니다.
먼저 채우기 색상으로 시작하겠습니다.
그래서이 줄을 복사 할 것입니다.
그래서 원은 존재하지 않기 때문에 아직 작동하지 않습니다.
그러나 아이디어는 모든 프레임에서이 배열의 모든 원을 반복하고 모든 프레임마다 각 색상에 하나씩 추가한다는 것입니다.
그리고 당신은 그것이 꽤 강렬하다고 생각할지도 모릅니다. 그리고 그것은 많은 일들이 일어나고 있지만 종이가 그것을 돌봐줍니다.
그러나 우리는 마지막에 약간의 최적화를 추가 할 것이므로 앞으로 비디오에서 내가 의미하는 바를 알려 드리겠습니다.
그러나 지금은 이것이 우리가 할 일입니다.
이제 우리가해야 할 일은 실제로 서클 배열에 만드는 서클을 추가하여 서클에 대한 배열을 빈 배열로 정의한 다음 시작 키를 눌렀을 때 키를 누를 때 우리는 원을 그리다이 새로운 원을 원 안에 밀어 넣으십시오.이 새로운 경로를이 무작위 지점에서 원 밖으로 밀어냅니다.
현재 우리는 반지름이 10이고 kill 채우기 색을 주황색으로 재설정합니다.
그래서 우리는 이미 가지고있는 원을이 원의 배열로 밀어 넣고 있습니다.
그리고 모든 서클을 업데이트하고 있습니다.
따라서 원이 하나있을 수 있으며 20 개의 원이있을 수 있습니다.
주어진 시간에 100 개의 서클이있을 수 있습니다.
모든 항목을 반복하고 각 대기열에 하나씩 추가합니다. 지금 당장 살펴보고 새로 고침하면 아직 제대로 작동하지 않습니다.
그리고 이것이 푸시의 작동 원리에 대한 흥미로운 점을 불러옵니다.
그래서 제가 콘솔을 열면, 여기에있는 정의되지 않은 마음의 Prakriti 색조를 읽을 수 없다고 알려줍니다.
그래서 Phil의 Hugh 속성이 Phil 코드가 존재하지 않는다고 말하는 것은 아닙니다.
그럼 일정한 로그 원을 만들어 봅시다.
그리고 문제가 무엇인지 보게 될 것입니다.
이걸 열면 오류가있어서 멈췄다.
그러나 우리는 실제로 문자열을 실제 새로운 원이 아닌 배열에 추가했습니다.
우리가 추진하고있는 것은 새로운 서클을 만드는 새로운 서클이 아니기 때문입니다.
그리고 채우기 색을 주황색으로 설정합니다.
마지막으로 반환 된 것은 문자열 오렌지입니다.
따라서 최종 결과는 매번 오렌지 색을 넣는 것입니다.
우리가 원하는 게 아니야.
그래서 새로운 변수를 만들어서 새로운 원이라고 부르면 오렌지 원과 동등한 새로운 원형의 도트 채우기 색을 만들고 새 원을 넣을 것입니다.
따라서 이것을 편집하는 것보다는 보는 것이 중요하다고 생각합니다.
완전히 잠깐 저를 붙잡 았습니다. 그러나 그 부분을 묶어서 그 원을 지나가고 도트 채움 색이 오렌지와 같고, 그 모든 것을 다음과 같이 추가 한 방법을 이해하는 것이 중요합니다. 밀고있는 배열
우리는 단지 오렌지를 첨가하고 있었다.
그래서 우리는 그것을 고쳐야합니다.
이렇게 잘하면이 않습니다.
그리고 실제로 그것은 나는 알고 있습니다. 그러나 우리가 신선한 상태에서 새로운 서클을 무작위로 배치하면 Heugh는 모든 애니메이션을 완벽하게 만듭니다.
이제 이것을 크기에 맞게 수정 해 보겠습니다.
실제로 우리가 여기있는 것과 정확히 똑같은 라인입니다.
나는 로그가 아닌 우리의 상수를 제거 할 것이다.
우리는 원을 제외하고.
나는.
승인.
따라서 제가보기 전에 당신이 보여 주면 우리가 한 일을 복습 해 봅니다.
그래서 우리가 임의의 점 2에서 원으로 추가 한 임의의 키를 누르면 무작위 점을 만들어 임의의 점을 만들어 10 개의 반경을 가진 새로운 원을 만들고 실제로 그것을 솔루션에서 500 개 인 것과 일치하도록 변경합니다 우리는 필 카드를 오렌지색으로 시작하여 결국 바뀔 것입니다.
그런 다음 원을 배열이라는 배열로 푸시합니다.
그런 다음 새 프레임을 호출 할 때마다 모든 애니메이션 프레임을 모든 원을 반복합니다.
그리고 각각에 대해 우리는 hewe에 하나를 더하고 우리는 소수점 9로 스케일의 크기를 곱합니다.
그래서 우리는 프레임마다 작은 비트로 축소하고 있습니다.
하지만 프레임이 너무 많아서 실제로 빠르게 줄어들어 이제 페이지로드에서 시작되는 애니메이션 원을 제거 할 수 있습니다.
우리는 검은 색 화면으로 시작하고 싶지 않습니다.
그리고 키를 치면 서클이 추가됩니다.
그럼 해보 죠.
우리는 거기에 갈.
그래서 이것은 거의 똑같은 방식입니다.
다음은 소리입니다.
한 가지 큰 차이점은이 모든 키에 할당 된 색상이 있음을 나타내는 색입니다. Q이 파란색은 어두운 파란색 반입니다.
회색이야.
그래서 우리는 여기에 보라색을 붙였습니다. 우리는 모두 오렌지색으로 시작하고 색조를 바꾸도록 설정했습니다.
그래서 우리는 그것을 고쳐야 할 것입니다. 그러나 소리를 더할 때까지 기다려야합니다.
이제 끝났습니다.
현재는 서클 배열에서 해당 서클을 제거하지 않으므로이를 끝내는 작은 최적화가 있습니다.
따라서 원이 3 초 후에 사라 졌다는 것을 10 초 후에 알더라도 우리는 그것을 보지 못합니다.
기술적으로 그것은 여전히 ​​그 배열에 있습니다.
그래서 이상적이지 않습니다.
우리가 만든 만개의 서클이 있고 그 중 하나도 볼 수 없다면 우리는 그들 모두를 반복하고 싶지 않습니다.
마지막 동영상에서 내가 사라 졌거나 더 이상 가능하지 않다는 것을 알 때 서클을 삭제할 수있는 방법을 알려 드리겠습니다.