OK。
だからここで始めましょう。
そしてこのビデオは、Paperchaseのセットアップとシンプルなシンプルなアニメーションの作成に焦点を当てています。
だからまだオーディオはありません。
最初に私が指摘したいのは、私が作成した新しいディレクトリです。
私はそのディレクトリをここに追加しました。
だから、あなたは音を再生しないので、必ずこのビデオのためにそれを行う必要はありませんことを確認してください。
しかし、ディレクトリに沿ってフォローしたい場合は、そのサウンドフォルダをドラッグまたはコピーするようにしてください。
あなたがする必要があるのは、私たちのファイルを作成してファイルを正しいディレクトリに保存するようにすることです。私はそれを毎回サークルと呼んでいます。
まあ、私は私たちの時間のL. スケルトンはもちろんそれと同じです。私たちは今のところそれを残します。
だから、実際に何も見てはならないはずです。
さあ紙の天才に行きましょう。
もう一度私は本当にこの1つが大好きです。
しかし、私たちはこれから離れていくつもりです。私たちはダウンロードして始めます。
そして、私が最初にやることは、私が実際に行った最新のバージョンをダウンロードすることだけです。
だからあなたがそれで終わったら、それはこのように見えます。
そして、まず、examplesディレクトリを見てみましょう。
アニメーション化されたアニメーションスターを見てみましょう。
これで遊ぶのはかなり楽しいですので、私はめまいになりますので、私はそれを止めるつもりです。
しかし、他のものもいくつか見てみることができます。
キャンディークラッシュ。
だから、あなたがすることができるいくつかのクールなアニメーションがあります。
ここには小さな物理学が関わっています。
それ以外に何がありますか？
このクールなラインアニメーションと他のものの全体の束があなたです。
私はあなたがマウスを動かすと、このような視差効果が本当に好きです。
OK。
だから、これをやる時間を費やすことができます。
あなたが望むなら、それらのどれかを開くことができる素晴らしい例がたくさんあります。
どのように動作するかを見てみましょう。
それで、そのスペースを見てみましょう。あなたが私たちが紙を含んでいることがわかるでしょう。 S. Jay Querreyと同じように、もちろんそのライブラリのファイルが必要です。
しかし、以前は見たことのないものがあります。これは、スクリプトタイプがテキストスラッシュペーパースクリプトに等しいことです。
したがって、特定のタイプのファイルやスクリプトを書くことができます。これは、特定のドメイン固有の言語であるペーパースクリプトと呼ばれ、基本的にはペーパーチェイス用に作られた言語です。
Paperchaseが含まれていないと動作しません。
また、このキャンバスの属性キャンバスがキャンバスに等しいことも確認できます。
だからキャンバスは年老いた賛美歌の要素なのです。
だから、実際には私たちがしているすべてのものです。
私は今これを検査することを示します。
これは作業バージョンまたは最終バージョンです。
私は最初にそれをどのように動作するかを見てみましょう。
繰り返しますが、この黒い背景を調べると、それは体ではありません。
これはキャンバスと呼ばれるもので、キャンバスは基本的にアニメーションやグラフィックスを行う場所として機能するHMO要素です。
だから私がDNに行くとキャンバスの外観は、各煙大麻要素に5つの老化した匂いが追加され、Javascriptのスクリプトであるようにグラフィックスを描くのに使用できることが分かります。
それが本当にすべてです。
これはキャンバスの要素で、javascriptなしでは実際には何もしません。
しかし、その後、私たちは行くと、ここでそれが四角形の緑を作るために四角形にするようなことを言うためにjavascriptのを追加するこのアニメーションを行うと私たちはすべてJavascriptでそれを行う。
だからペーパーJ. S. canvas要素を使用します。
それはすべてのグラフィックスのすべてのアニメーションに追加される段階です。
したがって、このスペースの例でわかるように、ページにキャンバスを配置する必要があります。
私が一番下に行くと、体の中の唯一のものはキャンバスで、キャンバスに等しいIDとキャンバスに等しい背景と黒に設定された背景があります。
だからイドはキャンバスがこの行に相当するのと同じです。
キャンバスはキャンバスに等しい。
だから、このペーパー・スクリプト・ファイルまたはこのペーパー・スクリプト・スクリプトに、ちょうど名前がついたがキャンバスの例で探すIDを教えているだけです。
だから我々はこれに非常に似た何かをするつもりです。
しかし、私たちがそこに着く前に、我々は紙にはいを入れることを確認する必要があります。
あなたがダウンロードに行くとき。
そして、例を開くよりも索引をつけて、紙でいっぱいにしたり、紙で拾ったりして、完全なものを理解することができます。
だから私は私たちのディレクトリにそれをコピーするつもりだから紙Dasch完全だが、私たち自身のアプリで我々はそれを含めることを確認する必要があります。
だから、ソースはそれと同じように紙のダッシュフルジャップと同じで保存します。
Chromeでページを更新するだけです。
エラーがないことを確認してください。
すばらしいです。
だから、ファイルがうまく見つかった。
さて、紙の天才のドキュメントに行き、チュートリアルを見てみましょう。私は実際にこれを早くやっていませんでした。
しかし、私はJSAの論文の記述を読みたいと思っています。
オープンソースのベクターグラフィックススクリプティングフレームワークで、私の5つのキャンバスに時代を超えて走っています。
クリーンなシーングラフスラッシュのドキュメントオブジェクトモデルと、ベクタグラフィックスとベジェ曲線を作成して作業するための強力な機能が、うまく設計された一貫したクリーンなプログラミングインターフェイスですっきりとまとめられています。
一口のようなもの。
基本的には、ライブアニメーションライブラリーグラフィックスライブラリをキックしています。
それは本当にかなり人気があります。
そこにはいくつかのものがありますので、1つのDOM操作ライブラリのクエリのようなものではありません。
1つのイベント処理ライブラリ。
グラフィックスにはたくさんのアニメーションがありますが、ペーパーは私がそれが最も人気があると言っていると確信しています。
さて、チュートリアルに戻り、始めてみましょう。
はい、紙を使って作業を始めていると思います。
はい。
下にスクロールして、ここでその例を見ていきます。
だから、私たちができることは、この全体をコピーすることです。
しかし、私はそれをどのように動作するか見るために一度に1つずつしたいと思っています。
ですから、このキャンバスをコピーして全体の行をコピーしてから、私たちの体に入れてみましょう。
だからキャンバスI D. 私のキャンバスに等しく、私がページをリフレッシュすると、何も見えません。
そこにキャンバスがあることを期待していたら、元に戻すと、このスクリプトのテキストまたはタイプをコピーしましょう。テキストサイズの紙のスクリプトキャンバスは私のキャンバスです。
それをここに貼り付けて貼り付けましょう。
ここで何が起こっているのかを見ると、線を描くための紙のG-Sパスが作成されるという素晴らしいコメントがあります。
だから私たちは道を作って、あなたは一度も見たことのない文法をたくさん見ています。
そしてもう一度それがポイントです。
重要なのは、私があなたにドキュメントを読むためのいくつかの新しいことを見せることです。
それは私が何をしているのか分からないこの感情にあなたを鈍感にすることができます。
それは、図書館のポイントのようなものです。
特にアニメーションのようなものについては、どのように動作するのかを知る必要はありません。
他の誰かがあなたのためにそれを世話していることを嬉しく思います。
私はそれが私の人生を何度も救ったのは間違いありません。
ここで新しいパスを作成して変数に保存します。
ストロークの色を黒に変更し、開始位置を100カンマ100で作​​成し、その開始位置にパスを移動した後、開始するラインを100
Xとマイナス50 yにします。
だから私はあなたにそれが何をしているかを正確に見せますが、それは100
100から始まって線を引いて、その線を動かすか、または最初の点を300カンマ50に結び付けます。
だから、もし私たちが新鮮ならば、すべてが働いていることを確認してください。
私たちは一線で終わります。
だから、このような新しいものを持っているときにできることは、周りを遊ぶことです。
だからこれを変えてみてください。
それは赤で開始は0 100です。
私たちはラインを移動したばかりか、これを500のようなより劇的なものに変えようとしています。
だから一日中このままで遊ぶことができます。
しかし、私が本当に指摘したいのは、テキストではなく紙のスクリプトスクリプトを作成しているので、javascriptの紙のスクリプトで、このキャンバスの属性キャンバスを私たちが割り当てた名前またはIDであるキャンバスに設定しています。
ですから、これらは一致しなければならず、その全体像はこのペーパー・スクリプト・ファイルに物を描く場所を伝えることに過ぎません。
使用するキャンバス
だから私たちはもう少し詳しく遊ぶことができます。
そして、ビデオをやめてチュートリアルを見て、他のことを試してみることを強くお勧めします。
だから私はあなたがパスの定義済みの形に向かって指します。これは私たちが使用するものです。
ここではアプリケーションを使ってサークルを作っていきます。
これが私たちがする必要があることです。
ちょうどここにこのコードをコピーして、パットの新しいパスの点の円にして、円を作るためにポイントを与えなければなりません。
そして、それが見える半径。
だから、説明があるので、中心点x
100 y 70と半径50、そして塗りつぶしの色が必要です。
ですから、これをコードの最後にコピーして何が起こるかを見てみましょう。
J Sなどのライブラリで何をしているのかはまあまあです。
あなたはただ実験します。
だから半径を10に変更しましょう。
そこに行く。
したがって、別の行にコピーするだけで別のサークルを試すこともできます。
それをvar circle 2が新しいパスドットに等しいとしましょう。
これを本当に大きくて紫色にしましょう。
新しいポイントと50にしましょう。
50になると巨大になるだろう。
それで、それは300の半径を与え、次に色を塗りつぶす丸は紫色に等しくなります。
ちょうどそのリフレッシュのように。
私たちのキャンバスは画面の幅全体を占めていないので、あなたは実際にはそれがどれほど大きいのか分からないほど巨大な円で終わることがわかります。
それでは、キャンバスが幅全体を占めるようにしたいと思っているので、次にこれをやりましょう。
だから、新しいスタイルシートを作ってリンクタグを追加します。Trefは存在しないサークルのドットSSと同じです。
サークルシュタットと呼ばれるファイルを保存して評価を見てみましょう。キャンバスを100％追加します。
それに黒の背景も与えましょう。
私たちが新鮮なものであれば、私たちは近づいていますが、いくつかあります。
その最初のものは、私たちの体が実際に完全に下がらないということです。
だから、私たちのキャンバスは幅の100％を占める。
しかし、たとえそれを100％上げても、実際にはそれが望む方法を実際に変更するつもりはありません。
それから、私たちが取り除きたいこのマージンもあります。
だから、あまりにも多くの時間を過ごすのではなく、私はあなたに何をする必要があるかを示すだけです。
ちょうど高さを100％に設定し、マージンをゼロに設定します。
そして、ページをリフレッシュすると、フルスクリーンが表示されます。
したがって、詳細をさらに詳しく理解し、なぜこのコードを追加する前にボディを検査したのかを正確に理解してから、ボディの検査を再度アンコメントすると、何が起こるかがわかります。
基本的には、ボディが幅と高さ全体を占めていることを確認しているだけで、マージンがないため、キャンバスが拡大してそのスペース全体を占めることになります。
OK。
だから私たちはキャンバスを作成しました。これは本当に私がこのビデオでやる最後のものです。
私は書類作成の仕方を紹介したかっただけです。
それをキャンバスにしてから、これまで見たことのないコードをここに入れます。
私がこのビデオを制作するまで、または私がこのビデオのためにこのプロジェクトを作るまで、これまでに一度も見たことのないことがたくさんあります。
私は間違いなく前にそれを見た。
この正確なビデオ。
しかし、ポイントはそれが新しいことです。
それが私たちがこれをやっている理由です。
コードレドックスを取ることができ、基本的にそれをコピーして変更することは、本当に重要なスキルです。
すばらしいです。
次のビデオでは、私はあなたに簡単なオプションのエクササイズを提供しています。あなたがプロジェクトに立ち寄り、あなたがそれを呼びたいと思っている教育学習体験をスキップしたいならば。
しかし、あなたが報酬の種類になるだけで次のビデオをスキップしてください。
私はあなたがそれをすることをお勧めします。
私たちは最も印象的なことをするつもりはありませんが、私はあなたにいくつかのサークルで運動をさせるつもりです。
とてもわくわくする。
知っている。
OK。
その時お会いしましょう。