新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン
今日では、ほぼすべてのウェブサイトにアニメーションが使われていると言っても過言ではないでしょう。派手な3Dアニメーションから、UIのマイクロインタラクションまで、その物量や時間のスケールはさまざまです。 アニメーション技術もCSSやSVG、Canvasと多岐に渡り、こんな表現まで！？ と驚くようなものも増えました。 しかし、複雑なアニメーションになるほどコードは煩雑になり人間の手には負えなくなります。イメージはあるのに具現化できない！ そんな悔しい思いを抱えたまま諦めるしかないのでしょうか？ いえ、道具です。道具を使うのです。本記事ではイメージをダイレクトに表現する手段としてのアニメーションライブラリGSAP 3について紹介します。 本記事を読むことで、以下の知識が手に入ります ウェブにおけるアニメーションの重要性 アニメーションライブラリとは？ 強力なアニメーションライブラリGSAP 3
2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。 この記事では、今年紹介したツールのなかでも特に話題になった2019年の便利オンラインツールベスト85個をまとめてご紹介します。 実際に制作フローに取り入れて便利だったツールを選りすぐったこのコレクションには、「無料で利用できることを基本としたツール」を揃えています。これらのツールやサービスを活用して、より快適なWeb制作ライフを過ごしましょう。 2019年に登場した最新オンラインツール一覧 以下は、2019年にかけて当サイトで紹介した、ウェブ制作が捗る便利ツール一覧となります。今回未紹介のツールが中心となっているので、こちらも一度目を通しておくことをオススメします。 ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ ウェブデザイン制作が加速中！便利な最新オンラインツ
Framer Motion React用アニメーションライブラリ「Framer Motion」 様々なアニメーションを比較的容易に実装できそうです 関連エントリ タイプライターアニメーション「type-this」 美しい背景アニメーション集「Ambient Canvas Backgrounds」 なめらかでFlashみたいなテキストアニメーション「TextyleFLIP.js」
【GSAP入門】使い方となにができるのか
どうも！かけちまるです！ 近年注目されてきたアニメーションライブラリのGSAPについて解説です。 軽量かつ多機能でいてプラグインも豊富に用意されています。 スクロールに応じたアニメーションや線形補完など複雑なアニメーションが簡単に実装できます。 さらに、WebGLやCanvasアニメーションでも重宝します。 この記事では、 ・GSAPでこんなことができる ・GSAP読み込み方 ・基本的な記述方法 ・コールバックについて ・バラツキのあるアニメーションについて ・アニメーションのテンプレート化 ・タイムラインについて がわかります。 GSAPを使えばこんなことができる 見たほうが早いと思います。 ざっくりGSAPで表現できることをサンプルにしてみました。
アニメーションで魅せるポートフォリオサイトの制作過程を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
思いのほか反響があり、三大Webアワードのawwwards CSS Design Awards FWA を受賞することができました。とても嬉しかったです。 この記事では制作を振り返りつつ、技術周りのことや、動きのあるWebサイトを作る意味を書いていきたいと思います。 ポートフォリオサイト制作過程 自分らしいデザインを目指し、デザイナーさんをアサイン ポートフォリオサイトを作ろうと思ってから、デザインを自分でやるかずっと迷っていたのですが、元LIGのデザイナーさんにポートフォリオサイトの話をしたらバイブスが合って作ってくれることになりました。 このデザイナーさんとはLIG在籍時代に一緒によく案件をやっていて、以前自己研鑽で制作していたデザイン案がとても好みだったのでそのテイストにして欲しい、パーティクルを使って欲しい、アワードを取れるクオリティにして欲しいと伝えました。 今振り返るとすごくふ
GSAPの基本的な記述をまとめる
はじめに JavaScriptのアニメーションライブラリ「GSAP」の基本的な記述や、よく使う機能をまとめたいと思います。 GSAPはとても高機能で基本の部分となる記述を抑えるだけでも、工夫次第でいろんな表現ができます。当記事では触れませんがSVGやcanvasなどと組み合わせるとアニメーションの幅が一気に広がります。また、scrollTriggerやMotionPathPluginなどプラグインもとても充実しています。 基本的な動きを組み合わせたイントロアニメーション ループやリピート制御を組み合わせたエフェクト 連続的な処理 応用：canvasと組み合わせたイントロアニメーション GSAPのインストール
実はLottieアニメーション自体は結構昔から存在しているのですが、プロトタイピングやデザインツールとして（特に日本で）多く利用されているAdobe XDでサポートされたことにより、Lottieが再注目されているようなので、Lottieアニメーションの作り方から実装方法までを深掘りしてみたいと思います。 Lottieアニメーションとは？Lottieとは？Lottieは、2017年にAirbnbが発表し、json形式のファイルとして書き出したベクターアニメーションを、モバイルやWebでネイティブにレンダリングすることができるアニメーションライブラリです。 とはいえ、Web制作におけるアニメーションの実装は、すでにいろいろな方法があります。 連番ビットマップ画像のアニメーション（GIF、APNG、WebP） 動画ファイルを使ったアニメーション CSSアニメーション SVGアニメーション Can
Adobe After Effects + Lottie (Bodymovin) でモーションをつける - MIYOUWI : BLOG :
アイコンをクリックした時にちょっとしたモーションが入っていることによって、使っているデジタルツールに親近感を持つことはないですか？ ちょっとほっこり 今回は、複雑な計算式なしに、Adobe After Effects を使って描画したモーションを、Lottie (Bodymovin) を使って簡単に実装できる方法を紹介します。 １）Lottieとは Lottie は、Airbnbから登場したWeb、iOS、Android、React Native、Windows 対応のモバイルライブラリです。Adobe After Effectsで表示できるアニメーションをリアルタイムでレンダリングし、簡単に複雑な動きをするアニメーションを作成することができます。Lottieは、Bodymovinというオープンソースライブラリを使い、After Effects で作ったSVGアニメーションデータを拡張機能
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebAssemblyはWeb上で高速実行されるバイナリフォーマットです。しかし問題として、DOMは扱えません。もしDOMを使う場合にはWebブラウザ側にメッセージを流してJavaScriptで更新するか、Canvasのメモリを直接書き換える方法になります。 今回紹介するCanvasKitはアニメーションライブラリであるSkiaがWebAssemblyを使ってCanvas上で実行されるソフトウェアです。 CanvasKitの使い方 線が動き、太さが変わります。マウスクリックで星の位置を変えられます。 Canvas上で線を引きます。線は引く度に色を変えます。 ブロックが動くデモ。 飲み物のアニメーション。 ボールが飛び散るデモ。 こんな派手なアニメーションも。 マウスドラッグによって
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA
VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門 - ICS MEDIA
フロントエンドから始めるアニメーション 最強のライブラリGSAP3を手に入れよう - ICS MEDIA
2019年間ベスト！Web制作を変える便利オンラインツール厳選85個
React用アニメーションライブラリ「Framer Motion」:phpspot開発日誌
Lottieアニメーションについて深堀りしてみる｜けんじ
CanvasKit - WebAssemblyを使ってアニメーション