How to animate a line the same way the wave-like effect that Siri's shows? [closed]

Question

I would like to create this sound/sin wave that looks like the dynamic audio wave Siri in iOS 7 has:

I know how to create and animate UIBezierCurve sin shape and I googled a lot, but I haven't found and have no idea how to achieve this effect.

The line starts flat, than waves and ends flat. I'm not woking with any sound file(s), just the effect of random waving would suffice.

Answer 1

Maybe you could try the SCSiriWaveformView's library for iOS, based on OSX's SISinusWaveView:

https://github.com/stefanceriu/SCSiriWaveformView

Answer 2

I think it would be very difficult to do this with a single Bezier curve, it's probably better to use a NURBS or B-spline curve.

For the example images you show, you could do it with 7 control points on a cubic.
Probably a uniform cubic, with clamped/bezier end conditions. In other words, the knot vector would be ( 0, 0, 0, 1, 2, 3, 4, 4, 4 ).

To describe the control point positions, we'll call them P0..P6.

P0 and P6 would be the endpoints of the curve.

P2..P4 would be equally spaced in X between P0 and P6. That is, P2 would be 1/4 of the way, P2 would be 2/4 of the way, and P3 would be 3/4 of the way between P0 and P6, in the X dimension.

P1 would keep the curve coming straight out of the side. P1's Y value should always be the same as P0's Y value. P1's X value should be 1/3 of the way between P0 and P2.

P5 is analogous to P1, same Y value as P6 and X value is 1/3 of the way between P6 and P5.

Then just animate Y values of P2..P4 and you'll get a bouncy line that's straight at the ends.

I'm not sure if iOS has a NURBS or B-spline implementation available for use. If there's not one available, The good news is that NURBS curves can be broken down into Bezier curves. For a simple example like this, it's possible to hard-code conversion from NURBS to Bezier, without implementing a full library.

Answer 3

I made it in SwiftUI, but the algorithm is not very different.

https://github.com/nilotic/SiriWave