1
00:00:00,370 --> 00:00:01,460
OK 우리는 환영 할 것이다.

2
00:00:01,620 --> 00:00:06,430
그래서이 비디오에서 우리는 이미했던 것을 취해서 약간 움직이게 할 것입니다.

3
00:00:06,720 --> 00:00:17,360
그래서 결국 우리는 모든 키를 누를 때마다 무작위로 원과 색깔로 원을 만듭니다.

4
00:00:18,300 --> 00:00:21,120
그리고 크기 애니메이션도 얻습니다.

5
00:00:21,460 --> 00:00:26,980
그래서 당신이 색상을 바꾸어 주실 수 있는지 모르겠지만 색상에 조금 더하는 것만으로도 멋져요.

6
00:00:27,330 --> 00:00:30,220
그러나 그것들 중 어느 하나가 우리가 시작하도록 할 것입니다.

7
00:00:30,210 --> 00:00:37,950
실제로이 원의 색상을 변경하기 시작합니다. 실제로 원의 색상을 변경하여 더 간단하게 시작할 것입니다.

8
00:00:38,040 --> 00:00:40,660
그래서 그들 모두는 나중에 올 것이다.

9
00:00:40,680 --> 00:00:48,150
Paperchase로 이동하면 자습서로 돌아가서 하단의 애니메이션을 봅니다.

10
00:00:48,150 --> 00:00:51,400
먼저 할 수있는 일 중 일부를 살펴 보는 것입니다.

11
00:00:51,540 --> 00:00:53,180
다음은 그 예입니다.

12
00:00:53,730 --> 00:00:57,440
실제로 애니메이션을 실제로 실제로하는 것은 정말 간단하다는 것을 알 수 있습니다.

13
00:00:57,440 --> 00:01:01,260
우리가하는 일은이 경우에 사각형을 정의하는 것입니다.

14
00:01:01,260 --> 00:01:11,610
우리의 경우 그것은 원형이 될 것이고 프레임에 이것이 있습니다. 우리가 여기에 넣은 코드는 애니메이션의 모든 프레임에서 실행됩니다.

15
00:01:11,610 --> 00:01:28,200
그래서이 경우이 애니메이션의 모든 프레임을이 사각형을 3도 회전합니다.이 경우에는 모든 프레임을 사용하여 여기서 정의한이 원의 색조에 하나를 더합니다.

16
00:01:28,980 --> 00:01:31,580
그래서 이것을 시도해 봅시다.

17
00:01:31,770 --> 00:01:35,290
키를 누르지 않고 새로운 서클을 만들자.

18
00:01:35,310 --> 00:01:38,290
그래서 이것은 페이지가로드 될 때 항상 거기에있을 것입니다.

19
00:01:38,430 --> 00:01:55,870
그래서 우리는 그것을 var animate circle이라고 할 것이고 새로운 경로 점 원과 같을 것이고 새로운 점이 될 것이며이 원을 300 쉼표 300과 반지름으로 만들자.

20
00:01:56,010 --> 00:01:58,200
100을 더 크게 만들자.

21
00:01:58,560 --> 00:01:59,870
그냥 그렇게.

22
00:02:00,150 --> 00:02:12,380
그러면 도트 채우기 색상을 애니메이션화하는 것보다는 움직이는 원을 애니메이션화하는 것입니다. 그런 것처럼 시작하려면 빨간색으로 설정하십시오.

23
00:02:12,540 --> 00:02:13,790
큰.

24
00:02:13,890 --> 00:02:22,260
그래서 애니메이션이 될 수는 없지만 새로 고침을하면 큰 원이 생기며 키를 누를 때마다 무작위로 작은 원이 생깁니다.

25
00:02:22,260 --> 00:02:33,640
이제 애니메이션을 추가해야하며 프레임에서 함수를 보았을 때 정말 간단합니다.이 이벤트 인수를 제외하고는 전달하거나 전달할 수 있습니다.

26
00:02:33,660 --> 00:02:39,560
만약 우리가 그것에 대해 어떤 데이터를 원한다면 우리는 각각의 프레임으로 무엇인가를하고 싶었습니다. 실제로 그것을 필요로하지는 않습니다.

27
00:02:39,840 --> 00:02:48,050
그리고 여기에있는 모든 것은 당신이 플러스 인 하나의 애니메이션 원 도트 채움 색상입니다.

28
00:02:48,120 --> 00:02:50,750
그리고 이것은 바로 그 예에서 나온 것입니다.

29
00:02:50,820 --> 00:02:59,730
그래서 애니메이션이 우리에게 달려 있지 않은 새로운 프레임을 요청할 때마다 프레임 속도를 결정하지 않고 얼마나 자주이 코드가 호출되는지를 결정합니다.

30
00:02:59,790 --> 00:03:08,160
종이가 처리하는 새로운 프레임이있을 때마다 우리는 애니메이션 원의 색조에 하나를 추가합니다.

31
00:03:08,160 --> 00:03:10,650
새로 고침하자 거기에 우리가 간다.

32
00:03:10,650 --> 00:03:13,720
그런 종류의 애니메이션을하는 것은 정말로 정말로 간단합니다.

33
00:03:13,830 --> 00:03:21,250
뭔가의 위치가 바뀌더라도 조금 더 복잡하지만 애니메이션을 할 수 있습니다.

34
00:03:21,270 --> 00:03:31,360
이 점은 한 지점에서 다른 지점으로 움직이는 것이 아니라 고르게 가속화되기 때문에이 예제는 더욱 복잡해집니다.

35
00:03:31,410 --> 00:03:35,630
그래서 좀 더 복잡하지만 여전히 몇 줄 밖에 없습니다.

36
00:03:36,600 --> 00:03:39,830
움직이는 것의 또 다른 예가 있습니다.

37
00:03:40,500 --> 00:03:42,610
다른 애니메이션들.

38
00:03:42,610 --> 00:03:56,280
우리가해야 할 일은 그들이 보여주지 않는 것을 사용하는 것입니다. 그리고 우리가하고 싶은 것을 문서로 파고 들기 위해 여기 몇 시간을 소비하는 예제는 매 프레임마다 하나씩 스케일을 조정하는 것입니다.

39
00:03:56,340 --> 00:04:00,360
그래서 우리가하는 것은 기본적으로 우리가 원을 만들 때 열쇠를 누를 때입니다.

40
00:04:00,390 --> 00:04:15,680
300 또는 300의 반경으로 300 또는 300의 반경으로 시작한다고 가정 해 봅시다. 모든 프레임에서 그 캐릭터를 치거나 기본적으로 포인트 9 9 포인트 9로 스케일링하면 약간 축소됩니다.

41
00:04:15,720 --> 00:04:24,760
정확한 숫자는 잊지 만 모든 프레임에 작은 크기를 곱하면 줄어들고 축소되므로 사라집니다.

42
00:04:25,110 --> 00:04:26,940
그래서 어떻게 작동하는지 보여 드리겠습니다.

43
00:04:27,090 --> 00:04:36,910
우리의 코드로 돌아가서, 원에 애니메이션을 추가하고, 프레임에 안쪽에 색을 더하는 것보다

44
00:04:37,110 --> 00:04:55,760
우리가하는 일은 움직이는 원의 도트 눈금을 사용하는 것입니다.이 방법은 발견 된 방법이며, 우리가 그것을 그냥 남겨두면 같은 크기를 유지하여 실제로 볼 수 없습니다.

45
00:04:55,970 --> 00:05:08,600
그러나 우리가 포인트 9와 같은 일을하고 리프레시한다면 우리는 모든 프레임 변화 헤베를 1로 갈 것입니다.

46
00:05:08,960 --> 00:05:14,560
그리고 그것은 이전 프레임에 있었던 것의 9 또는 90 % 포인트로 조정됩니다.

47
00:05:14,570 --> 00:05:30,540
따라서 점 9와 같은 것으로 변경하면 느린 전환이되고 포인트 5와 같은 것으로 변경하면 매우 빠르게 축소됩니다.

48
00:05:30,680 --> 00:05:34,090
그래서 모든 프레임은 이전 실행 에서처럼 절반만큼 커집니다.

49
00:05:34,280 --> 00:05:37,180
그래서 저는 Point 9가 시작되었다고 생각합니다.

50
00:05:37,370 --> 00:05:39,040
그래서 우리는 그것을 남겨 둘 것입니다.

51
00:05:39,140 --> 00:05:46,530
그리고 이제 우리는 하나의 원이 색이 바뀌고 다음으로하고 싶은 것이 줄어들면 다른 키를 누르게됩니다.

52
00:05:46,730 --> 00:05:52,300
그 서클들이 똑같은 일을하기를 원한다면 조금 더 복잡해지기를 바랍니다.

53
00:05:52,490 --> 00:06:01,410
하지만 정직하게 말하면 코드가 동일하게 유지된다는 점은 페이지에있는 모든 서클에 대해이 작업을 수행해야한다는 것입니다.

54
00:06:01,790 --> 00:06:17,380
그리고 이것은 아마도 실제로 수행 할 작업을 결정 짓는 가장 과감한 변화 일 것입니다. 일련의 서클을 가지고 있고 키를 누를 때마다 그 새로운 배열에 서클을 추가 할 것입니다. 왜냐하면 현재 우리는 실제로 모든 것을 추적하지 않기 때문입니다 우리는 어떻게 든 그들을 모두 구할 필요가있는 원들입니다.

55
00:06:17,420 --> 00:06:26,240
그래서이 함수의 바로 여기 프레임에서 이미 존재하고 움직이는 모든 원을 다시 참조 할 수 있습니다.

56
00:06:26,840 --> 00:06:28,210
그래서 우리는이 코드를 보관할 것입니다.

57
00:06:28,610 --> 00:06:33,770
그러나 우리가하고 싶은 것은 존재하지 않는 배열을 반복하는 것입니다. 그래서 우리는 단지 그것을 원이라고 부를 것입니다.

58
00:06:33,770 --> 00:06:42,230
따라서 var i에 대해 Ayas는 Circle StarLink보다 작습니다.

59
00:06:42,690 --> 00:06:47,420
플러스 플러스 우리가하고 싶은 일은 서클입니다.

60
00:06:47,580 --> 00:06:50,260
나는 여기에 색을 채 웁니다.

61
00:06:50,260 --> 00:06:54,130
먼저 채우기 색상으로 시작하겠습니다.

62
00:06:54,140 --> 00:06:56,500
그래서이 줄을 복사 할 것입니다.

63
00:06:58,550 --> 00:07:01,050
그래서 원은 존재하지 않기 때문에 아직 작동하지 않습니다.

64
00:07:01,070 --> 00:07:11,590
그러나 아이디어는 모든 프레임에서이 배열의 모든 원을 반복하고 모든 프레임마다 각 색상에 하나씩 추가한다는 것입니다.

65
00:07:12,470 --> 00:07:18,760
그리고 당신은 그것이 꽤 강렬하다고 생각할지도 모릅니다. 그리고 그것은 많은 일들이 일어나고 있지만 종이가 그것을 돌봐줍니다.

66
00:07:18,890 --> 00:07:25,910
그러나 우리는 마지막에 약간의 최적화를 추가 할 것이므로 앞으로 비디오에서 내가 의미하는 바를 알려 드리겠습니다.

67
00:07:25,910 --> 00:07:27,780
그러나 지금은 이것이 우리가 할 일입니다.

68
00:07:28,340 --> 00:07:53,140
이제 우리가해야 할 일은 실제로 서클 배열에 만드는 서클을 추가하여 서클에 대한 배열을 빈 배열로 정의한 다음 시작 키를 눌렀을 때 키를 누를 때 우리는 원을 그리다이 새로운 원을 원 안에 밀어 넣으십시오.이 새로운 경로를이 무작위 지점에서 원 밖으로 밀어냅니다.

69
00:07:53,240 --> 00:07:58,180
현재 우리는 반지름이 10이고 kill 채우기 색을 주황색으로 재설정합니다.

70
00:07:58,220 --> 00:08:03,660
그래서 우리는 이미 가지고있는 원을이 원의 배열로 밀어 넣고 있습니다.

71
00:08:04,040 --> 00:08:06,830
그리고 모든 서클을 업데이트하고 있습니다.

72
00:08:06,830 --> 00:08:09,950
따라서 원이 하나있을 수 있으며 20 개의 원이있을 수 있습니다.

73
00:08:10,070 --> 00:08:12,270
주어진 시간에 100 개의 서클이있을 수 있습니다.

74
00:08:12,320 --> 00:08:21,670
모든 항목을 반복하고 각 대기열에 하나씩 추가합니다. 지금 당장 살펴보고 새로 고침하면 아직 제대로 작동하지 않습니다.

75
00:08:21,770 --> 00:08:25,550
그리고 이것이 푸시의 작동 원리에 대한 흥미로운 점을 불러옵니다.

76
00:08:25,550 --> 00:08:34,570
그래서 제가 콘솔을 열면, 여기에있는 정의되지 않은 마음의 Prakriti 색조를 읽을 수 없다고 알려줍니다.

77
00:08:35,150 --> 00:08:41,490
그래서 Phil의 Hugh 속성이 Phil 코드가 존재하지 않는다고 말하는 것은 아닙니다.

78
00:08:41,540 --> 00:08:43,870
그럼 일정한 로그 원을 만들어 봅시다.

79
00:08:44,330 --> 00:08:48,390
그리고 문제가 무엇인지 보게 될 것입니다.

80
00:08:49,100 --> 00:08:53,610
이걸 열면 오류가있어서 멈췄다.

81
00:08:53,780 --> 00:09:00,390
그러나 우리는 실제로 문자열을 실제 새로운 원이 아닌 배열에 추가했습니다.

82
00:09:00,530 --> 00:09:06,710
우리가 추진하고있는 것은 새로운 서클을 만드는 새로운 서클이 아니기 때문입니다.

83
00:09:06,740 --> 00:09:09,470
그리고 채우기 색을 주황색으로 설정합니다.

84
00:09:09,500 --> 00:09:13,010
마지막으로 반환 된 것은 문자열 오렌지입니다.

85
00:09:13,010 --> 00:09:16,780
따라서 최종 결과는 매번 오렌지 색을 넣는 것입니다.

86
00:09:16,850 --> 00:09:18,530
우리가 원하는 게 아니야.

87
00:09:19,190 --> 00:09:35,920
그래서 새로운 변수를 만들어서 새로운 원이라고 부르면 오렌지 원과 동등한 새로운 원형의 도트 채우기 색을 만들고 새 원을 넣을 것입니다.

88
00:09:35,990 --> 00:09:40,480
따라서 이것을 편집하는 것보다는 보는 것이 중요하다고 생각합니다.

89
00:09:40,760 --> 00:09:56,450
완전히 잠깐 저를 붙잡 았습니다. 그러나 그 부분을 묶어서 그 원을 지나가고 도트 채움 색이 오렌지와 같고, 그 모든 것을 다음과 같이 추가 한 방법을 이해하는 것이 중요합니다. 밀고있는 배열

90
00:09:56,560 --> 00:09:57,800
우리는 단지 오렌지를 첨가하고 있었다.

91
00:09:57,830 --> 00:09:59,980
그래서 우리는 그것을 고쳐야합니다.

92
00:10:00,110 --> 00:10:01,290
이렇게 잘하면이 않습니다.

93
00:10:01,310 --> 00:10:15,290
그리고 실제로 그것은 나는 알고 있습니다. 그러나 우리가 신선한 상태에서 새로운 서클을 무작위로 배치하면 Heugh는 모든 애니메이션을 완벽하게 만듭니다.

94
00:10:15,290 --> 00:10:17,450
이제 이것을 크기에 맞게 수정 해 보겠습니다.

95
00:10:17,570 --> 00:10:21,550
실제로 우리가 여기있는 것과 정확히 똑같은 라인입니다.

96
00:10:22,280 --> 00:10:23,860
나는 로그가 아닌 우리의 상수를 제거 할 것이다.

97
00:10:23,930 --> 00:10:26,140
우리는 원을 제외하고.

98
00:10:26,160 --> 00:10:28,420
나는.

99
00:10:30,680 --> 00:10:31,370
승인.

100
00:10:31,730 --> 00:10:36,420
따라서 제가보기 전에 당신이 보여 주면 우리가 한 일을 복습 해 봅니다.

101
00:10:36,440 --> 00:10:55,770
그래서 우리가 임의의 점 2에서 원으로 추가 한 임의의 키를 누르면 무작위 점을 만들어 임의의 점을 만들어 10 개의 반경을 가진 새로운 원을 만들고 실제로 그것을 솔루션에서 500 개 인 것과 일치하도록 변경합니다 우리는 필 카드를 오렌지색으로 시작하여 결국 바뀔 것입니다.

102
00:10:55,880 --> 00:10:58,840
그런 다음 원을 배열이라는 배열로 푸시합니다.

103
00:10:59,060 --> 00:11:07,200
그런 다음 새 프레임을 호출 할 때마다 모든 애니메이션 프레임을 모든 원을 반복합니다.

104
00:11:07,520 --> 00:11:13,310
그리고 각각에 대해 우리는 hewe에 하나를 더하고 우리는 소수점 9로 스케일의 크기를 곱합니다.

105
00:11:13,430 --> 00:11:17,260
그래서 우리는 프레임마다 작은 비트로 축소하고 있습니다.

106
00:11:17,360 --> 00:11:26,540
하지만 프레임이 너무 많아서 실제로 빠르게 줄어들어 이제 페이지로드에서 시작되는 애니메이션 원을 제거 할 수 있습니다.

107
00:11:26,540 --> 00:11:28,240
우리는 검은 색 화면으로 시작하고 싶지 않습니다.

108
00:11:28,250 --> 00:11:30,700
그리고 키를 치면 서클이 추가됩니다.

109
00:11:30,710 --> 00:11:33,320
그럼 해보 죠.

110
00:11:33,320 --> 00:11:37,110
우리는 거기에 갈.

111
00:11:37,130 --> 00:11:40,920
그래서 이것은 거의 똑같은 방식입니다.

112
00:11:40,980 --> 00:11:43,130
다음은 소리입니다.

113
00:11:43,130 --> 00:11:54,000
한 가지 큰 차이점은이 모든 키에 할당 된 색상이 있음을 나타내는 색입니다. Q이 파란색은 어두운 파란색 반입니다.

114
00:11:54,110 --> 00:11:55,810
회색이야.

115
00:11:55,980 --> 00:12:03,070
그래서 우리는 여기에 보라색을 붙였습니다. 우리는 모두 오렌지색으로 시작하고 색조를 바꾸도록 설정했습니다.

116
00:12:03,500 --> 00:12:08,500
그래서 우리는 그것을 고쳐야 할 것입니다. 그러나 소리를 더할 때까지 기다려야합니다.

117
00:12:08,510 --> 00:12:10,990
이제 끝났습니다.

118
00:12:11,210 --> 00:12:19,000
현재는 서클 배열에서 해당 서클을 제거하지 않으므로이를 끝내는 작은 최적화가 있습니다.

119
00:12:19,040 --> 00:12:25,490
따라서 원이 3 초 후에 사라 졌다는 것을 10 초 후에 알더라도 우리는 그것을 보지 못합니다.

120
00:12:25,490 --> 00:12:27,330
기술적으로 그것은 여전히 ​​그 배열에 있습니다.

121
00:12:27,620 --> 00:12:29,540
그래서 이상적이지 않습니다.

122
00:12:29,540 --> 00:12:36,170
우리가 만든 만개의 서클이 있고 그 중 하나도 볼 수 없다면 우리는 그들 모두를 반복하고 싶지 않습니다.

123
00:12:36,170 --> 00:12:43,090
마지막 동영상에서 내가 사라 졌거나 더 이상 가능하지 않다는 것을 알 때 서클을 삭제할 수있는 방법을 알려 드리겠습니다.