IOS UIView animation details

IOS UIView animation details

Currently, many animation frameworks can be used in iOS development, including Apple's CoreAnimation framework and Facebook Pop, which are indeed a tool for programmers. But what if we just want to implement some simple animations? A cool. We can use UIView directly. Today, let's have a good chat about UIView animation and write it using Swift. (You can see that I sometimes use OC, sometimes Swift, and now the basic skills I have learned on iOS, so I can write Swift in the OC code, write OC according to Swift, haha ). This sample code uploads to the https://github.com/chenyufeng1991/iOS-UIView-Animation.

The closure in Swift is often used in method calls, similar to block blocks in OC. A simple explanation: closures appear as a function parameter, but some statements can be executed in this parameter to execute certain logic. You can understand a closure as an anonymous function.

 

()-> Void: indicates that the parameter is null and the return value is Void. This closure function must be implemented. (Bool)-> Void )? : Indicates that the parameter is of the Bool type, and the return value is Void, followed? This closure function can be empty;

 

(1) Position Animation

PositionAnimation can be used to move a View. The simplest thing is moving the X axis and Y axis. Here we implement the movement of several small blocks.

 

Import UIKitclass PositionViewController: UIViewController {@ IBOutlet weak var greenSquare: UIView! @ IBOutlet weak var redSquare: UIView! @ IBOutlet weak var blueSquare: UIView! Override func viewDidLoad () {super. viewDidLoad ()} override func viewDidAppear (animated: Bool) {// the definition of the closure function; // note that the animation method in the animation is called, and the completion uses the closure function; you can call it directly in the external definition to make the code clearer. // The closure here needs to input a BOOl value, and the return value is null; // This is the callback after the animation is executed. func completeGreen (v: Bool) {print (Green Completion)} func completeRed (v: Bool) {print (Red Completion )} func completeBlue (v: Bool) {print (Blue Completion)} // The closure parameter here is null; func animGreen () {self. greenSquare. center. x = self. view. bounds. width-self. greenSquare. center. x} func animRed () {self. redSquare. center. y = self. view. bounds. height-self. redSquare. center. y} func animBlue () {self. blueSquare. center. y = self. view. bounds. height-self. blueSquare. center. y self. blueSquare. center. x = self. view. bounds. width-self. blueSquare. center. x} // The delay parameter indicates the delay. The first parameter indicates the animation time. // call the closure function. UIView. animateWithDuration (1, delay: 0, options: [], animations: animGreen, completion: completeGreen) UIView. animateWithDuration (1, delay: 0.5, options: [], animations: animRed, completion: completeRed) UIView. animateWithDuration (1, delay: 1, options: [], animations: animBlue, completion: completeBlue )}}

 

(2) Transparency Animation

Transparency animation allows a View to be transparent between 0 and ~ 1. If the transparency is 1, the system is completely transparent and invisible. If the transparency is 1, it indicates the same as normal.

 

Import UIKitclass OpacityViewController: UIViewController {@ IBOutlet weak var greenSquare: UIView! Override func viewDidLoad () {super. viewDidLoad ()} override func viewDidAppear (animated: Bool) {super. viewDidAppear (animated) func anim () {self. greenSquare. alpha = 0.2 // change transparency to 0.2} UIView. animateWithDuration (2, animations: anim) // It is often 2 s ;}}

(3) Scaling Animation

 

The zoom animation can change the size of a View and zoom in or out proportionally.

 

Import UIKitclass ScaleViewController: UIViewController {@ IBOutlet weak var greenSquare: UIView! Override func viewDidLoad () {super. viewDidLoad ()} override func viewDidAppear (animated: Bool) {super. viewDidAppear (animated) func anim () {self. greenSquare. transform = CGAffineTransformMakeScale (0.5, 0.5) // scale down to 0.5 times;} UIView. animateWithDuration (1, animations: anim )}}

(4) color Animation

 

Color animation allows a View to experience a color gradient within a time interval for color transition.

 

import UIKitclass ColorViewController: UIViewController {    @IBOutlet weak var greenSquare: UIView!    @IBOutlet weak var swiftText: UILabel!      override func viewDidLoad() {        super.viewDidLoad()    }    override func viewDidAppear(animated: Bool) {        super.viewDidAppear(animated)                func anim(){            self.greenSquare.backgroundColor = UIColor.blackColor()            self.swiftText.textColor = UIColor.blueColor()        }        UIView.animateWithDuration(2, animations: anim)    }  }

(5) Rotating Animation

 

Allows a View to rotate around the dot.

 

Import UIKitclass RotationViewController: UIViewController {@ IBOutlet weak var wheel: UIImageView! Override func viewDidLoad () {super. viewDidLoad ()} func spin () {UIView. animateWithDuration (1, delay: 0, options :. curveLinear, animations: {self. wheel. transform = CGAffineTransformRotate (self. wheel. transform, CGFloat (360) // The second parameter is angle;}) {// call the spin () function after the end; (finished)-> Void in self. spin () }}// spin () override func viewDidAppear (animated: Bool) {super. viewDidAppear (animated) self. spin ()}}

(6) repeated Animation

 

This animation can be executed repeatedly during an animation process.

 

Import UIKit // repeated animation; class RepeatViewController: UIViewController {@ IBOutlet weak var blueSquare: UIView! @ IBOutlet weak var redSquare: UIView! @ IBOutlet weak var greenSquare: UIView! Override func viewDidLoad () {super. viewDidLoad ()} override func viewDidAppear (animated: Bool) {super. viewDidAppear (animated); UIView. animateWithDuration (1) {()-> Void in self. blueSquare. center. x = self. view. bounds. width-self. blueSquare. center. x} UIView. animateWithDuration (1, delay: 0, options: UIViewAnimationOptions. repeat, animations: {()-> Void in self. redSquare. center. x = self. view. bounds. width-self. redSquare. center. x ;}, completion: nil) // note the options expression; UIView. animateWithDuration (1, delay: 0, options: [UIViewAnimationOptions. repeat, UIViewAnimationOptions. autoreverse], animations: {()-> Void in self. greenSquare. center. x = self. view. bounds. width-self. greenSquare. center. x ;}, completion: nil )}}

(7) buffer Animation

 

The beisaier curve is used to change the speed of the View animation. You can practice it.

 

import UIKitclass EasingViewController: UIViewController {      @IBOutlet weak var blueSquare: UIView!  @IBOutlet weak var redSquare: UIView!  @IBOutlet weak var greenSquare: UIView!    @IBOutlet weak var yellowSquare: UIView!      override func viewDidLoad() {    super.viewDidLoad()      }    override func viewDidAppear(animated: Bool) {    super.viewDidAppear(animated);        UIView.animateWithDuration(1) { () -> Void in            self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x    }        UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in      self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x      }, completion: nil)        UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in      self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x      }, completion: nil)        UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in      self.yellowSquare.center.x = self.view.bounds.width - self.yellowSquare.center.x      }, completion: nil)      }  }

(8) Spring Animation

 

This animation is similar to the true effect of spring during execution. You can set the damping and initial speed of spring to achieve extremely realistic spring jitter.

 

Import UIKitclass SpringViewController: UIViewController {@ IBOutlet weak var blueSquare: UIView! @ IBOutlet weak var redSquare: UIView! @ IBOutlet weak var greenSquare: UIView! Override func viewDidLoad () {super. viewDidLoad ()} override func viewDidAppear (animated: Bool) {UIView. animateWithDuration (1) {()-> Void in self. blueSquare. center. x = self. view. bounds. width-self. blueSquare. center. x;} // The third parameter is damping, the fourth parameter is the initial speed, the fifth parameter is the animation type, and the UIView. animateWithDuration (1, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: UIViewAnimationOptions. transitionNone, animations: {()-> Void in self. redSquare. center. x = self. view. bounds. width-self. redSquare. center. x ;}) {(Bool)-> Void in} UIView. animateWithDuration (1, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 1, options: UIViewAnimationOptions. transitionNone, animations: {()-> Void in self. greenSquare. center. x = self. view. bounds. width-self. greenSquare. center. x ;}) {(Bool)-> Void in }}}

The animation implementation here is very simple. You can try it by downloading the code. I will explain more advanced and cool animations later. Please do your best.