Anelli di disegno con gradiente simile all'app fitness Apple Watch

Question

Sono molto nuovo alla grafica core e vorrei sapere come è possibile disegnare anelli con gradienti simili all'app di fitness Apple Watch. Sto cercando di farlo su un'app per iOS, poiché penso che Core Graphics non sia ancora supportato su WatchKit.

Ho trovato un ottimo tutorial sul seguente sito Web per disegnare gli anelli.

http://makeapppie.com/2015/03/10/swift-swift-basic-core-graphics-for-the-ring-graph/

comunque sto cercando di capire come aggiungere un gradiente al colore del tratto. Finora, basandomi su ciò che ho trovato, non esiste un modo semplice per farlo. Per raggiungere questo obiettivo, ho pensato di trovare le risposte a:

• Esiste un'API per creare sfumature circolari in Core Graphics?
• È possibile applicare il gradiente come colore del tratto in Grafica principale?

Grazie

Answer 1

Hai deve trovare la risposta della tua domanda per ora, ma io risponderò per tutti cercando di creare stessa cosa.

In primo luogo è necessario creare immagini da 1 a 100 (il nome è importare quindi fare attenzione con i nomi) per creare l'animazione dell'anello. È possibile utilizzare questa applicazione in simulatore per creare immagini ad anello:

GitHub - WatchRingGenerator

dopo che si dovrebbe importare le immagini di animazione per il progetto (non importa se li si importa in .xcassets o in cartella, ma fare che il proprio obiettivo di immagini è la vostra applicazione orologio non l'orologio app estensione o l'applicazione iOS)

Dopo di che è possibile creare l'animazione in questo modo:

override func awakeWithContext(context: AnyObject?){ 
super.awakeWithContext(context) 
imageView.setImageNamed("ringImage-") 
} 

override func willActivate() { 
imageView.startAnimatingWithImagesInRange(NSMakeRange(1, 46), duration: 1, repeatCount: 1) 
//This code will animate the ring from ringImage-1 to ringImage-46 
} 

Speranza che aiuta.

Answer 2

Sono un designer, non uno sviluppatore, quindi prendi questo per quello che vale. Come designer, per prima cosa creo gli anelli con colori a tinta unita, senza sfumature. Quindi posizionerei uno strato sopra di esso che è un anello pieno semitrasparente che ha un gradiente angolare (o radiale) dal nero al trasparente. Imposta l'opacità (o alpha) su qualcosa come il 10-40% a seconda di quanto forte sia il gradiente che desideri.

È possibile utilizzare un'applicazione di disegno come schizzo o Illustrator per creare un gradiente angolare o disegnare come spiegato qui: Drawing Circular Gradient

Speranza che aiuta.