アフィリエイトツールで生活満足

ガジェット、ドローン、ゲーム、ライフハック、ツールビジネス

XpriteでGIF画像やCSSスプライトアニメーションを作る!

CSSスプライトを使ったパラパラアニメーションやGIF画像を
簡単に作るフリーソフト「Xprite」をご紹介

たとえば、このアニメーションGIF画像

gif ためし

実はこういう工程で簡単に作れるフリーソフトがあるんです

Xpriteダウンロード

このソフトの凄い所は部位ごとのパーツ素材の動きを指定すると
始点から終点までの間を自動的に補完して自動作成してくれる所

絵をかける人なら、動く絵を簡単に作れますね

また、GIF画像以外にも、WEB上で表現するのに別の方法もあります

CSSスプライト画像を出力してアニメーションさせる

CSSスプライトとは、簡単に言えば
複数の画像をそれぞれ読み込むのではなく
一枚の画像の中の位置を指定して利用する方法

一枚の画像を読み込むのは一度だけなので
大量に別の絵が表示されても表示速度に影響がないです

たとえば、上記のフリーソフトを利用してこんな画像を出力できます

連番画像

始点→終点 までの中間補正のアニメーション画像を生成し
それを一枚の画像に横にまとめている状態です

これをWEB上で表示させるとこのようになります

CSSでアニメーションさせる幅を指定して動かす
という定義を追加すれば、簡単埋め込みも可能

一見して、GIF画像と同じように見えますが
利点としては、出力時に動きの速度が固定されないため
表示の速度を微調整できる点です

出力形式は画像なので、PCだけじゃなく
タブレットでもスマートフォン環境でも表示されます

公式では、ゲームのアニメーションを作成するという用途のようですが
考え方としてはCSSスプライト用のPNG連番出力ができるということで
WEB製作にも応用できる高度でおもしろいフリーソフトだと思います

初見さんへ!他のカテゴリも見てね!

たぬきち
このブログがどんなブログか?トップページに戻ってみてください。個人的に気になるゲーム情報、PCガジェットレビュー、ライフハック情報、ラジコンホビー動画、旅行に料理、ビジネスに役立つソフトウェアの解説など、一言では語りきれない情報満載です

上部メニューから詳細なカテゴリを選択できます。ブログ更新、最新動画のアップはツイッターと連携してる他、たまに中の人がつぶやくのでフォローお願いします(笑)

COMMENTS & TRACKBACKS

  • Comments ( 2 )
  • Trackbacks ( 0 )
  1. たぬきちさん、おはようございます。
    いつも御世話になります、影太郎です。

    面白いですね、このツール。
    色々な所で活用できそうです!

    昔一度だけアニメ使ったことあったんですが
    イマイチぱっとしなくて・・・・・辞めました。

    苦労して作ったんだけど(笑)

    フリーでもこれだけのツールってあったんですね。

    さすがツールの神様、たぬきちさんです。
    今までもたにきちさんのブログやコメントから
    沢山のヒントをもらって活用させてもらっています。

    今回も活用させてもらいますね!

    寒くなってきましたね。
    静岡で寒いなんて言ってしまうと
    「まだまだ甘い」って・・・・言われてしまいそう^^

    • 影太郎さん( ゚∀゚)ノ

      私も前はGIFアニメを作るというテーマでレポートも書いてたんですけど
      それとはまた違った形で表現するのにCSSスプライトという技術を見つけ
      それについて、調べていたら・・いつのまにか出会ってしまった(笑)

      同人系のゲームのキャラクターってあーゆー感じでぬるぅって動くのか・・
      とまたひとつ無駄知識を増やしてみたりw

      ツールの神様だなんてそんな・・
      あっしはただ自分で興味を持った事を取り入れてるだけですぜ(;´∀`)

      寒いのは全国どこでもですよ
      異常気象で雪はもう北国の専売特許ではなくなったしw

LEAVE A REPLY

*
*
* (公開されません)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Return Top
trigger trigger