1
00:00:00,240 --> 00:00:00,610
승인.

2
00:00:00,690 --> 00:00:01,960
여기에서 시작하겠습니다.

3
00:00:02,040 --> 00:00:07,390
그리고이 비디오는 Paperchase를 설치하고 간단한 간단한 애니메이션을 만드는 데 중점을 둘 것입니다.

4
00:00:07,440 --> 00:00:09,110
그래서 아직 오디오가 없습니다.

5
00:00:09,120 --> 00:00:12,400
우선 내가 지적 할 것은 내가 만든 새로운 디렉토리에 있습니다.

6
00:00:12,720 --> 00:00:14,930
여기에 소리 디렉토리를 추가했습니다.

7
00:00:14,940 --> 00:00:19,970
따라서 사운드를 재생하지 않으므로 반드시이 비디오를 재생할 필요는 없습니다.

8
00:00:19,980 --> 00:00:26,820
하지만 디렉토리를 따라 가려면 해당 사운드 폴더를 드래그하거나 복사해야합니다.

9
00:00:26,850 --> 00:00:38,650
다음으로해야 할 일은 파일을 만들어 올바른 디렉토리에 파일을 저장하게하고 매번 그 파일을 서클이라고 부를 것입니다.

10
00:00:39,810 --> 00:00:46,490
글쎄, 나는 우리 팀의 L. skeleton을 물론 그렇게하고 우리는 지금 당장 그것을 남겨 둘 것입니다.

11
00:00:46,800 --> 00:00:51,110
그래서 열어 보자. 아무 것도 볼 수 없어야한다.

12
00:00:51,120 --> 00:00:53,710
이제 종이 천재로 가자.

13
00:00:54,000 --> 00:00:55,370
다시 한번 나는 이것을 정말로 좋아한다.

14
00:00:55,560 --> 00:01:00,530
그러나 우리는 이것에서 벗어나 시작할 것이고 우리는 시작하기 위해 다운로드하러 갈 것입니다.

15
00:01:01,350 --> 00:01:07,140
그리고 우리가 할 첫 번째 일은 내가 실제로 한 가장 최근의 버전을 다운로드하는 것입니다.

16
00:01:07,260 --> 00:01:10,810
그래서 그걸로 끝나면 이렇게 보일 것입니다.

17
00:01:11,010 --> 00:01:15,050
그리고 우리가 할 수있는 첫 번째 일은 examples 디렉토리를 살펴 보는 것입니다.

18
00:01:15,090 --> 00:01:19,600
애니메이션 애니메이션 스타에 대해 살펴 보겠습니다.

19
00:01:19,860 --> 00:01:23,880
이것으로 놀아나 기 즐거운 재미는 나를 어지럽게합니다. 그래서 나는 그것을 막을 것입니다.

20
00:01:23,880 --> 00:01:26,280
그러나 다른 것들도 살펴볼 수 있습니다.

21
00:01:26,280 --> 00:01:28,300
사탕 추락.

22
00:01:29,310 --> 00:01:32,010
그래서 당신이 할 수있는 멋진 애니메이션이 있습니다.

23
00:01:32,130 --> 00:01:35,590
여기에는 약간의 물리학이 관련되어 있습니다.

24
00:01:35,610 --> 00:01:38,120
그 밖의 무엇을 우리는 가지고 있습니다.

25
00:01:38,130 --> 00:01:45,110
이 멋진 라인 애니메이션과 다른 것들은 당신입니다.

26
00:01:45,110 --> 00:01:49,290
마우스를 움직일 때이 시차 효과가 정말 좋았습니다.

27
00:01:49,830 --> 00:01:50,150
승인.

28
00:01:50,190 --> 00:01:52,400
그래서 당신은 이것을하는 데 몇 시간을 보낼 수 있습니다.

29
00:01:52,410 --> 00:01:55,450
원한다면 열 수있는 훌륭한 예제가 많이 있습니다.

30
00:01:55,470 --> 00:01:56,980
그것이 어떻게 작동하는지보십시오.

31
00:01:57,060 --> 00:02:04,500
그래서 우리가 종이 J를 포함하고 있다는 것을 알게 될 첫 번째 공간을 보도록하겠습니다.

32
00:02:04,590 --> 00:02:08,060
우리는 Jay Querrey와 마찬가지로 파일을 필요로합니다.

33
00:02:08,460 --> 00:02:16,070
그러나 이전에 보지 못했던 것이 있습니다. 스크립트 유형이 텍스트 슬래시 (text slash) 용지 스크립트와 같습니다.

34
00:02:16,260 --> 00:02:29,240
그래서 특정 유형의 파일이나 스크립트를 작성할 수 있습니다.이 스크립트는 기본적으로 paperchase를 위해 만들어진 언어 인 도메인 특정 언어 인 paper script라고 쓸 수 있습니다.

35
00:02:29,250 --> 00:02:33,350
따라서 Paperchase가 포함되어 있지 않으면 효과가있는 것은 아닙니다.

36
00:02:33,570 --> 00:02:37,960
그리고이 캔버스 특성 캔버스가 캔버스와 동일한 것을 볼 수 있습니다.

37
00:02:37,980 --> 00:02:42,370
그래서 이것은 캔버스가 오래된 찬송가 요소라는 것이 이상합니다.

38
00:02:42,540 --> 00:02:45,550
그래서 실제로 우리가하는 모든 것입니다.

39
00:02:45,600 --> 00:02:47,590
지금 당장 당신에게 보여 드리겠습니다.

40
00:02:47,730 --> 00:02:50,280
이것은 작동 버전 또는 최종 버전입니다.

41
00:02:50,380 --> 00:02:54,070
먼저 어떻게 작동하는지 보여주기 위해 살펴 봅니다.

42
00:02:54,070 --> 00:02:59,450
다시 한번 살펴보면 검정색 배경을 검사합니다. 신체가 아닙니다.

43
00:02:59,700 --> 00:03:08,040
이것은 캔버스라고 불리는 것으로 캔버스는 기본적으로 애니메이션과 그래픽 작업을 수행하는 HMO 요소입니다.

44
00:03:08,280 --> 00:03:19,010
그래서 DN에 가면 캔버스 모양으로 각 연기 대마초 요소에 5 살짜리 냄새를 추가하면 자바 스크립트에서 스크립트로 그래픽을 그릴 수 있습니다.

45
00:03:19,290 --> 00:03:20,300
그래서 그게 전부입니다.

46
00:03:20,310 --> 00:03:26,000
캔버스에있는 요소로 자바 스크립트가 없으면 실제로는 아무 것도하지 않습니다.

47
00:03:26,280 --> 00:03:37,140
그런 다음 자바 스크립트를 추가하여 여기에 직사각형을 만들어 녹색으로 만들어 3 차원 모양으로 만들어이 애니메이션을 만들고 자바 스크립트로 그 모든 작업을 수행합니다.

48
00:03:37,140 --> 00:03:40,830
그래서 종이 J.S. canvas 요소를 사용합니다.

49
00:03:40,920 --> 00:03:45,000
모든 그래픽에서 모든 애니메이션을 추가하는 단계입니다.

50
00:03:45,000 --> 00:03:49,140
따라서 우리는이 공간 예제에서 볼 수있는 것처럼 페이지에 캔버스가 있어야합니다.

51
00:03:49,560 --> 00:03:59,760
제가 맨 아래로 가면 몸 속에있는 유일한 것이 캔버스이고 여기에는 캔버스와 동일한 ID와 검은 색으로 설정된 배경이 있습니다.

52
00:03:59,850 --> 00:04:04,500
그래서 이드는 캔버스가 여기에 해당합니다.

53
00:04:04,500 --> 00:04:06,300
캔버스는 캔버스와 같습니다.

54
00:04:06,300 --> 00:04:16,460
그래서이 종이 스크립트 파일이나이 페이퍼 스크립트 스크립트에 방금 이름을 지정했지만 캔버스 예제에서 어떤 ID를 찾을 것인지 알려줍니다.

55
00:04:16,800 --> 00:04:18,890
그래서 우리는 이와 비슷한 것을 할 것입니다.

56
00:04:18,930 --> 00:04:22,820
그러나 우리가 거기에 가기 전에 우리는 종이 예를 포함 할 필요가있다.

57
00:04:23,220 --> 00:04:26,250
다운로드 할 때.

58
00:04:26,250 --> 00:04:35,870
그리고 예제를 열지 않고 색인을 생성 한 다음 전체 또는 전체를 선택하여 전체를 이해할 수 있습니다.

59
00:04:35,910 --> 00:04:47,410
그래서 나는 그것을 우리 디렉토리에 복사 할 것입니다. 그래서 종이 Dasch가 가득 찼지 만 우리 자신의 응용 프로그램에서 우리는 그것을 포함해야합니다.

60
00:04:47,670 --> 00:04:55,200
그래서 Source는 그것과 똑같은 종이 Dasch 전체 japes와 동일하게 저장합니다.

61
00:04:55,620 --> 00:04:59,760
Chrome에서 페이지를 새로 고침하면됩니다.

62
00:05:00,120 --> 00:05:01,630
오류가 발생하지 않도록하십시오.

63
00:05:01,740 --> 00:05:02,390
큰.

64
00:05:02,430 --> 00:05:04,590
그래서 파일이 잘 찾아 냈습니다.

65
00:05:04,590 --> 00:05:11,580
이제는 종이 천재의 문서로 가서 자습서를보고 실제로 그렇게하지 않았습니다.

66
00:05:12,120 --> 00:05:15,490
그러나 JSA가 어떤 종이인지에 대한 설명을 읽고 싶습니다.

67
00:05:15,780 --> 00:05:21,960
오픈 소스 벡터 그래픽 스크립팅 프레임 워크는 제 5 캔버스의 시대를 뛰어 넘은 것입니다.

68
00:05:22,080 --> 00:05:35,950
그것은 깨끗한 장면 그래프 슬래시 문서 객체 모델과 잘 짜여진 일관되고 깨끗한 프로그래밍 인터페이스로 깔끔하게 정리 된 벡터 그래픽과 베 지어 곡선을 만들고 작동시키는 많은 강력한 기능을 제공합니다.

69
00:05:36,000 --> 00:05:37,540
일종의 입 가득.

70
00:05:37,560 --> 00:05:42,120
기본적으로 그것은 라이브러리 애니메이션 라이브러리 그래픽 라이브러리를 그리는 엉덩이 엉덩이.

71
00:05:42,120 --> 00:05:43,560
그건 정말 인기가 있어요.

72
00:05:43,560 --> 00:05:52,270
거기에 그들 중 몇 가지가 있습니다 그래서 그것은 하나의 DOM 조작 라이브러리 꽤 많은 쿼리가 아니에요.

73
00:05:52,290 --> 00:05:54,030
하나의 이벤트 핸들링 라이브러리.

74
00:05:54,030 --> 00:06:00,790
그래픽에는 많은 애니메이션이 있지만 종이가 가장 대중적이라는 것을 확신합니다.

75
00:06:01,110 --> 00:06:06,660
좋습니다. 자습서로 돌아가서 시작하는 방법을 살펴 보겠습니다.

76
00:06:06,660 --> 00:06:09,000
나는 네가 종이 작업을 시작한다고 생각합니다.

77
00:06:09,020 --> 00:06:09,900
예.

78
00:06:10,470 --> 00:06:14,280
아래로 스크롤하여 여기에서 예제를 살펴 보겠습니다.

79
00:06:14,820 --> 00:06:17,380
그래서 우리가 할 수있는 일은이 모든 것을 복사하는 것입니다.

80
00:06:17,400 --> 00:06:21,290
하지만 한 번에 하나씩 해보고 어떻게 작동하는지 봅니다.

81
00:06:21,540 --> 00:06:29,270
이 캔버스를 복사하여 전체 선을 복사 해 보겠습니다. 우리는 그것을 우리 몸에 넣을 것입니다.

82
00:06:29,970 --> 00:06:36,180
그래서 I.D. 캔버스. 내 캔버스와 같고 페이지를 새로 고침하면 전혀 볼 수 없습니다.

83
00:06:36,270 --> 00:06:48,260
우리가 거기에 캔버스가 있다는 것을 알기를 원한다면 우리가 돌아 가면이 스크립트 텍스트 나 문자를 복사 해 보겠습니다. 왜냐하면 텍스트 크기의 종이 스크립트 캔버스가 제 캔버스이기 때문입니다.

84
00:06:48,260 --> 00:06:52,850
여기에 붙여 넣으십시오.

85
00:06:53,130 --> 00:07:00,000
그래서 여기서 무슨 일이 일어나고 있는지 살펴보면 멋진 그림은 선을 그리기위한 종이 G-S 경로를 생성한다고 말합니다.

86
00:07:00,120 --> 00:07:04,400
그래서 우리는 길을 만들었고 당신은 지금까지 보지 못한 많은 문법을 보게 될 것입니다.

87
00:07:04,410 --> 00:07:05,730
그리고 또 그것이 요점입니다.

88
00:07:05,940 --> 00:07:09,740
요점은 당신이 문서를 읽는 새로운 것을 볼 것을 강요합니다.

89
00:07:09,800 --> 00:07:17,890
이 감정에 당신을 둔감하게 할 수 있습니다. 어떻게 작동하는지 모르기 전에이 코드를 본 적이 없습니다.

90
00:07:17,940 --> 00:07:19,370
그것이 바로 도서관의 요점입니다.

91
00:07:19,380 --> 00:07:23,310
특히 애니메이션과 같은 경우에 어떻게 작동하는지 알 필요가 없습니다.

92
00:07:23,310 --> 00:07:26,120
다른 누군가가 당신을 위해 돌보고 있기 때문에 기뻐하십시오.

93
00:07:26,130 --> 00:07:28,700
나는 그것이 내 삶을 여러 번 구해준 것입니다.

94
00:07:28,920 --> 00:07:33,070
그래서 여기에 새로운 경로를 만들어 변수에 저장하십시오.

95
00:07:33,070 --> 00:07:50,960
획 색상을 검정색으로 변경 한 다음 시작점을 100 쉼표 100으로 작성한 다음 경로를 해당 시작점으로 이동 한 다음 시작점을 100 X와 음수 50 y로 시작하는 선을 그립니다.

96
00:07:51,210 --> 00:08:04,800
그래서 정확히 무엇을하는지 보여 드리 겠지만 100 100부터 시작하여 그 라인을 움직이거나 첫 번째 포인트를 300 쉼표 50으로 연결합니다.

97
00:08:04,800 --> 00:08:09,260
따라서 우리가 신선하다면 모든 것이 제대로 작동하는지 확인하십시오.

98
00:08:10,260 --> 00:08:12,160
우리는 한 줄로 끝난다.

99
00:08:13,170 --> 00:08:16,730
그래서 이런 식으로 새로운 것을 할 때 가장 좋은 방법은 주위를 노는 것입니다.

100
00:08:17,040 --> 00:08:18,480
그래서 이것을 바꿔보십시오.

101
00:08:18,630 --> 00:08:25,980
그래서 빨간색이고 시작은 0 100입니다.

102
00:08:25,980 --> 00:08:33,250
우리는 우리가 가선을 옮겼거나 이것을 500과 같이 더 과감한 것으로 바꾸어 보겠습니다.

103
00:08:33,510 --> 00:08:36,070
그래서 하루 종일 이것으로 놀 수 있습니다.

104
00:08:36,420 --> 00:08:51,580
하지만 제가 정말로 지적하고 싶은 것은 텍스트가 아닌 종이 스크립트 스크립트를 작성하고 있으므로 자바 스크립트 종이 스크립트이고이 캔버스 속성 캔버스는 우리가 지정한 이름 또는 ID 인 캔버스와 같습니다.

105
00:08:51,660 --> 00:08:58,530
그래서 이것들은 일치해야만합니다. 그리고 그 전체 요점은이 종이 스크립트 파일에 어디에 물건을 그릴지를 알려주는 것입니다.

106
00:08:58,560 --> 00:09:00,040
어떤 캔버스를 사용할 것인가.

107
00:09:00,300 --> 00:09:02,360
그래서 우리는 좀 더 놀 수 있습니다.

108
00:09:02,460 --> 00:09:10,890
그리고 비디오를 중단하고 튜토리얼을보고 다른 것을 시도해 보는 것이 좋습니다.

109
00:09:11,100 --> 00:09:17,720
그래서 저는 우리가 사용하게 될 경로의 미리 정의 된 모양으로 여러분을 안내 할 것입니다.

110
00:09:17,820 --> 00:09:21,280
여기에서 우리는 응용 프로그램과 함께 서클을 만들 것입니다.

111
00:09:21,690 --> 00:09:24,270
이것이 우리가해야 할 일입니다.

112
00:09:24,690 --> 00:09:31,820
이 코드를 여기에 복사 해 가볍게 두드려 새로운 경로 점 원을 그린 다음 점을 써서 원을 만들어야합니다.

113
00:09:32,160 --> 00:09:34,240
그런 다음 반경이 생깁니다.

114
00:09:34,320 --> 00:09:44,690
그래서 설명이 있다는 것을 알 수 있습니다. 그래서 중심점 x 100 y 70과 반지름 50 그리고 그 다음 채우기 색이 필요합니다.

115
00:09:45,000 --> 00:09:51,120
이제 이것을 코드 하단에 복사하여 어떤 일이 발생하는지 살펴 보겠습니다.

116
00:09:51,720 --> 00:09:56,160
J S와 비슷한 라이브러리로 당신이 많이하는 일종입니다.

117
00:09:56,340 --> 00:09:57,340
방금 실험 해.

118
00:09:57,480 --> 00:10:01,520
이제 반경을 10으로 변경해 봅시다.

119
00:10:01,530 --> 00:10:02,880
됐어.

120
00:10:03,540 --> 00:10:09,000
그래서 우리는 이것을 다른 줄로 복사하여 또 다른 원을 그리도록 시도 할 수 있습니다.

121
00:10:09,150 --> 00:10:15,610
그것을 var circle 2가 새로운 경로 점과 같다고합시다.

122
00:10:15,840 --> 00:10:18,340
그리고 이것을 정말로 크고 자주색으로 만들어 봅시다.

123
00:10:18,630 --> 00:10:22,250
그래서 새로운 점을 50에 놓자.

124
00:10:22,250 --> 00:10:25,740
50이 오면 거대해질 것입니다.

125
00:10:25,740 --> 00:10:34,730
그래서 반지름을 300으로 지정하고 원을 채우면 원색이 보라색이됩니다.

126
00:10:34,830 --> 00:10:38,180
그 새로 고침처럼.

127
00:10:38,670 --> 00:10:46,740
그리고 그 거대한 원으로 끝나는 것을 볼 수 있습니다. 우리의 캔버스가 화면의 전체 너비를 차지하지 않았기 때문에 실제로 얼마나 큰지 알 수 없습니다.

128
00:10:46,950 --> 00:10:52,860
그러니 우리가 캔버스가 전체 너비를 차지하기를 원하기 때문에 다음으로 해봅시다.

129
00:10:52,860 --> 00:11:01,790
그래서 저는 새로운 스타일 시트를 만들어서 링크 태그를 추가했습니다. Tref는 존재하지 않는 원의 점 SS와 같습니다.

130
00:11:02,430 --> 00:11:12,210
그리고 나서 Circle Stut이라는 파일을 저장하고 평가 해 봅시다. 캔버스에 100 % 추가하십시오.

131
00:11:12,840 --> 00:11:17,930
그리고 검은 색 바탕을 주자.

132
00:11:17,930 --> 00:11:21,880
그리고 우리가 신선하다면 우리는 가깝다는 것을 알 수 있습니다. 그러나 우리에게는 몇 가지 것이 있습니다.

133
00:11:21,870 --> 00:11:25,210
첫 번째는 우리 몸이 실제로 완전히 내려 가지 않는다는 것입니다.

134
00:11:25,230 --> 00:11:28,860
그래서 우리의 캔버스는 너비의 100 %를 차지합니다.

135
00:11:28,980 --> 00:11:38,840
그러나 우리가 지금 100 % 높이를 주더라도 그것이 실제로 우리가 원하는 방식을 바꾸지 않을 것입니다.

136
00:11:38,850 --> 00:11:41,570
그 다음 우리는 우리가 제거하고 싶어하는이 마진을 가지고 있습니다.

137
00:11:42,000 --> 00:11:46,390
따라서 지나치게 많은 시간을 할애하지 말고 우리가해야 할 일을 보여 드리겠습니다.

138
00:11:46,770 --> 00:11:54,500
음 높이를 100 %로 설정하고 여백을 0으로 설정하십시오.

139
00:11:54,810 --> 00:11:58,490
그리고 지금 페이지를 새로 고침하면 전체 화면을 차지합니다.

140
00:11:58,860 --> 00:12:10,440
따라서 세부 사항을 자세히 이해하고 정확히 왜 우리가 왜이 코드를 추가하기 전에 시체를 검사했는지 이해하기를 원한다면 시체를 다시 검사하여 주석을 제거하면 어떤 일이 일어나는 지 알 수 있습니다.

141
00:12:10,560 --> 00:12:20,020
기본적으로 우리는 몸체가 전체 너비와 높이를 차지하고 여백이 없기 때문에 캔버스가 확장되어 전체 공간을 차지한다는 것을 의미합니다.

142
00:12:20,250 --> 00:12:20,910
승인.

143
00:12:20,910 --> 00:12:24,680
그래서 우리는 이제 캔버스를 만들었습니다.이 비디오에서 제가 할 마지막 것입니다.

144
00:12:24,690 --> 00:12:30,420
나는 단지 서류 작업에 종이 스크립트 스크립트가있는 방법을 소개하려고합니다.

145
00:12:30,420 --> 00:12:35,140
캔버스에 캔버스를 씌운 다음 이전에 본 적이없는 코드를 여기에 넣습니다.

146
00:12:35,190 --> 00:12:41,030
이 비디오를 만들 때까지 또는 내가이 비디오를 위해이 프로젝트를 만들기 전까지는이 많은 것들을 보지 못했습니다.

147
00:12:41,100 --> 00:12:42,380
나는 전에 그것을 확실히 보았다.

148
00:12:42,390 --> 00:12:43,820
이 정확한 비디오.

149
00:12:43,830 --> 00:12:46,580
그러나 요점은 그것이 새로운 것입니다.

150
00:12:46,650 --> 00:12:48,130
이것이 우리가이 일을하는 이유입니다.

151
00:12:48,150 --> 00:12:54,200
코드 산화 환원을 취하고 기본적으로 코드를 복사하여 변경하는 것은 매우 중요한 기술입니다.

152
00:12:54,330 --> 00:12:54,980
큰.

153
00:12:54,990 --> 00:13:05,980
그래서 다음 비디오에서 나는 당신에게 빠른 선택 운동을 제공 할 것입니다. 그래서 당신이 프로젝트에 들어가서 당신이 그것을 부르기를 원하는 교육 학습 경험을 건너 뛰고 싶다면.

154
00:13:06,000 --> 00:13:11,170
그러나 만약 당신이 단지 보수를받는다면 다음 비디오는 건너 뜁니다.

155
00:13:11,190 --> 00:13:13,040
나는 당신이 그것을하는 것이 좋습니다 것입니다.

156
00:13:13,050 --> 00:13:17,860
우리는 가장 인상적인 것을 만들지는 않을 것입니다.하지만 당신은 몇몇 서클과 함께 운동을 할 것입니다.

157
00:13:17,940 --> 00:13:18,500
아주 흥미 진진한.

158
00:13:18,510 --> 00:13:18,960
알아.

159
00:13:19,200 --> 00:13:19,480
승인.

160
00:13:19,500 --> 00:13:20,360
내가 너를 볼거야.