Effetti su Bottoni

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.

 

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.

import UIKit

class ViewController: UIViewController {
    
    // Bottoni
    @IBOutlet weak var pulsante: UIButton!
    @IBOutlet weak var flash: UIButton!
    @IBOutlet weak var shake: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()      
    }

    // Effetto Pulsante
    @IBAction func BTNPulsante(_ sender: UIButton) {
    }
    
    // Effetto Flash
    @IBAction func BTNFlash(_ sender: UIButton) {
    }
    
    // Effetto Shaker
    @IBAction func BTNShake(_ sender: UIButton) {  
    }
}

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.

import Foundation
import UIKit

extension UIButton {  
    func pulsante() {
        let pulsante = CASpringAnimation(keyPath: "transform.scale")
        pulsante.duration = 0.6
        pulsante.fromValue = 0.95
        pulsante.toValue = 1
        pulsante.autoreverses = true
        pulsante.repeatCount = 2
        pulsante.initialVelocity = 0.5
        pulsante.damping = 1
        layer.add(pulsante, forKey: nil)
    }  
}

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“.

func flash(){      
        let flash = CABasicAnimation(keyPath: "opacity")
        flash.duration = 0.5
        flash.fromValue = 1
        flash.toValue = 0.1
        flash.timingFunction = CAMediaTimingFunction(name: flash.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut))
        flash.autoreverses = true
        flash.repeatCount = 3
        layer.add(flash, forKey: nil)
    }
    
    func shake(){   
        let shake = CABasicAnimation(keyPath: "position")
        shake.duration = 0.1
        shake.repeatCount = 2
        shake.autoreverses = true

        let daPunto = CGPoint(x: center.x - 5, y: center.y)
        let daValore = NSValue(cgPoint: daPunto)
        shake.fromValue = daValore

        let toPunto = CGPoint(x: center.x + 5, y: center.y)
        let toValore = NSValue(cgPoint: toPunto)
        shake.toValue = toValore
        layer.add(shake, forKey: nil)
    }

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.

import UIKit

class ViewController: UIViewController {
    
    // Bottoni
    @IBOutlet weak var pulsante: UIButton!
    @IBOutlet weak var flash: UIButton!
    @IBOutlet weak var shake: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
     
        pulsante.layer.cornerRadius = 8
        flash.layer.cornerRadius = 8
        shake.layer.cornerRadius = 8        
    }

    // Effetto Pulsante
    @IBAction func BTNPulsante(_ sender: UIButton) {
        
        // Richiamo metodo pulsante dal file extensionBottone
        sender.pulsante()
    }
    
    // Effetto Flash
    @IBAction func BRNFlash(_ sender: UIButton) {
        
        // Richiamo metodo flash dal file extensionBottone
        sender.flash()
    }
    
    // Effetto Shaker
    @IBAction func BTNShake(_ sender: UIButton) {
        
        // Richiamo metodo shaker dal file extensionBottone
        sender.shake()
    }
}

Risultato Finale

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

Materiale Progetto