Home Tutorial Effetti su Bottoni

Effetti su Bottoni

UIButton animated

582
0

Effetti su Bottoni

In questo Tutorial vedremo come applicare alcuni effetti visivi al Tap su un bottone.

Nell’esempio utilizzeremo la classe “CASpringAnimation” e “CABasicAnimation” per  creare un effetto pulsante, flash e shake.

pulsantiios

 

Creiamo un nuovo progetto e all’interno della scena importiamo dalla libreria tre bottoni configurandoli graficamente come da figura.

Creiamo successivamente i riferimenti di tipo “@IBOutlet” e  “@IBAction” all’interno del file viewController.swift collegato alla scena.

Ora creiamo all’interno del progetto un nuovo file di tipo .swift chiamandolo “extensionBottone” e spostiamoci al suo intero.

In questo file per creeremo un extension della classe “UIButton” e al suo interno inseriremo i metodi per la creazione degli effetti.

Nel codice sopra abbiamo importato la libreria UIKit, creato una extension della classe UIButton e al suo interno abbiamo creato il primo metodo di tipo void chiamandolo “pulsante”.

All’interno del metodo abbiamo creato una costate di tipo “CASpringAnimation” chiamandola pulsante e passandogli come parametro KeyPath la stringa “transform.scale“, successivamente abbiamo configurato i diversi parametri per ottenere l’effetto.

.duration = durata dell’effetto, .fromValue = valore di partenza, .toValue = valore finale, .autoreverses = impostare true se si vuole tornare alla posizione iniziale altrimenti false, .repeatCount = quante volte eseguire il ciclo, .initialVelocity = velocità dell’effetto, .damping = valore effetto rimbalzo e infine abbiamo aggiunto un la costante pulsante come parametro di un layer.

Nel codice qui sotto invece abbiamo creato gli altri 2 effetti con lo stesso procedimento ovviamente cambiando i parametri e la classe che in questo caso è la “CABasicAnimation“.

Ovviamente, giocando con i valori dei parametri, possiamo modificare il comportamento degli effetti.

Infine, spostandoci nuovamente del file viewController.swif abbiamo assegnato ad ogni singolo bottone il rispettivo effetto tramite l’assegnazione dei metodi creati ai singoli sender come riportato nel codice seguente.

Risultato Finale

pulsantiEffetto

Per qualunque dubbio o domanda scrivete un commento in questa lezione.

Materiale Progetto