2020.01.30JavaScript初心者が、GatsbyJSを使ってウェブサイトを作る勉強です。Gatsbyを使うことになったかは置いておいて、Gatsbyで楽しく開発をするためのメモです。アニメーションをさせたいスクロールするたびに何かが動きまくったり、少しづつコンテンツが表示されるようなサイトはあまり好きではないけど、要所要所にアニメーションを使うことは視覚効果が高いと感じるので、今回はアニメーションを勉強します。どこにどうやってつかう?たとえば、スクロール時に全体のどの程度スクロールしたかとか、注目してもらいたい部分をぶるるっと動かしたりとかをしたいのです。あとは、写真を入れ替えたりとか。執筆時点ではそんな感じです。使用するライブラリはFramer-Motion色々と調べる中で、react-animationが簡単そうだったので使ってみたのですが、いまいち気楽に使えなかったのでもう少し調べてみると、react-poseというものが出てきました。サンプルをほんの少し触ってみるとなかなか気楽に使えそうだったので、本腰を入れてドキュメントを読もうと思ったときに見つけたのが、deprecatedの文字。勉強し始めて早々にdeprecatedしたライブラリを使い続けるのも嫌なので、後継であるFramer-Motionというライブラリを使うことにしました。Framer-Motion公式サイトリンク先の左側メニューに「Examples」というのがあるので、そちらからサンプルを確認できます。CodeSandboxへのリンクもあるので実際に触ってみることもできます。"framer-motion"「useViewportScroll」のように、Hookを使うことができます。Hookについて詳しくはこちらをご覧ください。starterのgatsby-starter-defaultをインストールして使ってみます。"framer-motion"を追加します。}}/>を追加します。どこに追加してもいいのですが、とりあえず「h1」の上に追加しました。追加したものには公式サイト上のサンプルに「className="box"」を追加してます。スタイルシートを用意して「.box」のスタイルを記入します。しないと何も表示されません。100px;}これで角が丸い四角形が描画されます。再読み込みすると、この四角形がにゅるっと大きくなると思います。変な位置に表示されると思いますが、今回は自分のファイルに挿入することがメインなので、にゅるっとしたアニメーションが表示されたらよしとします。/>としましたが、<motion.div>TEST</motion.div>とすることで、囲まれた「TEST」がアニメーションされます。}}となっている部分の、「scale」の値を変更するとサイズが変わります。「duration」を変更すると速度が変わります。こんな感じで簡単にアニメーションができるFramer-Motionを使って、開発中のサイトに色々と効果をつけていきたいと思います。まとめ気楽にアニメーションが使えるようになりました。公式サイトにあるように、ほかにも色々楽しいエフェクトがあります。簡単に使うことができます。アニメーションのハードルが少し下がった気がします。いえ、表示位置等のデザイン面をコーディングするにはCSSも上手に扱わないといけないので、そのあたりも調べつつやっていこうと思います。Reactauthor関連記事アイコン作りに便利なMacのソフト「iConify」とっても便利でありがたいソフトです。このソフトを使うまではInkscapeでガシガシ作ってたのですが、アプリ登録に必要なアイコンの数が多すぎですごくうんざりしてました。...XcodeでAutolayoutで実際のレイアウトより困ったこと久しぶりのプログラミングネタです。...[古いObjective-CからSwift3へ]Swift3のuserDefsultsで苦労したArray数年間アップデートしていなかったWorkoutTimerをiOS11に対応させる際に、使用言語も変えようと思いSwift3にしました。アニメーション編JavaScript初心者が、GatsbyJSを使ってウェブサイトを作る勉強です。Gatsbyを使うことになったかは置いておいて、Gatsbyで楽しく開発をするためのメモです。Desktopが真っ白で何も表示されない時の対処法Windows10でLightroomを起動したら、アップデートを促すメッセージが出ました。Desktopが起動。...2019/08/25WorkoutTimerの修正インターバルの音が最初のカウントダウンの音と同じになってしまっていたのを修正しました。2019/08/10WorkoutTimerをアップデートしましたWorkoutTimerをアップデートしました。これからもWorkoutTimerをよろしくお願いします。