carAnimationView
Car AnimationView
IOS – Animations
Animation is a critical part of your iOS user interfaces. Animation draws the user’s attention toward things that change, and adds a ton of fun and polish to your apps UI.
Even more importantly, in an era of “flat design”, animation is one of the key ways to make your app stand apart from others.
In this tutorial, you’ll learn how to use UIView animation to do the following:
- Set the stage for a cool animation.
- Create move and fade animations.
- Adjust the animation easing.
- Reverse and repeat animations.
There’s a fair bit of material to get through, but I promise it will be a lot of fun. Are you up for the challenge?
- Create a single view application.
- Select the imageview and set View
- Create IBOutlet from imageview. `CTRL+DRAG` from imageview to the viewcontroller.swift
You can choose from four different easing options:
.curveLinear: This option applies no acceleration or deceleration to the animation..curveEaseIn: This option applies acceleration to the start of your animation..curveEaseOut: This option applies deceleration to the end of your animation..curveEaseInOut: This option applies acceleration to the start of your animation and applies deceleration to the end of your animation.
To better understand how these options add visual impact to your animation, you’ll try a few of the options in your project.
Modify the animation code for your password field once again with a new option as follows:
UIView.animate(withDuration: 0.5, delay: 0.4,
options: [.repeat, .autoreverse, .curveEaseOut],
animations: {
self.password.center.x += self.view.bounds.width
},
completion: nil
)
Below is the complete code required to implement the functionality.
//
// ViewController.swift
// carAnimationView
// Shivan _ios_dev
// Copyright © 2016 . All rights reserved.
//
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var car1AnimationImageView: UIImageView!
@IBOutlet weak var car2AnimationImageView: UIImageView!
var screenSize:CGRect!
var screenWidth:CGFloat!
var screenHeight:CGFloat!
override func viewDidLoad() {
super.viewDidLoad()
getScreenSize()
self.car1AnimationImageView.center = CGPoint(x: 0, y: Int(Int(self.screenHeight) / 2))
self.car2AnimationImageView.center = CGPoint(x: 0, y: Int(Int(self.screenHeight) / 2))
moveBugLeft()
moveBugRight()
}
func getScreenSize() {
screenSize = UIScreen.main.bounds
screenHeight = screenSize.height
screenWidth = screenSize.width
}
func moveBugLeft() {
getScreenSize()
car1AnimationImageView.isHidden = true
UIView.animate(withDuration: 5, delay: 0, options: [.curveEaseInOut , .allowUserInteraction], animations: { self.car1AnimationImageView.center = CGPoint(x: 0, y: Int(Int(self.screenHeight) / 2))}, completion: {_ in self.faceBugLeft()})
}
func faceBugLeft() {
getScreenSize()
car1AnimationImageView.isHidden = false
UIView.animate(withDuration: 5, delay: 0, options: [.curveEaseInOut , .allowUserInteraction], animations: { self.car1AnimationImageView.center = CGPoint(x: Int(self.screenWidth), y: Int(Int(self.screenHeight) / 2))}, completion: {_ in self.moveBugLeft()})
}
func moveBugRight() {
getScreenSize()
car2AnimationImageView.isHidden = true
UIView.animate(withDuration: 5, delay: 0, options: [.curveEaseInOut , .allowUserInteraction], animations: { self.car2AnimationImageView.center = CGPoint(x: Int(self.screenWidth), y: Int(Int(self.screenHeight) / 2))}, completion: {_ in self.faceBugRight()})
}
func faceBugRight() {
getScreenSize()
car2AnimationImageView.isHidden = false
UIView.animate(withDuration: 5, delay: 0, options: [.curveEaseInOut , .allowUserInteraction], animations: { self.car2AnimationImageView.center = CGPoint(x: 0, y: Int(Int(self.screenHeight) / 2))}, completion: {_ in self.moveBugRight()})
}
}
If you want to implement animation using parse take.
Please let me know if you have any feedback or questions.
Please let me know if you have any feedback or questions.
Comments
Post a Comment