问题
In my app I'm dismissing a viewController using a UIPercentDrivenInteractiveTransition triggered by a pan gesture. I'm expecting my viewController to be dragged to the right as I'm panning it. However when I slowly pan I get a glitch: the viewController quickly jumps from left to right a bit.
This can be seen here: https://youtu.be/3IEtId1w7jM
Here's the code for the transition:
class FilterHideTransition: UIPercentDrivenInteractiveTransition {
let viewController: FilterViewController
var enabled = false
private let panGesture = UIPanGestureRecognizer()
private let tapGesture = UITapGestureRecognizer()
init(viewController: FilterViewController) {
self.viewController = viewController
super.init()
panGesture.addTarget(self, action: #selector(didPan(with:)))
panGesture.cancelsTouchesInView = false
panGesture.delegate = self
tapGesture.addTarget(self, action: #selector(didTap(with:)))
tapGesture.cancelsTouchesInView = false
tapGesture.delegate = self
viewController.view.addGestureRecognizer(panGesture)
viewController.view.addGestureRecognizer(tapGesture)
}
}
//MARK: - Actions
private extension FilterHideTransition {
@objc func didPan(with recognizer: UIPanGestureRecognizer) {
let translation = recognizer.translation(in: viewController.view)
let percentage = translation.x / viewController.view.frame.size.width
print(percentage)
switch recognizer.state {
case .began:
enabled = true
viewController.dismiss(animated: true, completion: nil)
break
case .changed:
update(percentage)
break
case .ended:
completionSpeed = 0.3
if percentage > 0.5 {
finish()
} else {
cancel()
}
enabled = false
break
case .cancelled:
cancel()
enabled = false
break
default:
cancel()
enabled = false
break
}
}
@objc func didTap(with recognizer: UITapGestureRecognizer) {
viewController.dismiss(animated: true, completion: nil)
}
func isTouch(touch: UITouch, in view: UIView) -> Bool {
let touchPoint = touch.location(in: view)
return view.hitTest(touchPoint, with: nil) != nil
}
}
extension FilterHideTransition: UIGestureRecognizerDelegate {
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
if gestureRecognizer == tapGesture {
return !isTouch(touch: touch, in: viewController.panel)
} else if gestureRecognizer == panGesture {
return !isTouch(touch: touch, in: viewController.heightSlider) &&
!isTouch(touch: touch, in: viewController.widthSlider) &&
!isTouch(touch: touch, in: viewController.priceSlider)
} else {
return true
}
}
}
Here's the code for the animator:
class FilterHideAnimator: NSObject, UIViewControllerAnimatedTransitioning {
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.25
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from),
let toVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to) as? OverlayTabBarController
else { return }
let startFrame = fromVC.view.frame
let endFrame = CGRect(x: startFrame.size.width, y: 0, width: startFrame.size.width, height: startFrame.size.height)
UIView.animate(withDuration: transitionDuration(using: transitionContext),
delay: 0.0,
options: .curveEaseIn,
animations: {
fromVC.view.frame = endFrame
toVC.overlay.alpha = 0
},
completion: {
_ in
if transitionContext.transitionWasCancelled {
transitionContext.completeTransition(false)
} else {
transitionContext.completeTransition(true)
}
})
}
}
My question: How can I prevent this glitch from happening?
回答1:
I tested your minimal working example and the same issue reappears. I wasn't able to fix it using UIView.animate API, but the issue does not appear if you use UIViewPropertyAnimator - only drawback is that UIViewPropertyAnimator is available only from iOS 10+.
iOS 10+ SOLUTION
First refactor HideAnimator to implement interruptibleAnimator(using:) to return a UIViewPropertyAnimator object that performs the transition animator (note that as per documentation we are supposed to return the same animator object for ongoing transition):
class HideAnimator: NSObject, UIViewControllerAnimatedTransitioning {
fileprivate var propertyAnimator: UIViewPropertyAnimator?
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.25
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
// use animator to implement animateTransition
let animator = interruptibleAnimator(using: transitionContext)
animator.startAnimation()
}
func interruptibleAnimator(using transitionContext: UIViewControllerContextTransitioning) -> UIViewImplicitlyAnimating {
// as per documentation, we need to return existing animator
// for ongoing transition
if let propertyAnimator = propertyAnimator {
return propertyAnimator
}
guard let fromVC = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)
else { fatalError() }
let startFrame = fromVC.view.frame
let endFrame = CGRect(x: startFrame.size.width, y: 0, width: startFrame.size.width, height: startFrame.size.height)
let animator = UIViewPropertyAnimator(duration: transitionDuration(using: transitionContext), timingParameters: UICubicTimingParameters(animationCurve: .easeInOut))
animator.addAnimations {
fromVC.view.frame = endFrame
}
animator.addCompletion { (_) in
if transitionContext.transitionWasCancelled {
transitionContext.completeTransition(false)
} else {
transitionContext.completeTransition(true)
}
// reset animator because the current transition ended
self.propertyAnimator = nil
}
self.propertyAnimator = animator
return animator
}
}
One last thing to make it work, in didPan(with:) remove following line:
completionSpeed = 0.3
This will use the default speed (which is 1.0, or you can set it explicitly). When using interruptibleAnimator(using:) the completion speed is automatically calculated based on the fractionComplete of the animator.
回答2:
So the issue is actually that when you initiate an interactive transition, the animation tries to run in its entirety. If you put a breakpoint in the gestures change state, you can see the entire animation run, and when you resume, it picks back up tracking your finger. I tried a bunch of hacks around setting the interactive transition's progress to 0 but nothing seemed to work.
The solution involves setting the transition context's container view's layer speed to 0 during the transition and setting it back to 1 when the transition is ready to complete. I abstracted this code into a simple subclass of UIPercentDrivenInteractiveTransition. The code looks something like:
@implementation InteractiveTransition {
id<UIViewControllerContextTransitioning> _transitionContext;
}
- (void)startInteractiveTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
_transitionContext = transitionContext;
[_transitionContext containerView].layer.speed = 0;
[super startInteractiveTransition:transitionContext];
}
- (void)finishInteractiveTransition {
[_transitionContext containerView].layer.speed = 1;
[super finishInteractiveTransition];
}
- (void)cancelInteractiveTransition {
[_transitionContext containerView].layer.speed = 1;
[super cancelInteractiveTransition];
}
@end
This will pause the animation until you're ready to finish or cancel the interactive transition.
来源：https://stackoverflow.com/questions/48224242/slowly-panning-in-uipercentdriveninteractivetransition-results-in-glitch