OK、歓迎します。
だから、このビデオではすでに行ったことを取り上げ、少しアニメーション化するつもりです。
だから最終的には、すべてのキーを押すたびに、ランダムな位置に円を描き、その色をわずかに生かすということです。
そして、サイズアニメーションも取得します。
だから色が変わるのを拾うことができるかどうかは分かりませんが、色合いをちょっと追加するだけの簡単な方法です。
しかし、どちらかが私たちのために始めるでしょう。
実際にはこれらのサークルの色を変更するだけで、実際には1つのサークルの色を変更するだけで簡単に開始します。
だから、後で来ることもありません。
Paperchaseに行くと、チュートリアルに戻り、一番下のアニメーションを見ます。
まず、いくつかの例を見てください。
ここに例があります。
実際にアニメーションを実行するのは本当に簡単です。
この場合、何かを矩形で定義します。
私たちの場合、それは円であり、フレーム上にこれがあり、私たちがここに入れるコードはアニメーションのすべてのフレームで実行されます。
したがってこの場合、このアニメーションのすべてのフレームをこの矩形を3度回転させます。この場合は、すべてのフレームを使用して、ここで定義したこのサークルの色相に1を加えます。
だからこれを試してみましょう。
キーの内側にない新しいサークルを作ってみましょう。
ページが読み込まれると、これは常にそこに表示されます。
だから我々はそれをvar animate
circleと呼んで新しいパスのドットサークルに等しく、それを新しいポイントにして、このサークルを300カンマ300と半径にしましょう。
100を大きくしましょう。
ちょうどそれのように。
そして、ドット塗りの色をアニメートするのではなく、アニメーションサークルとアニメーションサークルというアニメーションを行い、そのように始めるには赤色に設定します。
すばらしいです。
だからまだアニメ化されていませんが、リフレッシュすると大きなサークルが1つずつ表示され、キーを押すたびにランダムな小さなサークルが表示されます。
今度はアニメーションを追加する必要があります。フレーム上の関数を見ていて、このイベント引数を除いて、渡すことができます。
もし私たちがそれについて何らかのデータを必要としていたら、それぞれのフレームで何かをしたいのであれば、実際にはそれを必要としません。
そして、ここではアニメーションサークルのドット塗りつぶしカラーに、あなたはプラスの1つしかありません。
そして、これはその例からまっすぐです。
したがって、アニメーションが毎回新しいフレームを要求するたびに、私たちはフレームレートを決めるのではなく、このコードが呼び出される頻度を決定します。
私たちのアニメーションサークルの色合いに用紙を追加する新しいフレームがあるときはいつでも、
リフレッシュしてそこに行きましょう。
このようなアニメーションを行うのは本当に簡単です。
何かの位置が変わってもどこでもアニメーションを行うことができますが、それはもう少し複雑です。
これは、1つのポイントから別のポイントにアニメートするだけでなく、均等に加速することもないため、この例はさらに複雑になります。
だから少し複雑ですが、それでも数行しかありません。
移動するものの別の例があります。
いくつかの他のアニメーション。
私たちがやることは、彼らが表示しないものを使用することです。私たちがやりたいことを少しずつ時間を費やすここの例は、フレームごとにそれぞれをスケールすることです。
だから私たちがするのは基本的に私がキーを押してサークルを作るときです。
私がそのキャラクターをすべてのフレームに当てたとき、またはポイント9の9ポイント9の8で基本的にそれを縮めることによってそれをちょっと収縮させるとき、それが300×300または300の半径として私に言い訳をすると言いましょう。
私は正確な数を忘れていますが、それをフレームごとに小さなサイズで掛けています。縮小して縮小するので消えます。
だから私はそれがどのように動作するかをお見せしましょう。
私たちのコードに戻って、サークルをアニメーション化し、フレームに入れて、色相に追加するのではなく、
私たちがやることは、私が見つけた方法であるアニメーションサークルのドットスケールを行うことです。私たちが実際には見ないように同じサイズのままにしておきたい場合は、それを残すだけです。
しかし、ポイント9のようなことをして、リフレッシュすると、すべてのフレームの変化が1ずつ増えます。
そして、それは前のフレームにあったものの9または90パーセントの点で拡大します。
だから、ポイント9
9のようなものに変更すれば、より遅いトランジションになり、ポイント5のようなものに変更すれば、非常に速く収縮します。
したがって、すべてのフレームで前回と同じくらい大きくなります。
だから私は一緒に行ったことがポイント9を開始すると思います。
だから私たちはそれを残すでしょう。
そして今私達は色を変える単一の円を持っていて、私たちが次にやりたいことを縮小するのは、私がこれらの他のキーを押す時です。
あなたはそれらのサークルに同じことをしてほしいと思うし、もう少し複雑です。
しかし正直なところ、このコードは同じままになりますが、ページ上にあるすべてのサークルに対してこれを行う必要があるという点が異なります。
これはおそらく、実際に何をするかを決定する最も劇的な変化です。円の配列を持ち、キーを押すたびに新しい円の配列にその円を追加します。なぜなら今は実際にはすべてを追跡していないからです何とかすべてを保存する必要があるサークルです。
この関数のフレームのすぐ上に、すでに存在しアニメーション化されているすべての円を参照することができます。
そこで、このコードを保存します。
しかし、私たちがしたいことは、存在しない配列をループすることで、単にサークルと呼ぶだけです。
だから、var iは、円StarLinkよりも小さいAyasに等しい。
プラスプラス私たちがやりたいことはサークルです。
私は色をここに記入します。
だから、ちょうど始めに塗りつぶしの色から始めます。
だから私はこの行をコピーします。
サークルは存在しないので、まだ動作しません。
しかし、フレームごとに、この配列内のすべての円をループし、フレームごとに1つずつ色相を追加するという考えがあります。
そしてそれはかなり激しいと思うかもしれません、そして、それは起こっていることの多くですが、紙がそれを処理します。
しかし、私たちは最後に少しずつ最適化を加えていく予定ですので、今後のビデオで私が何を意味するのかをご紹介します。
しかし今のところこれが私たちがすることです。
今私たちがしなければならないことは、実際にサークル配列に追加するサークルを追加することです。サークルの配列を空の配列として定義し、キーを押したときにキーを押すと、円を描くこの新しい円を円で押すこの新しい点をこの無作為な点の円から外してください。
今は半径10でキルフィルカラーをオレンジ色にリセットしています。
だから私たちは既に持っていたサークルをこのサークルの配列に押し込んでいます。
それから、すべてのサークルを更新しています。
だから1つの円があり、20の円があるかもしれません。
任意の時点で100のサークルが存在する可能性があります。
すべてをループして各キューにキューを追加します。今すぐに見て、リフレッシュしてもまだうまくいきません。
そして、これはプッシュがどのように働くかについての本当に興味深い点をもたらします。
だから私がコンソールを開くと、ここにある未定義の心のプラクリティの色合いを読むことができないと私に伝えています。
だから、それは何となくPhilコードのHughプロパティがPhilコードが存在しないということを読んでいないのではない。
では、一定のログサークルを作ってみましょう。
そして、あなたは問題が何かを見るでしょう。
私がこれを開くと、私たちはエラーがあったため停止しました。
しかし実際には実際の新しいサークルではなく配列にオレンジ色の文字列を追加しました。
それは、私たちが推進しているのは、新しいサークルを作る新しいサークルだけではないからです。
次に、塗りつぶしの色をオレンジ色に設定します。
返された最後のものはオレンジの文字列でした。
最終的な結果は毎回オレンジを押し込んでいるだけです。
私たちが望むものではありません。
新しい変数を作って新しいサークルとし、新しいサークルのドット塗りカラーをオレンジ色に別々にしてから、新しいサークルを押します。
だから、これを編集するのではなく、私が見ることが重要な誤りだと思います。
完全に私を守ってくれましたが、私たちがそのサークルを通過し、ドット塗りつぶしの色がオレンジ色になっているメソッドを連鎖させたメソッドがあれば、どのように動作するのかを理解することが重要です。プッシュで配列。
私たちはただオレンジを追加していました。
だから我々はそれを修正する必要があります。
だからうまくいけば、これはそれを行います。
そして、実際に私はそれが知っているが、我々は新鮮で、見てみましょう今新しいサークルを追加ランダムに配置し、彼らはすべての敵Heughアニメーションので完璧。
さて、これをサイズに合わせて更新しましょう。
だから実際にはこれとまったく同じラインです。
私はログではなく私たちの定数を取り除くでしょう。
我々はサークルが必要な場合を除いて。
私。
OK。
だから私があなたを見せてくれる前に、それがうまくいくかどうかは、私たちがしたことをちょうど見直しましょう
だからランダムな点で円に追加する任意のキーを押すと、そのランダムな点を10ピクセルの半径で新しい円にするためにランダムな点を作成し、実際にはそれを私たちがソリューション内にある500我々は最終的に変更されるオレンジ色で始まるようにフィルカードを販売しています。
そして、それを円と呼ばれる配列にプッシュします。
次に、新しいフレームが呼び出されるたびに、すべてのアニメーションフレームがすべての円をループします。
そしてそれぞれのために、私たちはheweに1を追加し、スケールのサイズに9を乗じています。
だから、フレームごとに少しずつ小さくしています。
しかし実際には非常に多くのフレームが収縮しているので、ページの読み込みから始まるアニメーションサークルを取り除くことができます。
私たちは黒い画面から始めたくない。
そして、キーを押すとサークルが追加されます。
だからそれを試してみましょう。
そこに行く。
したがって、これはほぼ同じ方法です。
ここに音があります。
1つ大きな違いは、これらのすべてのキーには割り当てられた色があることを示す色です。Qこの青は暗い青色の半分ですか？
それはグレーですか？
それで、ここでは紫色ですが、ここでは、始めるすべての人をオレンジ色にしてから色相を変えるように設定しています。
だから私たちはそれを修正する必要がありますが、私たちが音を加えるまでそれを待つことを意味します。
だから今は終わった。
現在、サークルアレイからそれらのサークルを削除することは決してないため、最適化するための小さな最適化があります。
だから、10秒後にサークルが3秒後にも消えてしまったことが分かっても、私たちはそれを見ません。
技術的にはそれはまだその配列です。
それは理想的ではありません。
私たちが作ったサークルが1万個あり、そのうちのどれも見ることができない場合は、それらすべてをループしたくありません。
最後の動画では、サークルがなくなったことがわかったとき、またはそれがもはや実現可能ではないことがわかったときに、サークルを削除する方法を示します。
OK次は音で作業します