Q&A
不躾な質問に回答いただきありがとうございます！
canvasでもできるのですかね？普段あまり使わないので、ちょっと調べてみます。
[waveform CSS ]などは検索しているのですが、仰る通り、「波形っぽさ」で引っかかっています。単純に波をイメージしたアニメーションではなく、デジタルな波形っぽさに寄せるにはどうしたものか？と参考になるものをひたすら探しているところです。
調べ方やヒントになる事など、なんでも良いので教えていただけると幸いです。
下記サンプル動画のような動きをhtml上で表現するにはどのような手法が必要でしょうか？
サンプル動画
できればCSSとjavascript（ライブラリなどでも可）で完結したいのですが、イージングや時間の持たせ方などが難しいでしょうか？
やりたい事
・音の波形のような動きを背景に置きたい（主要素ではないアニメーション）
考えていた事
・マスキングで波形を表現（しかしkeyframeのみでチカチカっとしたランダムな動きは再現できるのか？）
参考：https://codepen.io/lbebber/pen/doagyV
・ローディングアイコンを作るような形でなんとか作ってみる（すごい量の装飾htmlタグを作る事になる？）
参考：https://codepen.io/JesGraPa/pen/Hyaiw
考え方として合っているのか？それともそもそも無理なのか？何か手がかりが欲しく、お力をいただけないでしょうか。。。
よろしくお願いいたします。
回答2件
0
canvasかsvgでしょうね
数式化できるなら表示領域もきまっているのでさほど手間ではないと思います
投稿2020/12/24 03:13
総合スコア116694
0
ランダム性をもたせるなら CSS のみではほぼ不可能でしょう。JavaScript を使って <canvas> 要素に書き込むのが早いかもしれません。どの程度「波形っぽさ」を求めるかによっても変わってくると思います。英語で「waveform CSS」など調べるとそれっぽいものが出てくるのでそちらを調べても良いかもしれません。
投稿2020/12/24 02:13
総合スコア2853
デジタルな波形っぽさというと矩形波でしょうか。画像検索してみてイメージがあってるならそれをキーワードに入れてみてください。ダメなら canvas で力技です
矩形波ではなさそうです。なんと表現して良いのかわからないのですが、このチカチカ...シュパ!っと動く感じです。
http://xs682095.xsrv.jp/xzjrp/sample.mp4
やっぱ canvas に直接書いたほうが早そうというのが個人的見解です
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/24 07:38
2020/12/24 08:03