Animation show and hide view in Swift

Question

I have this function:

func showwAndHideFilterMenu(category : Int) {

    if showFilterMenu == false{
        UIView.animate(withDuration: 0.6, delay: 0, options: .curveEaseInOut, animations: {
            self.filterView.isHidden = false
            self.showFilterMenu = true       
        }) { (isCompleted) in
        }

    } else {
        UIView.animate(withDuration: 0.6, delay: 0, options: .curveEaseInOut, animations: {
            self.filterView.isHidden = true
            self.self.showFilterMenu = false       
        }) { (isCompleted) in
        }
    }
}

I have a function that shows and hides the view. I would like to add an animation to show / hide this view. How to do it? The direction of the animation would be from top to bottom.

Does anyone know how to do it?

Solution 1

You need to manipulate the alpha property and not the isHidden property for animation of UIView fade.

Try the following:

func showAndHideFilterMenu(category : Int) {
    if showFilterMenu == false {
        self.filterView.alpha = 0.0
        self.filterView.isHidden = false
        self.showFilterMenu = true

        UIView.animate(withDuration: 0.6, 
                       animations: { [weak self] in
                        self?.filterView.alpha = 1.0
        })
    } else {
        UIView.animate(withDuration: 0.6,
                       animations: { [weak self] in
                        self?.filterView.alpha = 0.0
        }) { [weak self] _ in
            self?.filterView.isHidden = true
            self?.showFilterMenu = false
        }
    }
}

Solution 2

Make sure you set filterView.clipsToBounds = true.

func showwAndHideFilterMenu(category : Int) {

        if showFilterMenu == false {

            var filterFrame = filterView.frame
            let actualHeight = filterFrame.size.height

            //initially set height to zero and in animation block we need to set its actual height.
            filterFrame.size.height = 0
            filterView.frame = frame

            UIView.animate(withDuration: 0.6, delay: 0, options: .curveEaseInOut, animations: {

                self.filterView.isHidden = false
                self.showFilterMenu = true

                //setting the actual height with animation
                filterFrame.size.height = actualHeight
                filterView.frame = filterFrame

            }) { (isCompleted) in

            }

        } else {

            var filterFrame = filterView.frame

            UIView.animate(withDuration: 0.6, delay: 0, options: .curveEaseInOut, animations: {

                self.filterView.isHidden = true
                self.showFilterMenu = false

                //set the height of the filter view to 0
                filterView.frame = filterFrame
                filterFrame.size.height = 0
                filterView.frame = frame

            }) { (isCompleted) in

            }
        }
    }

Solution 3

Try this will make your view slide from top to bottom and after that just hide that view

//MARK: Slide View - Top To Bottom
func viewSlideInFromTopToBottom(view: UIView) -> Void {
    let transition:CATransition = CATransition()
    transition.duration = 0.5
    transition.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut)
    transition.type = CATransitionType.push
    transition.subtype = CATransitionSubtype.fromBottom
    view.layer.add(transition, forKey: kCATransition)
}

Usage

// Cancel Button
@IBAction func cancelButtonAction(_ sender: Any) {            
   self.viewSlideInFromTopToBottom(view: hideAndShowPickerView)
   hideAndShowPickerView.isHidden = true
}