IOS animation-Layer Animations, iosanimations

IOS animation-Layer Animations, iosanimations

Let's first take a look at the results we want to achieve today. The effects achieved today can be achieved using View Animations in the first article.

//1 let fadeIn = CABasicAnimation(keyPath: "opacity") //2 fadeIn.fromValue = 0.0 //3 fadeIn.toValue = 1.0 //4 fadeIn.duration = 0.5 //5 fadeIn.fillMode = kCAFillModeBackwards //6 fadeIn.beginTime = CACurrentMediaTime() + 0.5 cloud1.layer.addAnimation(fadeIn, forKey: nil) fadeIn.beginTime = CACurrentMediaTime() + 0.7 cloud2.layer.addAnimation(fadeIn, forKey: nil) fadeIn.beginTime = CACurrentMediaTime() + 0.9 cloud3.layer.addAnimation(fadeIn, forKey: nil) fadeIn.beginTime = CACurrentMediaTime() + 1.1 cloud4.layer.addAnimation(fadeIn, forKey: nil)

Obviously, we provide four clouds.LayerAn animation is added, and the gradient effect is achieved.
 
 

  
  
1. This statement declaresCABasicAnimationThe parameter is not specified.OpacityThis is the definition of transparency. There are many other values in the header, suchPositionOf course we will talk about this later.
  
  
2. We set the initial animation value, that is, the transparency is initially 0.
  
  
3. We set the final value of the animation, that is, the transparency is 1.
  
  
4. animation duration. We set it to 0.5 seconds. In combination with the preceding three sentences, this animation indicates that the transparency of an object is changed. Within 0.5 seconds, the transparency is changed from 0 to 1.
  
  
5. the value we set for the fillMode attribute is kCAFillModeBackwards. What is the value of kCAFillModeBackwards? This attribute can display the object's frame, we can run the program after commenting on this sentence to see the effect. We will find that before the animation, the cloud is visible, and this is obviously a BUG, there are many ways to solve this BUG. For example, we can say that the transparency of clouds is set to 0, and the animation time is calculated. When the animation ends, the transparency of clouds is set to 1, this can certainly achieve the same effect, but it is really ~~~~ It's not elegant. Another way is to add the fillMode attribute. kCAFillModeBackwards means to display the initial state of the animation, and there are two other values.KCAFillModeForwardsDisplays the animation effect of an object,KCAFillModeBothThe above two effects are taken into account.
  
  
6. This attribute is well explained. If the animation of each cloud is not carried out at the same time, we will set the start time for the cloud, this property is similar to the delay parameter of UIViewAnimation we mentioned earlier.
 
 

The above content implements the cloud's progressive animation.

If you have any questions about UIViewAniamtion that I have already said several times, please read the previous article by yourself. If you think it is good, please pay attention to yourself and enjoy it again ~~

The following is the title,Username,PassWordThere is an animation that moves from left to right outside the screen to the center of the screen. The code is displayed directly:

   //1    let flyRight = CABasicAnimation(keyPath: "position.x")    flyRight.toValue = view.bounds.size.width/2    flyRight.fromValue = -view.bounds.size.width/2    flyRight.duration = 0.5    heading.layer.addAnimation(flyRight, forKey: nil)    //2    flyRight.beginTime = CACurrentMediaTime() + 0.3    flyRight.fillMode = kCAFillModeBackwards    username.layer.addAnimation(flyRight, forKey: nil)   flyRight.beginTime = CACurrentMediaTime() + 0.4   password.layer.addAnimation(flyRight, forKey: nil)

 
 

  
  
// 1 through the explanation of the cloud animation, I believe we can understand this Code. The only difference is that the CABasicAnimation animation object we created here is"Position. x",FromvalueAndToVauleI believe we do not need to explain it too much. What is worth mentioning is that our value refers to the object.Center. xInstead of the upper left corner.
  
  
// 2. The delay for username is 0.3 seconds. Also setFlyRight. fillMode = kCAFillModeBackwards
 
 

Is it easy? Yes ~

Log in button animation, the Code is as follows:

UIView.animateWithDuration(0.5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: nil, animations: {        self.loginButton.center.y -= 30.0        self.loginButton.alpha = 1.0    }, completion: nil)

The explanation of this piece of code is very detailed here, and the author looks very handsome. You can see it at http://www.jianshu.com/p/bd7bf438b288when you look at your profile picture.

We also found that the clouds are constantly moving and continue with the code:

 func animateCloud(cloud: UIImageView) {    let cloudSpeed = 60.0 / view.frame.size.width    let duration = (view.frame.size.width - cloud.frame.origin.x) * cloudSpeed    UIView.animateWithDuration(NSTimeInterval(duration), delay: 0.0, options: .CurveLinear, animations: {      cloud.frame.origin.x = self.view.frame.size.width    }, completion: {_ in      cloud.frame.origin.x = -cloud.frame.size.width      self.animateCloud(cloud)    })  }

> For more information, see the Log in button. ------------- The animation after clicking the ** Log in ** button is left. Let's take a look at what happened first. When we click the button, click duang ~ At the same time, the color changed, the rounded corner increased, and an activity indicator was added. Code:

@IBAction func login() {    //1    UIView.animateWithDuration(1.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: nil, animations: {      self.loginButton.bounds.size.width += 80.0    }, completion: nil)    //2    UIView.animateWithDuration(0.33, delay: 0.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.0, options: nil, animations: {      self.loginButton.center.y += 60.0    //3      self.spinner.center = CGPoint(x: 40.0, y: self.loginButton.frame.size.height/2)      self.spinner.alpha = 1.0    }, completion: {_ in    //4      self.showMessage(index: 0)    })    //5    let tintColor = UIColor(red: 0.85, green: 0.83, blue: 0.45, alpha: 1.0)    tintBackgroundColor(layer: loginButton.layer, toColor: tintColor)    //6    roundCorners(layer: loginButton.layer, toRadius: 25.0)  }

This section is amazing, because it is very long.
 
 

  
  
1. duang ~ The button becomes longer.
  
  
2. duang ~ The button is moved down.
  
  
3. Add an activity indicator.
  
  
4. AddMessageLet's talk about this later.
  
  
5. Call the tintBackgroundColor method to change the color. This isTintBackgroundColorMethod Code:
func tintBackgroundColor(#layer: CALayer, #toColor: UIColor) { let tint = CABasicAnimation(keyPath: "backgroundColor") tint.fromValue = layer.backgroundColor layer.backgroundColor = toColor.CGColor tint.toValue = toColor.CGColor tint.duration = 1.0 tint.fillMode = kCAFillModeBoth layer.addAnimation(tint, forKey: nil) }
In fact, this method is basically the same as the CABasicgroundColor in the front. First, we change the color to the color we need to change and then execute the animation.
  
  
6. Add an animation to the rounded corner
func roundCorners(#layer: CALayer, #toRadius: CGFloat) { let round = CABasicAnimation(keyPath: "cornerRadius") round.fromValue = layer.cornerRadius layer.cornerRadius = toRadius round.toValue = toRadius round.duration = 0.33 layer.addAnimation(round, forKey: nil) }
In general, the thought of changing the color above is the same. Also, first change the rounded corner, then execute the animation, and then display the rounded corner you set at the beginning.
 
 

Now, only the animation of the message is left. After the animation of the message is completed, the Log in button is played back, the animation of the Log in button is exactly the same as that of the button mentioned above, but it is the opposite. Let's take a look.MessageAnimation:

func removeMessage(#index: Int) {    UIView.animateWithDuration(0.33, delay: 0.0, options: nil, animations: {      self.status.center.x += self.view.frame.size.width    }, completion: {_ in      self.status.hidden = true      self.status.center = self.statusPosition      self.showMessage(index: index+1)    })  }  func resetForm() {    UIView.transitionWithView(status, duration: 0.2, options: .TransitionFlipFromTop, animations: {      self.status.hidden = true      self.status.center = self.statusPosition    }, completion: nil)    UIView.animateWithDuration(0.2, delay: 0.0, options: nil, animations: {      self.spinner.center = CGPoint(x: -20.0, y: 16.0)      self.spinner.alpha = 0.0      self.loginButton.bounds.size.width -= 80.0      self.loginButton.center.y -= 60.0    }, completion: {_ in      let tintColor = UIColor(red: 0.63, green: 0.84, blue: 0.35, alpha: 1.0)      tintBackgroundColor(layer: self.loginButton.layer, toColor: tintColor)      roundCorners(layer: self.loginButton.layer, toRadius: 10.0)    })  }