[glyph]でPNGのパラパラアニメを使いたい

プラグイン化しました。(2016/8/4)

pngでのパラパラアニメ表示もでけた。

コード

tyrano/plugins/kag/kag.tag.js

<img class='img_next' src='./tyrano/images/kag/nextpage.gif' />
 ↓
<div class='img_next'></div>

と、書き換える。

tyrano.plugin.kag.tag.text以下、showMessage(横書き用)とshowMessageVertical(縦書き用)の下の方に2箇所あり。使う方だけ変更でOK。

tyrano/tyrano.css

.img_next に、background-imageを指定し、アニメのCSSを追記。
↓私が試しにやってみた時のCSS
グリフ素材はA9-System-M様よりお借りしました。

.img_next {
  background: url(../tyrano/images/kag/glyph-nightvision-LineBreak_a.png) no-repeat;
  width: 20px;
  height: 20px;
  display: inline-block;
  animation: smile .5s steps(15) infinite;
	-ms-animation: smile .5s steps(15) infinite;
	-webkit-animation: smile .8s steps(15) infinite;
	-moz-animation: smile .5s steps(15) infinite;
}
@keyframes smile {
to { background-position: -360px 0;}
}

これでゲーム用素材サイトで配布してる、グリフ用画像も使えるわー!
忘れそうなのでメモメモ。

CSSアニメーションは、個人的にこの記事が一番理解しやすかったです。
CSSスプライトとstepsを使ってアニメーション画像を作ろう | Webクリエイターボックス


2016/6/21 微妙にアクセスのある記事なのに内容が適当過ぎるので微妙に追記してみました。
2016/7/2 アニメーション実行CSSの記述を忘れていたので追記。
2016/7/3 記事整形しなおしました…
2016/7/17 グリフ素材を検索してる方へのトラップになってる可能性(思い込みかも)があるので、記事名変更してみた。

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です