How to make dissolve animation on changing views on iphone?

Question

How to make dissolve animation on changing views in iphone?

Dissolve effect: one view is changing another without any movement.

Thanks a lot for the help!

Answer 1

UIView has a method called transition(from:to:duration:options:completion:) that has the following declaration:

class func transition(from fromView: UIView, to toView: UIView, duration: TimeInterval, options: UIViewAnimationOptions = [], completion: ((Bool) -> Void)? = nil)

Creates a transition animation between the specified views using the given parameters.

---

Among the many UIViewAnimationOptions parameters that you can pass to transition(from:to:duration:options:completion:) is transitionCrossDissolve.

transitionCrossDissolve has the following declaration:

static var transitionCrossDissolve: UIViewAnimationOptions { get }

A transition that dissolves from one view to the next.

---

The following Swift 3 Playground code shows how to toggle between two UIViews with a cross dissolve transition by using transition(from:to:duration:options:completion:) and transitionCrossDissolve:

import UIKit
import PlaygroundSupport

class ViewController: UIViewController {

    let firstView: UIView = {
        let view = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        view.backgroundColor = .red
        return view
    }()
    let secondView: UIView = {
        let view = UIView(frame: CGRect(x: 50, y: 50, width: 100, height: 100))
        view.backgroundColor = .blue
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white
        view.addSubview(firstView)

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(toggle(_:)))
        view.addGestureRecognizer(tapGesture)
    }

    func toggle(_ sender: UITapGestureRecognizer) {
        let presentedView = view.subviews.first === firstView ? firstView : secondView
        let presentingView = view.subviews.first !== firstView ? firstView : secondView        
        UIView.transition(from: presentedView, to: presentingView, duration: 1, options: [.transitionCrossDissolve], completion: nil)
    }

}

let controller = ViewController()
PlaygroundPage.current.liveView = controller

Answer 2

[UIView beginAnimations: @"cross dissolve" context: NULL];
[UIView setAnimationDuration: 1.0f];
self.firstView.alpha = 0.0f;
self.secondView.alpha = 1.0f;
[UIView commitAnimations];

Answer 3

The animation you're looking for is:

[UIView animateWithDuration: 1.0
                 animations:^{
                     view1.alpha = 0.0;
                     view2.alpha = 1.0;
                 }];

A more complete solution, using that animation might be:

- (void) replaceView: (UIView *) currentView withView: (UIView *) newView
{
    newView.alpha = 0.0;
    [self.view addSubview: newView];

    [UIView animateWithDuration: 1.0
                     animations:^{
                         currentView.alpha = 0.0;
                         newView.alpha = 1.0;
                     } 
                     completion:^(BOOL finished) {
                         [currentView removeFromSuperview];
                     }];
}

Answer 4

You can also use UIViewAnimationOptionTransitionCrossDissolve in ios5 and later...

[UIView transitionFromView:currentView
                    toView:nextView
                  duration:2
                   options:UIViewAnimationOptionTransitionCrossDissolve 
                completion:^(BOOL finished) {
                    [currentView removeFromSuperview];
                    }];