I am trying to get 3d flip animations among view controllers like this
https://github.com/nicklockwood/CubeController
For the animation.. basing on reverse value I set clock wise direction or anti clock direction
This is the code I am using for animation..
class CusNavAnimController : NSObject, UIViewControllerAnimatedTransitioning {
var reverse: Bool = false
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
return 0.25
}
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
let containerView = transitionContext.containerView()
let toViewController = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)!
let fromViewController = transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)!
let toView = toViewController.view
let fromView = fromViewController.view
//
toView.frame = UIScreen.mainScreen().bounds
fromView.frame = UIScreen.mainScreen().bounds
let direction: CGFloat = reverse ? -1 : 1
let const: CGFloat = -0.005
toView.layer.anchorPoint = CGPointMake(direction == 1 ? 0 : 1, 0.5)
fromView.layer.anchorPoint = CGPointMake(direction == 1 ? 1 : 0, 0.5)
var viewFromTransform: CATransform3D = CATransform3DMakeRotation(direction * CGFloat(M_PI_2), 0.0, 1.0, 0.0)
var viewToTransform: CATransform3D = CATransform3DMakeRotation(-direction * CGFloat(M_PI_2), 0.0, 1.0, 0.0)
viewFromTransform.m34 = const
viewToTransform.m34 = const
containerView!.transform = CGAffineTransformMakeTranslation(direction * containerView!.frame.size.width / 2.0, 0)
toView.layer.transform = viewToTransform
containerView!.addSubview(toView)
UIView.animateWithDuration(transitionDuration(transitionContext), animations: {
containerView!.transform = CGAffineTransformMakeTranslation(-direction * containerView!.frame.size.width / 2.0, 0)
fromView.layer.transform = viewFromTransform
toView.layer.transform = CATransform3DIdentity
}, completion: {
finished in
containerView!.transform = CGAffineTransformIdentity
fromView.layer.transform = CATransform3DIdentity
toView.layer.transform = CATransform3DIdentity
fromView.layer.anchorPoint = CGPointMake(0.5, 0.5)
toView.layer.anchorPoint = CGPointMake(0.5, 0.5)
if (transitionContext.transitionWasCancelled()) {
toView.removeFromSuperview()
} else {
fromView.removeFromSuperview()
}
transitionContext.completeTransition(!transitionContext.transitionWasCancelled())
})
}}
I am getting the animation but It is not same as the git hub link providing..
For my code.. the fromview is slightly going back and toview coming to front from that point.. can anyone suggest me the changes
Check out TransitionFlipFromLeft and TransitionFlipFromRight in UIViewAnimationOptions
Related
I want to create a transition between two views like UIView.transition with .transitionFlipFromLeft. For example:
import UIKit
class ViewController: UIViewController {
static let frame = CGRect(x: 0, y: 0, width: 300, height: 200)
let viewContainer = UIView(frame: frame)
let view1 = UIView(frame: frame)
let view2 = UIView(frame: frame)
var currentView: UIView!
override func viewDidLoad() {
super.viewDidLoad()
self.view1.backgroundColor = .blue
self.view2.backgroundColor = .red
self.currentView = self.view1
self.view.addSubview(self.viewContainer)
self.viewContainer.addSubview(self.currentView)
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
if currentView == view1 {
flip(to: view2)
} else {
flip(to: view1)
}
}
func flip(to toView: UIView) {
UIView.transition(from: currentView,
to: toView,
duration: 1,
options: .transitionFlipFromLeft,
completion: { _ in self.currentView = toView })
}
}
It should be possible to reach a similar effect by using Core Animation. I replaced UIView.transition in func flip(to toView: UIView):
func flip(to toView: UIView) {
var transform = CATransform3DIdentity
transform.m34 = -1 / 400
toView.layer.transform = transform
self.currentView.layer.transform = transform
let disappearByRotating = CABasicAnimation(keyPath: "transform.rotation.y")
disappearByRotating.duration = 0.5
disappearByRotating.fromValue = 0
disappearByRotating.toValue = CGFloat.pi / 2
let appearByRotating = CABasicAnimation(keyPath: "transform.rotation.y")
appearByRotating.duration = 0.5
appearByRotating.fromValue = CGFloat.pi / 2
appearByRotating.toValue = CGFloat.pi
CATransaction.begin()
CATransaction.setCompletionBlock {
self.currentView.removeFromSuperview()
self.viewContainer.addSubview(toView) // <= Problem!
toView.layer.add(appearByRotating, forKey: "appear")
self.currentView = toView
}
self.currentView.layer.add(disappearByRotating, forKey: "disappear")
CATransaction.commit()
}
I used two animations: In the first animation, the first view rotates from the left to the middle, in the second animation, the second view rotates from the middle to the right.
When I add the second view to my viewContainer, it is displayed untransformed before the second animation starts. This causes flickering:
How can I prevent the flickering?
One option:
apply a 90-degree rotation to toView.layer before anything else
toView will now be "invisible" so add it as a subview
embed a new CATransaction with new Completion Block in the original Completion Block to "remove" the transform from toView.layer
Try this:
func flip(to toView: UIView) {
var transform = CATransform3DIdentity
transform.m34 = -1 / 400
// start toView rotated 90 degrees
transform = CATransform3DRotate(transform, CGFloat.pi / 2, 0, 1, 0)
toView.layer.transform = transform
// because toView's layer is rotated 90 degrees, we can
// add the subview here and it won't be visible
// really no difference between .addSubview and .insertSubview for our purposes
// but we'll insert it under the current view anyway
self.viewContainer.insertSubview(toView, belowSubview: self.currentView)
transform = CATransform3DIdentity
transform.m34 = -1 / 400
self.currentView.layer.transform = transform
let disappearByRotating = CABasicAnimation(keyPath: "transform.rotation.y")
disappearByRotating.duration = 0.5
disappearByRotating.fromValue = 0
disappearByRotating.toValue = CGFloat.pi / 2
disappearByRotating.fillMode = .forwards
disappearByRotating.isRemovedOnCompletion = false
let appearByRotating = CABasicAnimation(keyPath: "transform.rotation.y")
appearByRotating.duration = 0.5
appearByRotating.fromValue = -CGFloat.pi / 2
appearByRotating.toValue = 0
appearByRotating.fillMode = .forwards
appearByRotating.isRemovedOnCompletion = false
CATransaction.begin()
CATransaction.setCompletionBlock {
self.currentView.removeFromSuperview()
// start a new CATransaction with new Completion Block
CATransaction.begin()
CATransaction.setCompletionBlock {
self.currentView.layer.removeAnimation(forKey: "disappear")
toView.layer.removeAnimation(forKey: "appear")
// remove 90-degree-rotation starting point from toView
toView.layer.transform = CATransform3DIdentity
self.currentView = toView
}
toView.layer.add(appearByRotating, forKey: "appear")
CATransaction.commit()
}
self.currentView.layer.add(disappearByRotating, forKey: "disappear")
CATransaction.commit()
}
So here is a class for Slide in transition which adds a ViewController with animation from left to right and it works flawlessly I want a transition from bottom to top.
import UIKit
class SlideInTransition: NSObject, UIViewControllerAnimatedTransitioning {
var isPresenting = false
let dimmingView = UIView()
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.3
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard let toViewController = transitionContext.viewController(forKey: .to),
let fromViewController = transitionContext.viewController(forKey: .from) else { return }
let containerView = transitionContext.containerView
let finalWidth = toViewController.view.bounds.width * 0.8
let finalHeight = toViewController.view.bounds.height
if isPresenting {
// Add dimming view
dimmingView.backgroundColor = .black
dimmingView.alpha = 0.0
containerView.addSubview(dimmingView)
dimmingView.frame = containerView.bounds
// Add menu view controller to container
containerView.addSubview(toViewController.view)
// Init frame off the screen
toViewController.view.frame = CGRect(x: -finalWidth, y: 0, width: finalWidth, height: finalHeight)
}
// Move on screen
let transform = {
self.dimmingView.alpha = 0.5
toViewController.view.transform = CGAffineTransform(translationX: finalWidth, y: 0)
}
// Move back off screen
let identity = {
self.dimmingView.alpha = 0.0
fromViewController.view.transform = .identity
}
// Animation of the transition
let duration = transitionDuration(using: transitionContext)
let isCancelled = transitionContext.transitionWasCancelled
UIView.animate(withDuration: duration, animations: {
self.isPresenting ? transform() : identity()
}) { (_) in
transitionContext.completeTransition(!isCancelled)
}
}
}
To be honest I copied this code from somewhere a while ago and I don't have a source of it.
I'm fairly new to iOS so any help would be appreciated.
Try this,
class SlideInTransition: NSObject, UIViewControllerAnimatedTransitioning {
var isPresenting = false
let dimmingView = UIView()
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.3
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard let toViewController = transitionContext.viewController(forKey: .to),
let fromViewController = transitionContext.viewController(forKey: .from) else { return }
let containerView = transitionContext.containerView
let finalWidth = toViewController.view.bounds.width
let finalHeight = toViewController.view.bounds.height * 0.8
if isPresenting {
// Add dimming view
dimmingView.backgroundColor = .black
dimmingView.alpha = 0.0
containerView.addSubview(dimmingView)
dimmingView.frame = containerView.bounds
// Add menu view controller to container
containerView.addSubview(toViewController.view)
// Init frame off the screen
toViewController.view.frame = CGRect(x: 0, y: finalHeight, width: finalWidth, height: finalHeight)
}
// Move on screen
let transform = {
self.dimmingView.alpha = 0.5
toViewController.view.transform = CGAffineTransform(translationX: 0, y: -finalHeight)
}
// Move back off screen
let identity = {
self.dimmingView.alpha = 0.0
fromViewController.view.transform = .identity
}
// Animation of the transition
let duration = transitionDuration(using: transitionContext)
let isCancelled = transitionContext.transitionWasCancelled
UIView.animate(withDuration: duration, animations: {
self.isPresenting ? transform() : identity()
}) { (_) in
transitionContext.completeTransition(!isCancelled)
}
}
}
I would like to open a View Controller with an animation with the origin Frame of a square button on the bottom right:
I would like to move the top and then the bottom of the View Controller.
I tried to implement this, but that is not that good, I don't know how I can isolate the different edges:
class PopAnimator: NSObject, UIViewControllerAnimatedTransitioning {
let duration = 0.6
var presenting = true
var originFrame = CGRect.zero
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?)-> NSTimeInterval {
return duration
}
func animateTransition(transitionContext: UIViewControllerContextTransitioning) {
let containerView = transitionContext.containerView()!
let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!
let herbView = presenting ? toView : transitionContext.viewForKey(UITransitionContextFromViewKey)!
let initialFrame = presenting ? originFrame : herbView.frame
let finalFrame = presenting ? herbView.frame : originFrame
let xScaleFactor = presenting ?
initialFrame.width / finalFrame.width :
finalFrame.width / initialFrame.width
let yScaleFactor = presenting ?
initialFrame.height / finalFrame.height :
finalFrame.height / initialFrame.height
let scaleTransform = CGAffineTransformMakeScale(xScaleFactor, yScaleFactor)
if presenting {
herbView.transform = scaleTransform
herbView.center = CGPoint(
x: CGRectGetMidX(initialFrame),
y: CGRectGetMidY(initialFrame))
herbView.clipsToBounds = true
}
containerView.addSubview(toView)
containerView.bringSubviewToFront(herbView)
UIView.animateWithDuration(duration, delay:0.0,
options: [],
animations: {
herbView.transform = self.presenting ?
CGAffineTransformIdentity : scaleTransform
herbView.center = CGPoint(x: CGRectGetMidX(finalFrame),
y: CGRectGetMidY(finalFrame))
}, completion:{_ in
transitionContext.completeTransition(true)
})
let round = CABasicAnimation(keyPath: "cornerRadius")
round.fromValue = presenting ? 3.0/xScaleFactor : 0.0
round.toValue = presenting ? 0.0 : 3.0/xScaleFactor
round.duration = duration / 2
herbView.layer.addAnimation(round, forKey: nil)
herbView.layer.cornerRadius = presenting ? 0.0 : 3.0/xScaleFactor
}
}
Do you know how I can make it ?
I have a subclass of UIView called TitleView, all this subclass does is override layerClass to return CATransformLayer.
My titleView property has some subviews; a titleBackgroundView and a titleLabel.
When I run my code the titleView’s top layer is visible (green background), but when I run my flip animation, there’s no animation. The code just jumps to the end state. Furthermore there’s no bottom layer visible (red background), just a reversed version of the titleView (a transformed titleLabel).
In the IBOutlet setter I have the following code:
#IBOutlet private weak var titleView: TitleView! {
didSet {
titleView.backgroundColor = UIColor.clearColor()
let topLayer = CALayer()
topLayer.backgroundColor = UIColor.greenColor().CGColor
topLayer.frame = titleView.bounds
topLayer.doubleSided = false
topLayer.zPosition = 3
titleView.layer.addSublayer(topLayer)
let bottomLayer = CALayer()
bottomLayer.backgroundColor = UIColor.redColor().CGColor
bottomLayer.frame = titleView.bounds
bottomLayer.doubleSided = false
bottomLayer.zPosition = 2
bottomLayer.transform = CATransform3DMakeRotation(CGFloat(M_PI), 1, 0, 0)
titleView.layer.addSublayer(bottomLayer)
}
}
titleView animation code:
private func setIsCategoriesShowing(showCategories: Bool, animated: Bool)
{
let alreadyInFinishState = (isShowingCategories == showCategories) ? true : false
if alreadyInFinishState
{
return
}
// Setup animations
isAnimatingCategories = true
headerView.superview?.bringSubviewToFront(headerView)
titleView.layer.setAnchorPointDynamically(CGPoint(x: 0.5, y: 1)) // Change position when updating anchor point
// Animate
let duration: NSTimeInterval = animated ? 0.8 : 0
let options: UIViewAnimationOptions = (showCategories == true) ? [.CurveEaseIn] : [.CurveEaseOut]
let newRotationValue: CGFloat = (showCategories == true) ? -179 : 0
let damping: CGFloat = (showCategories == true) ? 0.7 : 1
let initialSpringVelocity: CGFloat = (showCategories == true) ? 0.5 : 1
UIView.animateWithDuration(duration,
delay: 0,
usingSpringWithDamping: damping,
initialSpringVelocity: initialSpringVelocity,
options: options,
animations: { () -> Void in
var rotationAndPerspectiveTransform = CATransform3DIdentity
rotationAndPerspectiveTransform.m34 = 1 / -500
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, newRotationValue, 1, 0, 0);
self.titleView.layer.sublayerTransform = rotationAndPerspectiveTransform;
}) { (success) -> Void in
if showCategories == false
{
self.titleView.layer.sublayerTransform = CATransform3DIdentity
}
self.isAnimatingCategories = false
self.isShowingCategories = showCategories
}
}
Okay, so given a series of trial and error I’ve managed to (it seems) fix my problem. Feel free to take a look…
Here is the working code:
#IBOutlet private weak var titleView: TitleView! {
didSet {
let bottomLayer = CALayer()
bottomLayer.backgroundColor = UIColor.redColor().CGColor
bottomLayer.frame = titleView.bounds
bottomLayer.doubleSided = false
bottomLayer.zPosition = 2
bottomLayer.transform = CATransform3DMakeRotation(CGFloat(M_PI), 0, 1, 0) // Reverse bottom layer, so when flipped it's visible.
titleView.layer.addSublayer(bottomLayer)
// All subviews are one-sided
for subview in titleView.subviews
{
subview.layer.doubleSided = false
}
}
}
#IBOutlet private weak var titleViewBackgroundView: UIView!
Animation code:
private func setIsCategoriesShowing(showCategories: Bool, animated: Bool)
{
let alreadyInFinishState = (isShowingCategories == showCategories) ? true : false
if alreadyInFinishState
{
return
}
// Housekeeping
headerView.superview?.bringSubviewToFront(headerView)
titleView.layer.setAnchorPointDynamically(CGPoint(x: 0.5, y: 1))
// Animate
isAnimatingCategories = true
let isOpening = (showCategories == true)
let duration: NSTimeInterval = animated ? 3 : 0
let damping: CGFloat = isOpening ? 0.7 : 1
let initialSpringVelocity: CGFloat = isOpening ? 0.5 : 1
let options: UIViewAnimationOptions = isOpening ? [.CurveEaseIn] : [.CurveEaseOut]
let newRotationValue: CGFloat = isOpening ? -179 : 0
var rotationAndPerspectiveTransform = CATransform3DIdentity
rotationAndPerspectiveTransform.m34 = 1 / -500
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, newRotationValue, 1, 0, 0);
UIView.animateWithDuration(duration,
delay: 0,
usingSpringWithDamping: damping,
initialSpringVelocity: initialSpringVelocity,
options: options,
animations: {
self.titleView.layer.transform = rotationAndPerspectiveTransform;
}) { (success) -> Void in
if !isOpening
{
self.titleView.layer.transform = CATransform3DIdentity
}
self.isAnimatingCategories = !success
self.isShowingCategories = showCategories
}
}
The effect could be implemented like the following code in animateTransition method:
UIView.animateWithDuration(duration,
delay: 0,
usingSpringWithDamping: 0.3,
initialSpringVelocity: 0.0,
options: .CurveLinear,
animations: {
fromVC.view.alpha = 0.5
toVC.view.frame = finalFrame
},
completion: {_ -> () in
fromVC.view.alpha = 1.0
transitionContext.completeTransition(true)
})
But how could I implement it using gravity and collision behaviors(UIGravityBehavior, UICollisionBehavior)?
And a more general question may be "How to use the UIDynamicAnimator to customize the transitions between UIViewControllers?"
You can find the solution under the post Custom view controller transitions with UIDynamic behaviors by dasdom.
And the Swift code:
func transitionDuration(transitionContext: UIViewControllerContextTransitioning!) -> NSTimeInterval {
return 1.0
}
func animateTransition(transitionContext: UIViewControllerContextTransitioning!) {
// 1. Prepare for the required components
let toVC = transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)
let finalFrame = transitionContext.finalFrameForViewController(toVC)
let containerView = transitionContext.containerView()
let screenBounds = UIScreen.mainScreen().bounds
// 2. Make toVC at the top of the screen
toVC.view.frame = CGRectOffset(finalFrame, 0, -1.0 * CGRectGetHeight(screenBounds))
containerView.addSubview(toVC.view)
// 3. Set the dynamic animators used by the view controller presentation
var animator: UIDynamicAnimator? = UIDynamicAnimator(referenceView: containerView)
let gravity = UIGravityBehavior(items: [toVC.view])
gravity.magnitude = 10
let collision = UICollisionBehavior(items: [toVC.view])
collision.addBoundaryWithIdentifier("GravityBoundary",
fromPoint: CGPoint(x: 0, y: screenBounds.height),
toPoint: CGPoint(x: screenBounds.width, y: screenBounds.height))
let animatorItem = UIDynamicItemBehavior(items: [toVC.view])
animatorItem.elasticity = 0.5
animator!.addBehavior(gravity)
animator!.addBehavior(collision)
animator!.addBehavior(animatorItem)
// 4. Complete the transition after the time of the duration
let nsecs = transitionDuration(transitionContext) * Double(NSEC_PER_SEC)
let delay = dispatch_time(DISPATCH_TIME_NOW, Int64(nsecs))
dispatch_after(delay, dispatch_get_main_queue()) {
animator = nil
transitionContext.completeTransition(true)
}
}
A little more complicated than using animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion: method.
EDIT: Fixed a bug when 'transitionDuration' is ≤1