vuejsでjavascriptのアニメーションライブラリを検討した際の覚書です。口コミやみなさんの乗り換え先がどうなっているのか適当にTwitterなどで調べました。
GSAPの評判(独自ライセンス商用利用有料)
アメリカ製のアニメーションライブラリです。
従来はTweenLite, TweenMax, TimelineLite, TimelineMaxとライブラリが分割されていましたが、軽量化によりひとつになりシンプルな記述が可能になりました。軽量かつ多機能、豊富なプラグインなどの特徴があり世界中で用いられています。
https://ics.media/entry/200805/
GSAP 特有のライセンスの面倒さもあって結構 Anime.js 推しです
— Masaki Kobayashi (@mkobayashime) November 14, 2019
GSAPってなんかライセンスが面倒な印象があってアニメーションで JS 必要なときは anime.js か mo.js 使ってたけど、課金があるサイトとかゲームじゃなければ無料で使えるのか
— GENKI 🐸 (@nibushibu) January 11, 2021
買い切りや寄付ならいいのですが、個人的にも今はライブラリにライセンス料をかけていられないため断念しました。
3プラン、1万〜2万超えのサブスクリプションです。商用利用は有料で公式の説明は次のとおり。
Yep It’s free to use under our no-charge licence ✨
— GreenSock (@greensock) March 17, 2022
However, if your GSAP-enhanced site/product generates a fee from multiple users it requires the commercial license.
You can find out more about the license here. Shout if you have questions!https://t.co/BrmYimbL1t
SimplyGreen、ShockinglyGreen、BusinessGreen
https://greensock.com/club/
ただ、GSAPのScrollTriggerという拡張がとても便利そうで使いたいなと。
ScrollTriggerの代替
でも、GSAPは採用を見送ったためScrollTriggerの代替があるのではと探しました。
animejsの評判(MIT License)
animejsはフランス製です。Julian Garnierさんというパリの方が作ったようです。GSAPは多くのことができるけど重いから、軽量ライブラリを作ったみたいなことを言っておられましたかね。
アニメといえばやっぱフランスですよね!個人的にバンド・デシネが好きなのでそんな思いもあります。
vue.jsで使っている人も多そうですね。
Vue.jsにanime.js組み合わせて動きつけてたら楽しいというか、色々試していたらもうこんな時間、、
— ゆう@ソフトウェアエンジニア (@engineerYuuu) December 8, 2020
下記anime.jsでの文字の動きで参考になったページ@tobiasahlinさんのサイトみたいです
雰囲気とかサイトの作りが好きhttps://t.co/XJVTC9k3lh
anime.jsとvueの相性良かったので広めて行きたい
— もんもん＠友利奈緒 (@dasisyouyu213) August 2, 2018
開発時間もそんなにかかりません。
同じように見える「好き勝手なデザインで配置した要素を、時間差でアニメーションさせながら表示させる」機能も、グリッドに沿ったHTML的なレイアウトならCSSとanime.jsでできるから1時間で、そうじゃない複雑な図だとcanvasにKonvaとかでプログラミングせんならんから1日かかる
— 遅刻大帝しんぞ (@ShinzoWithLinko) March 12, 2020
ライセンスはMITです。
MIT License
https://github.com/juliangarnier/anime/blob/master/LICENSE.md
使い方はqiitaで前半を執筆してみました。
後半はブログで執筆しました。
mo.jsの評判(MIT License)
なんとなく、かわいい名前です。La Rochell(フランスの都市)の方が作ったようです。
Velocityの評判(MIT License)
jQuery.animeteの置き換え用ですが、個人的にWeb屋ではないためjQueryはまったくわからないのと、口コミ的にもanime.jsと判断しました。
Velocity-animate から
— issie (@abierre_com) September 17, 2021
Anime.js に乗り換えました
「+=」と「-=」もあるし、
timeline 使えばチェインもできる
createjsの評判(MIT License)
CreateJSはAdobe Animate CCと連携できるのが強みらしいです。また、パーティクル関連は強そうな気もしました。MITライセンスです。
よさそうだったのですけど、わりと複雑なものをやる向けなのかなっと。
またこれです。
CreateJSの開発が終わったのは本当に残念。PIXIでもいいんだけど。
— アントニオ猪木談 (@ANTON072) December 21, 2021
githubをみると更新されていない状態はたしかなようですね。
そういえば昔 jAction(ジェイアクション）という、HTML5のCanvasのライブラリを作ったのを思い出した。数ヶ月後には、CreateJSで書き出せるAdobe Flash CS6がリリースされて短命ではあったんですが。
— CreateWave (@create_wave) May 16, 2021
今はCWもUnityばかりで、ブラウザゲーには見向きもしなくなってしまった。
2Dの表現系だとPixiJSのほうが勢いがあります。
— 池田 泰延 / ICS (@clockmaker) October 26, 2018
CreateJSはCanvas2Dベースで、PixiJSはWebGLベースなのですが、PixiJSのほうが性能が発揮しやすく、イケてるサイトでよく使われてる印象ですー
PixiJS,、Three.jsなどゲーム開発のフレームワーク
アニメーションといえばゲーム開発。ゲーム開発のフレームワークも少し調べてみましsた。PixiJS,Three.jsなんかもあるようです。
この記事で紹介されたJavaScriptでのゲーム開発のフレームワークは次の通り。
— ピータン@o11b (@pitang1965) August 29, 2019
★2Dフレームワーク
・PixiJS
・ExcaliburJS
・ImpactJS
・CreateJS
・PhaserJS
★3Dフレームワーク
・ThreeJS
・BabylonJS
気に入れば、これらのどれを使っても良いとの事です。
PIXI.jsは本も出版されているのですね。
ポチップ
ただ、ちゃんと作るのならJavaScriptではなくC#のUnity一択な気がします。
パフォーマンスやトータルの評判
各JSライブラリの性能比較のグラフ。jQueryは最速のものと比べ5分の1しかフレームレートがでていません。
— 池田 泰延 / ICS (@clockmaker) February 21, 2017
性能順：
TweenMax > TweenJS > Velocity.js > Anime.js >> jQueryhttps://t.co/PNN2xzrK2A pic.twitter.com/4XlCUK2jAc
2017年の情報だったため、こちらはあまり参考にしませんでしたが、anime.jsが劣っているのはちょっときになるところです。。
②anime.js
— TAK (@tak_dcxi) June 22, 2019
アニメーションライブラリ。競合にはTweenMaxやVelocityがありますがanime.jsが個人的には一番好きです。複雑だったり同時に走らせたりするようなアニメーションを導入する時はこれ使ってます。前述したBarbaと合わせればびっくりするくらい綺麗なページ遷移ができますね👍
アニメーションライブラリでおすすめは?
結局どうしたのかといえば、こうです。
JavaScriptのアニメーションライブラリの話
— 個人開発作家 まったりんneru (@neruplan) March 12, 2022
GSAP(ライセンスが面倒)
CreateJS(Adobe Animate CCと連携、パーティクル。でも更新されていない)
2022年、簡単なものならやっぱVelocityよりAnime.jsになるのかな!?https://t.co/NgOtVNAM1l#エンジニア初心者 #エンジニアと繋がりたい #javascript
やや気になる点はあったもののanime.jsを採用しました。使い方はqiitaで執筆してみました。
ただJSのアニメライブラリはそんなに詳しくないためもっといいものがあれば教えてください。
コメント