人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptで音声に合わせてアイコンに動きをつけたいと試みています。
Jsfiddleにサンプル・コードを書きました。

https://jsfiddle.net/kajironpu/46Lrne74/

発音ボタンをクリックすると読み上げが始まります。
アイコンにCSSで動きをつけたいのですが、「読み上げ中」のときだけ、アイコンに動きをつけにはどうしたらいいのでしょうか?(サンプル・コードは、常時アイコンが動作しています。)(読み上げが終わればアイコンのアニメーションが停止するようにしたい)
スピーカーから音がなっている間だけフラグがONになればそのときだけアニメーションのCSSを実施して、OFFになればアイコンを通常のものに上書きすればいいのか?とも考えたのですが何かいい方法があれば是非教えてください。宜しくお願いします。

1505349413
●拡大する

●質問者: kajironpu
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● ぽけっとしすてむ
ベストアンサー

ボタンにclass名を追加/削除する事で実現できます。
https://jsfiddle.net/psne/nce8mhaw/


APIドキュメントには

などのオプションの指定方法がありますので、そちらも合わせてご確認ください。

※元のコードをあまり変化させないよう回答しましたが、個人的には通常時を「アニメーション無し」として発音中にアニメーションする方が、手直しをする際に分りやすいかと思います。


kajironpuさんのコメント
ぽけっとしすてむさん、ありがとうございました。 APIのほうを確認しました。start / stopでcall backを利用できるのですね。 コードありがとうございました。 このコードは、スタートを押したら、 btn.classList.remove("stop-flash");で 停止の画像をremoveするので通常のアニメーションが動きだすのでしょうか? 読み上げが終わったら、 btn.classList.add("stop-flash");で 通常の画像をもう一度、addするため、アニメーションの画像が上書きされる という意味でしょうか? ちなみに、スタートしたらアニメーションをaddする 終わったら、通常画像をadd するというので試してみたら、だめでした。 この場合は、どうして動かないのでしょうか?? // 発音開始時に呼び出されるもの function hatuon_hajime() { btn.classList.add("double-flash"); } // 発音終了時に呼び出されるもの function hatuon_owari() { btn.classList.add("stop-flash"); }

ぽけっとしすてむさんのコメント
回答のURLにあるコードでは + double-flash がアニメーション用の指定を持っているので、stop-flashを使って打ち消している + 発音の操作を行う時に、stop-flashを取り除いて「打ち消している」指定を取り除く + 発音が終了した時に、stop-flashを再度追加して「打ち消し」指定を行う という動作となっています。 何ヶ月か経過して内容を忘れてしまった時や、他の人と一緒にコードを書くときの為に、それぞれの役割を整理しながら書き直していきます。 - スピーカーアイコンは常にその場所にある - 通常時(発音していない時)は、点滅しない - 動作時(発音している時)は、点滅させたい スピーカーの表示の指示(class名)と点滅の指示(class名)を分けて考える事ができます。 実際に書き換えてみましょう。 https://jsfiddle.net/psne/vtp0vqqe/

kajironpuさんのコメント
ありがとうございまス!!これがすごくわかりやすいです。 固定のスピーカーアイコンと、点滅用を分けてCSSにつくっておくのですね。 ふむふむ。 最初は、固定のアイコンを出しておく。 音声ONのときに btn.classList.add("js-flash-animation"); アニメを追加する。→アイコンが上書き。 音声OFFのときは、 btn.classList.remove("js-flash-animation"); アニメーションをremoveする。 つまり、下に隠れていた、通常アイコンが表示される。 とても理解できました。ありがとうございます!

ぽけっとしすてむさんのコメント
正確には「通常時と同じアイコンを透明にしたり、不透明にする」指示となります。 アイコンはすべての状態で「一つ」しかなく、変化しているのは透明度だけ となります。 CSSにある「opacity」は、要素の不透明度を指定するものです。 https://developer.mozilla.org/ja/docs/Web/CSS/opacity

kajironpuさんのコメント
なるほど、透明度でアニメーションを作っているですね。 もともとのデフォルトの画像には transform-origin: 50% 50%; これを設定しておくのですね。 ありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ