web-dev-qa-db-ja.com

Siriが示す波のような効果と同じように線をアニメーション化するにはどうすればよいですか?

ダイナミックオーディオウェーブSiriには次のようなものがあります:

1

2

34

UIBezierCurveの罪の形を作成してアニメーション化する方法を知っていて、たくさんグーグルで検索しましたが、この効果を実現する方法が見つからず、わかりません。

線は波よりも平らに始まり、平らに終わります。私はサウンドファイルで目覚めているわけではありません。ランダムに振る効果だけで十分です。

14
Skiny

たぶん、OSXのSISinusWaveViewに基づいて、iOS用のSCSiriWaveformViewのライブラリを試すことができます。

https://github.com/stefanceriu/SCSiriWaveformView

13
CSolanaM

単一のベジェ曲線でこれを行うのは非常に難しいと思います。おそらく、NURBS曲線またはBスプライン曲線を使用する方が良いでしょう。

表示するサンプル画像の場合、立方体上の7つのコントロールポイントを使用してそれを行うことができます。
おそらく均一な立方体で、クランプ/ベジェ終了条件があります。言い換えると、ノットベクトルは(0、0、0、1、2、3、4、4、4)になります。

制御点の位置を説明するために、それらをP0..P6と呼びます。

P0とP6が曲線の端点になります。

P2..P4は、X内でP0とP6の間で等間隔に配置されます。つまり、X次元では、P2は1/4、P2は2/4、P3はP0とP6の間の3/4になります。

P1は、カーブが側面からまっすぐに出てくるようにします。 P1のY値は、常にP0のY値と同じである必要があります。 P1のX値は、P0とP2の間の1/3である必要があります。

P5はP1に類似しており、P6と同じY値であり、X値はP6とP5の間の1/3です。

次に、P2..P4のY値をアニメートするだけで、両端がまっすぐな弾む線が得られます。

IOSでNURBSまたはBスプラインの実装を使用できるかどうかはわかりません。使用可能なものがない場合、良いニュースは、NURBS曲線をベジェ曲線に分解できることです。このような簡単な例では、完全なライブラリを実装しなくても、NURBSからBezierへの変換をハードコーディングすることができます。

3
tfinniga