승인.
여기에서 시작하겠습니다.
그리고이 비디오는 Paperchase를 설치하고 간단한 간단한 애니메이션을 만드는 데 중점을 둘 것입니다.
그래서 아직 오디오가 없습니다.
우선 내가 지적 할 것은 내가 만든 새로운 디렉토리에 있습니다.
여기에 소리 디렉토리를 추가했습니다.
따라서 사운드를 재생하지 않으므로 반드시이 비디오를 재생할 필요는 없습니다.
하지만 디렉토리를 따라 가려면 해당 사운드 폴더를 드래그하거나 복사해야합니다.
다음으로해야 할 일은 파일을 만들어 올바른 디렉토리에 파일을 저장하게하고 매번 그 파일을 서클이라고 부를 것입니다.
글쎄, 나는 우리 팀의 L. skeleton을 물론 그렇게하고 우리는 지금 당장 그것을 남겨 둘 것입니다.
그래서 열어 보자. 아무 것도 볼 수 없어야한다.
이제 종이 천재로 가자.
다시 한번 나는 이것을 정말로 좋아한다.
그러나 우리는 이것에서 벗어나 시작할 것이고 우리는 시작하기 위해 다운로드하러 갈 것입니다.
그리고 우리가 할 첫 번째 일은 내가 실제로 한 가장 최근의 버전을 다운로드하는 것입니다.
그래서 그걸로 끝나면 이렇게 보일 것입니다.
그리고 우리가 할 수있는 첫 번째 일은 examples 디렉토리를 살펴 보는 것입니다.
애니메이션 애니메이션 스타에 대해 살펴 보겠습니다.
이것으로 놀아나 기 즐거운 재미는 나를 어지럽게합니다. 그래서 나는 그것을 막을 것입니다.
그러나 다른 것들도 살펴볼 수 있습니다.
사탕 추락.
그래서 당신이 할 수있는 멋진 애니메이션이 있습니다.
여기에는 약간의 물리학이 관련되어 있습니다.
그 밖의 무엇을 우리는 가지고 있습니다.
이 멋진 라인 애니메이션과 다른 것들은 당신입니다.
마우스를 움직일 때이 시차 효과가 정말 좋았습니다.
승인.
그래서 당신은 이것을하는 데 몇 시간을 보낼 수 있습니다.
원한다면 열 수있는 훌륭한 예제가 많이 있습니다.
그것이 어떻게 작동하는지보십시오.
그래서 우리가 종이 J를 포함하고 있다는 것을 알게 될 첫 번째 공간을 보도록하겠습니다.
우리는 Jay Querrey와 마찬가지로 파일을 필요로합니다.
그러나 이전에 보지 못했던 것이 있습니다. 스크립트 유형이 텍스트 슬래시 (text slash) 용지 스크립트와 같습니다.
그래서 특정 유형의 파일이나 스크립트를 작성할 수 있습니다.이 스크립트는 기본적으로 paperchase를 위해 만들어진 언어 인 도메인 특정 언어 인 paper script라고 쓸 수 있습니다.
따라서 Paperchase가 포함되어 있지 않으면 효과가있는 것은 아닙니다.
그리고이 캔버스 특성 캔버스가 캔버스와 동일한 것을 볼 수 있습니다.
그래서 이것은 캔버스가 오래된 찬송가 요소라는 것이 이상합니다.
그래서 실제로 우리가하는 모든 것입니다.
지금 당장 당신에게 보여 드리겠습니다.
이것은 작동 버전 또는 최종 버전입니다.
먼저 어떻게 작동하는지 보여주기 위해 살펴 봅니다.
다시 한번 살펴보면 검정색 배경을 검사합니다. 신체가 아닙니다.
이것은 캔버스라고 불리는 것으로 캔버스는 기본적으로 애니메이션과 그래픽 작업을 수행하는 HMO 요소입니다.
그래서 DN에 가면 캔버스 모양으로 각 연기 대마초 요소에 5 살짜리 냄새를 추가하면 자바 스크립트에서 스크립트로 그래픽을 그릴 수 있습니다.
그래서 그게 전부입니다.
캔버스에있는 요소로 자바 스크립트가 없으면 실제로는 아무 것도하지 않습니다.
그런 다음 자바 스크립트를 추가하여 여기에 직사각형을 만들어 녹색으로 만들어 3 차원 모양으로 만들어이 애니메이션을 만들고 자바 스크립트로 그 모든 작업을 수행합니다.
그래서 종이 J.S. canvas 요소를 사용합니다.
모든 그래픽에서 모든 애니메이션을 추가하는 단계입니다.
따라서 우리는이 공간 예제에서 볼 수있는 것처럼 페이지에 캔버스가 있어야합니다.
제가 맨 아래로 가면 몸 속에있는 유일한 것이 캔버스이고 여기에는 캔버스와 동일한 ID와 검은 색으로 설정된 배경이 있습니다.
그래서 이드는 캔버스가 여기에 해당합니다.
캔버스는 캔버스와 같습니다.
그래서이 종이 스크립트 파일이나이 페이퍼 스크립트 스크립트에 방금 이름을 지정했지만 캔버스 예제에서 어떤 ID를 찾을 것인지 알려줍니다.
그래서 우리는 이와 비슷한 것을 할 것입니다.
그러나 우리가 거기에 가기 전에 우리는 종이 예를 포함 할 필요가있다.
다운로드 할 때.
그리고 예제를 열지 않고 색인을 생성 한 다음 전체 또는 전체를 선택하여 전체를 이해할 수 있습니다.
그래서 나는 그것을 우리 디렉토리에 복사 할 것입니다. 그래서 종이 Dasch가 가득 찼지 만 우리 자신의 응용 프로그램에서 우리는 그것을 포함해야합니다.
그래서 Source는 그것과 똑같은 종이 Dasch 전체 japes와 동일하게 저장합니다.
Chrome에서 페이지를 새로 고침하면됩니다.
오류가 발생하지 않도록하십시오.
큰.
그래서 파일이 잘 찾아 냈습니다.
이제는 종이 천재의 문서로 가서 자습서를보고 실제로 그렇게하지 않았습니다.
그러나 JSA가 어떤 종이인지에 대한 설명을 읽고 싶습니다.
오픈 소스 벡터 그래픽 스크립팅 프레임 워크는 제 5 캔버스의 시대를 뛰어 넘은 것입니다.
그것은 깨끗한 장면 그래프 슬래시 문서 객체 모델과 잘 짜여진 일관되고 깨끗한 프로그래밍 인터페이스로 깔끔하게 정리 된 벡터 그래픽과 베 지어 곡선을 만들고 작동시키는 많은 강력한 기능을 제공합니다.
일종의 입 가득.
기본적으로 그것은 라이브러리 애니메이션 라이브러리 그래픽 라이브러리를 그리는 엉덩이 엉덩이.
그건 정말 인기가 있어요.
거기에 그들 중 몇 가지가 있습니다 그래서 그것은 하나의 DOM 조작 라이브러리 꽤 많은 쿼리가 아니에요.
하나의 이벤트 핸들링 라이브러리.
그래픽에는 많은 애니메이션이 있지만 종이가 가장 대중적이라는 것을 확신합니다.
좋습니다. 자습서로 돌아가서 시작하는 방법을 살펴 보겠습니다.
나는 네가 종이 작업을 시작한다고 생각합니다.
예.
아래로 스크롤하여 여기에서 예제를 살펴 보겠습니다.
그래서 우리가 할 수있는 일은이 모든 것을 복사하는 것입니다.
하지만 한 번에 하나씩 해보고 어떻게 작동하는지 봅니다.
이 캔버스를 복사하여 전체 선을 복사 해 보겠습니다. 우리는 그것을 우리 몸에 넣을 것입니다.
그래서 I.D. 캔버스. 내 캔버스와 같고 페이지를 새로 고침하면 전혀 볼 수 없습니다.
우리가 거기에 캔버스가 있다는 것을 알기를 원한다면 우리가 돌아 가면이 스크립트 텍스트 나 문자를 복사 해 보겠습니다. 왜냐하면 텍스트 크기의 종이 스크립트 캔버스가 제 캔버스이기 때문입니다.
여기에 붙여 넣으십시오.
그래서 여기서 무슨 일이 일어나고 있는지 살펴보면 멋진 그림은 선을 그리기위한 종이 G-S 경로를 생성한다고 말합니다.
그래서 우리는 길을 만들었고 당신은 지금까지 보지 못한 많은 문법을 보게 될 것입니다.
그리고 또 그것이 요점입니다.
요점은 당신이 문서를 읽는 새로운 것을 볼 것을 강요합니다.
이 감정에 당신을 둔감하게 할 수 있습니다. 어떻게 작동하는지 모르기 전에이 코드를 본 적이 없습니다.
그것이 바로 도서관의 요점입니다.
특히 애니메이션과 같은 경우에 어떻게 작동하는지 알 필요가 없습니다.
다른 누군가가 당신을 위해 돌보고 있기 때문에 기뻐하십시오.
나는 그것이 내 삶을 여러 번 구해준 것입니다.
그래서 여기에 새로운 경로를 만들어 변수에 저장하십시오.
획 색상을 검정색으로 변경 한 다음 시작점을 100 쉼표 100으로 작성한 다음 경로를 해당 시작점으로 이동 한 다음 시작점을 100 X와 음수 50 y로 시작하는 선을 그립니다.
그래서 정확히 무엇을하는지 보여 드리 겠지만 100 100부터 시작하여 그 라인을 움직이거나 첫 번째 포인트를 300 쉼표 50으로 연결합니다.
따라서 우리가 신선하다면 모든 것이 제대로 작동하는지 확인하십시오.
우리는 한 줄로 끝난다.
그래서 이런 식으로 새로운 것을 할 때 가장 좋은 방법은 주위를 노는 것입니다.
그래서 이것을 바꿔보십시오.
그래서 빨간색이고 시작은 0 100입니다.
우리는 우리가 가선을 옮겼거나 이것을 500과 같이 더 과감한 것으로 바꾸어 보겠습니다.
그래서 하루 종일 이것으로 놀 수 있습니다.
하지만 제가 정말로 지적하고 싶은 것은 텍스트가 아닌 종이 스크립트 스크립트를 작성하고 있으므로 자바 스크립트 종이 스크립트이고이 캔버스 속성 캔버스는 우리가 지정한 이름 또는 ID 인 캔버스와 같습니다.
그래서 이것들은 일치해야만합니다. 그리고 그 전체 요점은이 종이 스크립트 파일에 어디에 물건을 그릴지를 알려주는 것입니다.
어떤 캔버스를 사용할 것인가.
그래서 우리는 좀 더 놀 수 있습니다.
그리고 비디오를 중단하고 튜토리얼을보고 다른 것을 시도해 보는 것이 좋습니다.
그래서 저는 우리가 사용하게 될 경로의 미리 정의 된 모양으로 여러분을 안내 할 것입니다.
여기에서 우리는 응용 프로그램과 함께 서클을 만들 것입니다.
이것이 우리가해야 할 일입니다.
이 코드를 여기에 복사 해 가볍게 두드려 새로운 경로 점 원을 그린 다음 점을 써서 원을 만들어야합니다.
그런 다음 반경이 생깁니다.
그래서 설명이 있다는 것을 알 수 있습니다. 그래서 중심점 x 100 y 70과 반지름 50 그리고 그 다음 채우기 색이 필요합니다.
이제 이것을 코드 하단에 복사하여 어떤 일이 발생하는지 살펴 보겠습니다.
J S와 비슷한 라이브러리로 당신이 많이하는 일종입니다.
방금 실험 해.
이제 반경을 10으로 변경해 봅시다.
됐어.
그래서 우리는 이것을 다른 줄로 복사하여 또 다른 원을 그리도록 시도 할 수 있습니다.
그것을 var circle 2가 새로운 경로 점과 같다고합시다.
그리고 이것을 정말로 크고 자주색으로 만들어 봅시다.
그래서 새로운 점을 50에 놓자.
50이 오면 거대해질 것입니다.
그래서 반지름을 300으로 지정하고 원을 채우면 원색이 보라색이됩니다.
그 새로 고침처럼.
그리고 그 거대한 원으로 끝나는 것을 볼 수 있습니다. 우리의 캔버스가 화면의 전체 너비를 차지하지 않았기 때문에 실제로 얼마나 큰지 알 수 없습니다.
그러니 우리가 캔버스가 전체 너비를 차지하기를 원하기 때문에 다음으로 해봅시다.
그래서 저는 새로운 스타일 시트를 만들어서 링크 태그를 추가했습니다. Tref는 존재하지 않는 원의 점 SS와 같습니다.
그리고 나서 Circle Stut이라는 파일을 저장하고 평가 해 봅시다. 캔버스에 100 % 추가하십시오.
그리고 검은 색 바탕을 주자.
그리고 우리가 신선하다면 우리는 가깝다는 것을 알 수 있습니다. 그러나 우리에게는 몇 가지 것이 있습니다.
첫 번째는 우리 몸이 실제로 완전히 내려 가지 않는다는 것입니다.
그래서 우리의 캔버스는 너비의 100 %를 차지합니다.
그러나 우리가 지금 100 % 높이를 주더라도 그것이 실제로 우리가 원하는 방식을 바꾸지 않을 것입니다.
그 다음 우리는 우리가 제거하고 싶어하는이 마진을 가지고 있습니다.
따라서 지나치게 많은 시간을 할애하지 말고 우리가해야 할 일을 보여 드리겠습니다.
음 높이를 100 %로 설정하고 여백을 0으로 설정하십시오.
그리고 지금 페이지를 새로 고침하면 전체 화면을 차지합니다.
따라서 세부 사항을 자세히 이해하고 정확히 왜 우리가 왜이 코드를 추가하기 전에 시체를 검사했는지 이해하기를 원한다면 시체를 다시 검사하여 주석을 제거하면 어떤 일이 일어나는 지 알 수 있습니다.
기본적으로 우리는 몸체가 전체 너비와 높이를 차지하고 여백이 없기 때문에 캔버스가 확장되어 전체 공간을 차지한다는 것을 의미합니다.
승인.
그래서 우리는 이제 캔버스를 만들었습니다.이 비디오에서 제가 할 마지막 것입니다.
나는 단지 서류 작업에 종이 스크립트 스크립트가있는 방법을 소개하려고합니다.
캔버스에 캔버스를 씌운 다음 이전에 본 적이없는 코드를 여기에 넣습니다.
이 비디오를 만들 때까지 또는 내가이 비디오를 위해이 프로젝트를 만들기 전까지는이 많은 것들을 보지 못했습니다.
나는 전에 그것을 확실히 보았다.
이 정확한 비디오.
그러나 요점은 그것이 새로운 것입니다.
이것이 우리가이 일을하는 이유입니다.
코드 산화 환원을 취하고 기본적으로 코드를 복사하여 변경하는 것은 매우 중요한 기술입니다.
큰.
그래서 다음 비디오에서 나는 당신에게 빠른 선택 운동을 제공 할 것입니다. 그래서 당신이 프로젝트에 들어가서 당신이 그것을 부르기를 원하는 교육 학습 경험을 건너 뛰고 싶다면.
그러나 만약 당신이 단지 보수를받는다면 다음 비디오는 건너 뜁니다.
나는 당신이 그것을하는 것이 좋습니다 것입니다.
우리는 가장 인상적인 것을 만들지는 않을 것입니다.하지만 당신은 몇몇 서클과 함께 운동을 할 것입니다.
아주 흥미 진진한.
알아.
승인.
내가 너를 볼거야.