bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScript滑らかなシェイプアニメーションを実装できる「flubber」JavaScript2017.06.19滑らかなシェイプアニメーションを実装できる「flubber」flubberは、滑らかな2Dによるシェイプアニメーションを実装することができるJSライブラリです。アニメーションとともに、さまざまな形に変化していくので見ていてとてもおもしろいですね。2Dによるシェイプ間をスムーズに構築flubberの実際のデモページは以下になります(SVGパスを使ったベーシックなタイプです)。デモデモでは、音符、星、ハート、手、飛行機......など、いろんな形に変化していく動作を見ることができます。アニメーションは、カクカクすることもなく非常に滑らかで、見ていてとても気持ちいいです。2Dによるシェイプ間をスムーズに構築したいという人にはピッタリのツールですね。flubberにはAPIもいろいろ用意されています。options])などがあります。他にもまだまだAPIがあるので、カスタマイズして自分好みのシェイプアニメーションを作りたい人は、ぜひチェックしてみてください。いうわけで、滑らかな2Dによるシェイプアニメーションを実装できるJSライブラリ「flubber」のご紹介でした。flubberの具体的な使い方やダウンロードは、以下のページからどうぞ。関連記事JavaScriptカスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li...JavaScriptマウスオーバーでインフォメーションボックスを表示させる「infoBox」infoBoxはアイコンにマウスオーバーするとインフォメーションボック...JavaScriptリスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を...JavaScriptテキストがアニメーションで切り替わっていく「jquery-bubble-text」jquery-bubble-textは、テキストが次々に切り替わってい...JavaScriptシンプルなバナースライドショーを実装できる「jsslider」jssliderはシンプルなバナースライドショーを実装できるjQuer...JavaScript画像に垂直・水平方向のブラインド効果を入れたスライドショーを実装できるjQueryプラグイン「Bli...BlindifyというjQueryプラグインを使えば、画像に垂直・水平...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。TwitterFacebookInstagram最近の記事2020.02.20いつもの音楽をハイレゾ級で。ソニーの完全ワイヤレス...ソニーからハイレゾ級高音質と優れた接続性を備えた小型・軽量の完全ワイヤレスイヤホ...2020.02.19三色ボールペンの青と緑を「黒」に変えるいつも仕事で使っているジェットストリームの三色ボールペン(+シャーペン付き)。こ...2020.02.18成城石井オリジナルコーヒー豆「ブラジルイパネマ」アマゾンで買い物中に見つけた成城石井オリジナルコーヒー豆「ブラジルイパネマ」。...2020.02.17梅しば1年のどこかで無性にカリカリ梅を食べたくなる時期がある。