CODEWITHSUNDEEP
iosiphoneswiftanimationview
Anilkumar iOS Developer
Anilkumar iOS Developer

Reputation: 3755

How to load/remove Custom View with animation in Swift 3

I am showing some Customised view after loading the view controller. Like banner I am showing that customised view. I create that view by taking nib file and defined elements. Its loading fine, but, I want to add some animation while loading that custom view.

I tried following code, but not working.

override func viewDidLoad() {
    super.viewDidLoad()

    let nib = UINib(nibName: "NotificationBannerView", bundle: nil)
    let objects = nib.instantiate(withOwner: nil, options: nil)
    notificationView = objects.first as! NotificationBannerView
    UIView.animate(withDuration: 0.5, delay: 0.3, options: .curveEaseOut, animations: {
        self.notificationView.layoutIfNeeded()
        self.view.addSubview(self.notificationView)
    }, completion: nil)
}

I am not using autoresizing (Size classes) classes.

Any suggestions to achieve this? Thanks!

Upvotes: 1

Views: 3344

Answers (3)

Anilkumar iOS Developer
Anilkumar iOS Developer

Reputation: 3755

Finally, I found solution. I hope this may helps someone future.

   override func viewDidAppear(_ animated: Bool) {
    //animation
    UIView.animate(withDuration: 5, delay: 0.3, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
        self.notificationView.transform = CGAffineTransform(scaleX: 1, y: 0.5)
        self.notificationView.transform = CGAffineTransform(rotationAngle: CGFloat.pi/360)
        self.notificationView.frame = CGRect(x: 2, y: self.pageControl.frame.maxY, width:self.view.frame.width-2, height:130)
    }, completion: nil)

    }

Upvotes: 0

Milan Nosáľ
Milan Nosáľ

Reputation: 19757

First, you want to add the view as a subview:

self.view.addSubview(self.notificationView)

Then, you want to add some constraints to define where it is supposed to be, e.g.:

notificationView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    notificationView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
    notificationView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
    notificationView.topAnchor.constraint(equalTo: self.view.topAnchor),
    notificationView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
])

and then you want to add animation, e.g., fade in:

self.notificationView.alpha = 0

UIView.animate(withDuration: 0.5, delay: 0.3, options: .curveEaseOut, animations: {
    self.notificationView.alpha = 1
}, completion: nil)

Side note:

If you want to animate it to the view from somewhere else using autolayout, then after adding it as subview and activating initial set of constraints call:

self.view.setNeedsLayout()
self.view.layoutIfNeeded()

Then define a new set of constraints that will define its final frame, again after activating them call:

self.view.setNeedsLayout()

And finally in the animation block use (this will animate the new frame of the notificationView):

UIView.animate(withDuration: 0.5, delay: 0.3, options: .curveEaseOut, animations: {
    self.view.layoutIfNeeded()
}, completion: nil)

Upvotes: 2

Rahul Dasgupta
Rahul Dasgupta

Reputation: 924

let nib = UINib(nibName: "NotificationBannerView", bundle: nil)
let objects = nib.instantiate(withOwner: nil, options: nil)
notificationView = objects.first as! NotificationBannerView
notificationView.frame = CGRect(x:-100; y:0; width: 100; height:100)

self.view.addSubView(notificationView)

UIView.animate(withDuration: 0.5, delay: 0.3, options: .curveEaseIn, animations: {
      notificationView.frame = CGRect(x:10; y:20; width: 100; height:100)
}, completion: nil)

This will show the view from left with animation.

Upvotes: 0

Related Questions