在 UIPercentDrivenInteractiveTransition 中缓慢平移会导致故障
Slowly panning in UIPercentDrivenInteractiveTransition results in glitch
在我的应用程序中,我使用由平移手势触发的 UIPercentDrivenInteractiveTransition 关闭 viewController。我希望我的 viewController 在平移时被拖到右边。然而,当我慢慢平移时,我遇到了一个小故障:viewController 快速地从左向右跳了一下。
这是 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
}
}
}
这是动画师的代码:
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)
}
})
}
}
我的问题:如何防止此故障发生?
我测试了你的最小工作示例,同样的问题再次出现。我无法使用 UIView.animate
API 修复它,但如果您使用 UIViewPropertyAnimator
则不会出现此问题 - 唯一的缺点是 UIViewPropertyAnimator
只能从 iOS10+.
iOS 10+ 解决方案
首先重构 HideAnimator
以实现 interruptibleAnimator(using:)
到 return 执行过渡动画器的 UIViewPropertyAnimator
对象(请注意,根据文档我们应该 return 用于持续过渡的相同动画对象):
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
}
}
让它工作的最后一件事,在 didPan(with:)
中删除以下行:
completionSpeed = 0.3
这将使用默认速度(即 1.0
,或者您可以明确设置)。使用interruptibleAnimator(using:)
时,根据动画师的fractionComplete
自动计算完成速度。
所以问题实际上是当您启动交互式过渡时,动画会尝试 运行 完整。如果在手势更改状态下放置一个断点,您可以看到整个动画 运行,当您恢复时,它会重新开始跟踪您的手指。我尝试了一些技巧来将交互式过渡的进度设置为 0,但似乎没有任何效果。
解决方案包括在过渡期间将过渡上下文的容器视图的图层速度设置为 0,并在过渡准备好完成时将其设置回 1。我将这段代码抽象为 UIPercentDrivenInteractiveTransition
的一个简单子类。代码类似于:
@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
这将暂停动画,直到您准备好完成或取消交互式过渡。
在我的应用程序中,我使用由平移手势触发的 UIPercentDrivenInteractiveTransition 关闭 viewController。我希望我的 viewController 在平移时被拖到右边。然而,当我慢慢平移时,我遇到了一个小故障:viewController 快速地从左向右跳了一下。 这是 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
}
}
}
这是动画师的代码:
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)
}
})
}
}
我的问题:如何防止此故障发生?
我测试了你的最小工作示例,同样的问题再次出现。我无法使用 UIView.animate
API 修复它,但如果您使用 UIViewPropertyAnimator
则不会出现此问题 - 唯一的缺点是 UIViewPropertyAnimator
只能从 iOS10+.
iOS 10+ 解决方案
首先重构 HideAnimator
以实现 interruptibleAnimator(using:)
到 return 执行过渡动画器的 UIViewPropertyAnimator
对象(请注意,根据文档我们应该 return 用于持续过渡的相同动画对象):
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
}
}
让它工作的最后一件事,在 didPan(with:)
中删除以下行:
completionSpeed = 0.3
这将使用默认速度(即 1.0
,或者您可以明确设置)。使用interruptibleAnimator(using:)
时,根据动画师的fractionComplete
自动计算完成速度。
所以问题实际上是当您启动交互式过渡时,动画会尝试 运行 完整。如果在手势更改状态下放置一个断点,您可以看到整个动画 运行,当您恢复时,它会重新开始跟踪您的手指。我尝试了一些技巧来将交互式过渡的进度设置为 0,但似乎没有任何效果。
解决方案包括在过渡期间将过渡上下文的容器视图的图层速度设置为 0,并在过渡准备好完成时将其设置回 1。我将这段代码抽象为 UIPercentDrivenInteractiveTransition
的一个简单子类。代码类似于:
@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
这将暂停动画,直到您准备好完成或取消交互式过渡。