東京のWeb制作会社LIGLIGならできるおもしろいこと。フロントエンドシェアこんにちは。最近のサイトはぐいんぐいんと動いてたりしますよね。私も負けずにぐいんぐいん動かしたいなと思っていたのですが、素で書くにはなかなか難易度が高そうです。そんなとき、弊社のエンジニア・ハカセがPixi.jsというライブラリを教えてくれました。Canvasライブラリの中では最速とのこと。そこで今回は、そのPixi.jsを初めて触って簡単にアニメーションを作成してみた話を紹介したいと思います。Pixi.jshttp://www.pixijs.com/Pixi.jsの基本まずは公式サイトのダウンロードボタンを押し、遷移先のGitHubよりコードを落としてきます。GitHubhttps://github.com/GoodBoyDigital/pixi.jsダウンロードした中のexamplesフォルダの中には、サンプルがたくさんあります。1つ目のサンプルを見てみましょう。公式のサンプル1動物がくるくるまわっております。script部分は以下のような感じになってました。renderer.render(stage);}ざっくり言えば、ステージとレンダリング用のエリアを作って画像を配置し、画像の角度をちょっとずつ変えてるみたいなことでしょうか。Pixi.jsでアニメーションを作成する先ほどのサンプルのコードを参考に、とりあえず自分でコメントをつけながら書いてみました。