iOS Swift UIView animation example

iOS Swift UIView animation example

You create a CAKeyframeAnimation object using the inherited init(keyPath:) method, specifying the key path of the property that you want to animate on the layer. You can then specify the keyframe values to use to control the timing and animation behavior. In this example we are using a button but you can do this with any View. Here we will do the following animations
  • Shake
  • Slide from Left to Right
  • Change Opacity
  • Change Background Color

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        addButton1()
        addButton2()
        addButton3()
        addButton4()
        
    }
    
    func addButton1(){
        
        let button = UIButton(frame: CGRect(x: 100, y: 50, width: 200, height: 50))
        button.setTitle("Shake Button", for: .normal)
        button.setTitleColor(.red, for: .normal)
        
        button.backgroundColor = UIColor(red: 0.4, green: 1.0, blue: 0.2, alpha: 0.5)
        button.layer.cornerRadius = 10;
        button.layer.borderWidth = 1
        button.layer.borderColor = UIColor.black.cgColor
        button.clipsToBounds = true;
        
        button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
        self.view.addSubview(button)
        
    }
    
    func addButton2(){
        
        let button = UIButton(frame: CGRect(x: 100, y: 150, width: 200, height: 50))
        button.setTitle("Slide Button", for: .normal)
        button.setTitleColor(.red, for: .normal)
        
        button.backgroundColor = UIColor(red: 0.4, green: 1.0, blue: 0.2, alpha: 0.5)
        button.layer.cornerRadius = 10;
        button.layer.borderWidth = 1
        button.layer.borderColor = UIColor.black.cgColor
        button.clipsToBounds = true;
        
        button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
        self.view.addSubview(button)
        
    }
    
    func addButton3(){
        
        let button = UIButton(frame: CGRect(x: 400, y: 50, width: 200, height: 50))
        button.setTitle("Fade In/Out Button", for: .normal)
        button.setTitleColor(.red, for: .normal)
        
        button.backgroundColor = UIColor(red: 0.4, green: 1.0, blue: 0.2, alpha: 0.5)
        button.layer.cornerRadius = 10;
        button.layer.borderWidth = 1
        button.layer.borderColor = UIColor.black.cgColor
        button.clipsToBounds = true;
        
        button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
        self.view.addSubview(button)
        
    }
    
    func addButton4(){
        
        let button = UIButton(frame: CGRect(x: 400, y: 150, width: 200, height: 50))
        button.setTitle("Button changes Color", for: .normal)
        button.setTitleColor(.red, for: .normal)
        
        button.backgroundColor = UIColor(red: 0.4, green: 1.0, blue: 0.2, alpha: 0.5)
        button.layer.cornerRadius = 10;
        button.layer.borderWidth = 1
        button.layer.borderColor = UIColor.black.cgColor
        button.clipsToBounds = true;
        
        button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
        self.view.addSubview(button)
        
    }
    
    @objc func buttonAction(sender: UIButton!) {
        if let buttonTitle = sender.titleLabel?.text {
            print(buttonTitle + " tapped!")
            
            if(buttonTitle == "Shake Button") {
                
                // translation factor along the x axis.
                let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")
                animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
                
                // total time from start to finish.
                animation.duration = 1.0
                
                // values to move in that direction.
                animation.values = [-10.0, 10.0, -7.0, 7.0, -5.0, 5.0, 0.0 ]
                
                // specifies how to split the total duration in various parts.
                // value must be between 0 and 1.
                // must be same number of elements as values array
                animation.keyTimes = [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1]
                
                // values are relative to its starting position.
                animation.isAdditive = true
                
                //add the animation
                sender.layer.add(animation, forKey: "shake")
            }
                
            else if (buttonTitle == "Slide Button") {
                let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")
                animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
                animation.duration = 1.0
                animation.values = [2.0,4.0,6.0,8.0,10.0,8.0,6.0,4.0,2.0]
                animation.keyTimes = [0, 0.125, 0.25, 0.375, 0.5, 0.625, 0.75, 0.875, 1]
                animation.isAdditive = true
                sender.layer.add(animation, forKey: "slide")
                
            }
            
            else if (buttonTitle == "Fade In/Out Button") {
                let animation = CAKeyframeAnimation(keyPath: "opacity")
                animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
                animation.duration = 1.0
                animation.values = [1,0.2,1.0]
                animation.keyTimes = [0, 0.5, 1]
                sender.layer.add(animation, forKey: "opacity")
            }
            
            else if (buttonTitle == "Button changes Color") {
                let animation = CAKeyframeAnimation(keyPath: "backgroundColor")
                animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
                animation.duration = 1.0
                animation.values = [UIColor(red: 0.4, green: 1.0, blue: 0.2, alpha: 0.5).cgColor,
                                    UIColor.black.cgColor,
                                    UIColor(red: 0.4, green: 1.0, blue: 0.2, alpha: 0.5).cgColor]
                animation.keyTimes = [0, 0.5, 1]
                sender.layer.add(animation, forKey: "backgroundColor")
            }
            
        }
    }
    
}


No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.