samedi 18 juin 2016

Making Navigation Bar loading like Apple News App

I want to create navigation bar loading animation like Apple News App in swift.But,its is title changing in some animation.I really don't know how to do it because I am not familiar with Animation or Transition because I am beginner.But,I really did my best for that.Unfortunately,it is still not fulfilling my wishes.Any Help with that?

Here is my code it will do when refreshing:

    // Refreshing 
    let fadeTextAnimation = CATransition()
    fadeTextAnimation.duration = 0.5
    fadeTextAnimation.type = kCATransitionFromTop

    navigationController?.navigationBar.layer.addAnimation(fadeTextAnimation, forKey: "fadeText")
    navigationItem.title = "Refreshing..."

And this is my initial state before refreshing:

    let titleView: UIView = UIView(frame: CGRectMake(0, 0, 125, 40))

    let navIcon: UIImageView = UIImageView(frame: CGRectMake(50, 10, 21, 21))
    navIcon.image = UIImage(named: "ic_logo")

    titleView.addSubview(navIcon)

    self.navigationItem.titleView = titleView

Here is the state that will do after refreshing :

let titleView: UIView = UIView(frame: CGRectMake(0, 0, 125, 40))

    let navIcon: UIImageView = UIImageView(frame: CGRectMake(50, 10, 21, 21))
    navIcon.image = UIImage(named: "ic_logo")

    titleView.addSubview(navIcon)

    let fadeTextAnimation = CATransition()
    fadeTextAnimation.duration = 1.0
    fadeTextAnimation.type = kCATransitionFromTop

    self.navigationController?.navigationBar.layer.addAnimation(fadeTextAnimation, forKey: "fadeText")

    self.navigationItem.titleView = titleView

That initial state is set up at ViewDidLoad which was an icon logo at the center of navigation title.When I open the app the initial state with no comment is activated.

Logo (image) [initial state] -> Show refreshing text when it need to refresh [Refreshing] -> After refreshing show logo back [After refresh]

it was image to title label and title label to image animation,which will be done at Navigation Bar.Above i created is fade animation.Is there any way that i can make animation like Apple News Navigation Bar?

Aucun commentaire:

Enregistrer un commentaire