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.