11/29

css/js

ScrollTriggerでscrubにしてもアニメーションが戻らないようにする

scrubにすると、スクロール連動でアニメーションが行ったり来たりするが、

onUpdateで、progressを保持しておき、tl.progress(progress)とすることで一方向のアニメーションができる。

let maxProgress = 0;

ScrollTrigger.create({
 animation: tl,
 scrub: true,
 onUpdate: ({ progress }) => {
  maxProgress = Math.max(maxProgress, progress);
  tl.progress(maxProgress);
 },
});

SVG徐々に表示させるアニメーションの実態

svgの長さが100とすると、strokeDasharrayを100 100と設定し、実線と空白を100ごとに繰り返す。（実線が見えている状態）

stroke-dashoffsetを100とし、空白だけが見えている状態にする。

strokeDashoffsetを0にアニメーション。空白から実線が見えるアニメーションになる。

点線は厄介

上述のとおり、svgにおける点線（strokeDasharray）を触っているので、点線のsvgを徐々に表示させるには、別の手法がいる。

maskを使い、同じsvgを2個書き、maskのsvgをアニメーションさせ、対象のsvgを表示させる。

https://www.motiontricks.com/svg-dashed-line-animation/

three.js journey

spotlightの回転は少し厄介

spotlightのtargetはなぜかvector3ではない。objectになっている。

じゃあそのobjectのpositionを動かせばいいと思いきや、うまく動かない。

sceneにobjectを追加する必要がある。

texture

• 巨大なplaneにtextureを適用する場合、引き伸ばされるかも。その時、texture.repeat.set(8,8)とかで自然にする。
• displacementMapは、displacementScaleとdisplacementBiasを調整する。
• sinは、-1~1の波だが、sin*sin*sinは、-1~1の面白い形になる。

Prisma

久しぶりです。一瞬、わかりにくっと思いましたが、ちゃんと公式の手順に則って動かしたら、思ったよりすぐ動きました。

めっちゃ簡単で半年ぶりに再度驚いた。SQL言語勉強したことあったんだけどなあ。

ゲームで学ぶJS入門

オブジェクトのインターフェースとは： 関数はメソッドだが、on/offなど、意味のあるメソッドの集合がインターフェースという。

カプセル化とは： 中で起きていることを隠すこと

Math.floor 床→切り捨て
Math.ceil 天井→切り上げ
未だにリンクしてないこれ

プロトタイプ

機能を継承する仕組み。Object.getPrototypeOfで見れる。StringだとStringで使える関数が入っている。

プロパティが呼び出された時、そのオブジェクトで定義されていれば、そのプロパティを参照し、prototypeで参照される先のオブジェクトで同じことをおこなう。ということをprototypeが辿れなくなるまで繰り返す。

雑談

例の帰りの電車で買った、「ゲームで学ぶJavaScript入門」だが、思っていたやつと違った。

欲しかったのは、「JavaScriptゲームプログラミング　知っておきたい数学と物理の基本」だったんだけど、こっちは同じ著者さんの、新しく、より易しい版っぽい。

中古も2000円するから、またKindleUnlimitedで安く勉強しよう。
良書っぽかったから、手元に欲しかったんだけどな・・・

易しい版といっても、ぱっと理解できるものではないから、ちゃんとやるけどね。

土曜日は、復習の日にしようかな。その週を振り返る、みたいな。

また、次の週の目標を決める、みたいな。

It might be good idea to I review last week on Saturday.

and dicided to goal with next week.

Saturday might be a good day for review. Like looking back on the week.

also, setting goals for the next week. and so on.