2013-11-04 9 views
13

Vorrei creare questa onda sonora/peccato che sembra l'onda audio dinamica Siri in iOS 7 ha:Come animare una linea nello stesso modo dell'effetto ondulatorio mostrato da Siri?

1

2

3 4

so come creare e animare UIBezierCurve sin forma e ho cercato su Google molto, ma non ho trovato e non ho idea di come ottenere questo effetto.

La linea inizia in piano, quindi ondeggia e termina in piano. Non sto dormendo con nessun file sonoro, solo l'effetto di un waving casuale sarebbe sufficiente.

+0

Hi Skiny ... In questo momento mi sto affrontando lo stesso problem.I è stato implementato utilizzando curva di Bezier, ma non sono soddisfatto per questo ... quindi per favore dammi un suggerimento se hai completato con questo compito ... Grazie in anticipo .. – Alex

+0

Ciao Alex, come ho commentato di seguito, non ero soddisfatto delle curve cubiche, ho giocato con esso un po ', ma è stato solo per la mia curiosità e un altro lavoro è venuto fuori, quindi ho messo da parte questo e non sono tornato a quello da allora. Scusa – Skiny

+0

Grazie per la tua risposta amico .... – Alex

risposta

3

Penso che sarebbe molto difficile farlo con una sola curva di Bezier, probabilmente è meglio usare una curva NURBS o B-spline.

Per le immagini di esempio visualizzate, è possibile farlo con 7 punti di controllo su una cubica.
Probabilmente un cubo uniforme, con condizioni di fine clamped/bezier. In altre parole, il vettore del nodo sarebbe (0, 0, 0, 1, 2, 3, 4, 4, 4).

Per descrivere le posizioni del punto di controllo, le chiameremo P0..P6.

P0 e P6 sarebbero i punti finali della curva.

P2..P4 sono equidistanti in X tra P0 e P6. Cioè, P2 sarebbe 1/4 della strada, P2 sarebbe 2/4 della strada, e P3 sarebbe 3/4 della strada tra P0 e P6, nella dimensione X.

P1 manterrebbe la curva uscendo direttamente di lato. Il valore Y di P1 dovrebbe sempre essere uguale al valore Y di P0. Il valore X di P1 dovrebbe essere 1/3 del modo tra P0 e P2.

P5 è analogo a P1, lo stesso valore Y di P6 e il valore X è 1/3 del modo tra P6 e P5.

Quindi basta animare i valori Y di P2..P4 e otterrete una linea rimbalzante che è diretta alle estremità.

Non sono sicuro che iOS disponga di un'implementazione NURBS o B-spline disponibile per l'uso. Se non ce n'è uno disponibile, la buona notizia è che le curve NURBS possono essere suddivise in curve di Bezier. Per un semplice esempio come questo, è possibile convertire hard-code da NURBS a Bezier, senza implementare una libreria completa.

+0

Ciao @tfinniga, grazie per il suggerimento. Ho fatto qualche esperimento con una curva cubica.Beh, i risultati sembravano molto ehm ... strano, ma è solo questione di modificare i valori. Grazie ancora :) – Skiny

Problemi correlati