使用 UIDynamicBehaviors 使用真实物理进行阴影过渡
此示例显示如何使用类似于 iOS 的通知屏幕的真实世界物理进行交互式演示过渡。
https://i.stack.imgur.com/j0oBa.gif
首先，我们需要一个呈现视图控制器，阴影将出现在上面。这个视图控制器也将作为我们提供的视图控制器的 UIViewControllerTransitioningDelegate，并将为我们的过渡提供动画师。因此，我们将创建交互式动画师的实例（一个用于呈现，一个用于解雇）。我们还将创建一个阴影视图控制器的实例，在本例中，它只是一个带标签的视图控制器。因为我们想要相同的平移手势来驱动整个交互，所以我们将对呈现视图控制器和阴影的引用传递给我们的交互式动画师。
迅速
class ViewController: UIViewController
{
var presentingAnimator: ShadeAnimator!
var dismissingAnimator: ShadeAnimator!
let shadeVC = ShadeViewController()
lazy var label: UILabel =
{
let label = UILabel()
label.textColor = .blue
label.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(label)
label.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
return label
}()
override func viewDidLoad()
{
super.viewDidLoad()
label.text = "Swipe Down From Top"
presentingAnimator = ShadeAnimator(isAppearing: true, presentingVC: self, presentedVC: shadeVC, transitionDelegate: self)
dismissingAnimator = ShadeAnimator(isAppearing: false, presentingVC: self, presentedVC: shadeVC, transitionDelegate: self)
}
}
extension ViewController: UIViewControllerTransitioningDelegate
{
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning?
{
return EmptyAnimator()
}
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?
{
return EmptyAnimator()
}
func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
{
return presentingAnimator
}
func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
{
return dismissingAnimator
}
}
Objective-C
@interface ObjCViewController () <UIViewControllerTransitioningDelegate>
@property (nonatomic, strong) ShadeAnimator *presentingAnimator;
@property (nonatomic, strong) ShadeAnimator *dismissingAnimator;
@property (nonatomic, strong) UILabel *label;
@property (nonatomic, strong) ShadeViewController *shadeVC;
@end
@implementation ObjCViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.label.text = @"Swipe Down From Top";
self.shadeVC = [[ShadeViewController alloc] init];
self.presentingAnimator = [[ShadeAnimator alloc] initWithIsAppearing:YES presentingVC:self presentedVC:self.shadeVC transitionDelegate:self];
self.dismissingAnimator = [[ShadeAnimator alloc] initWithIsAppearing:NO presentingVC:self presentedVC:self.shadeVC transitionDelegate:self];
}
- (UILabel *)label
{
if (!_label)
{
_label = [[UILabel alloc] init];
_label.textColor = [UIColor blueColor];
_label.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:_label];
[_label.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = YES;
[_label.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = YES;
}
return _label;
}
#pragma mark - UIViewControllerTransitioningDelegate
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
return [[EmptyAnimator alloc] init];
}
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
return [[EmptyAnimator alloc] init];
}
- (id<UIViewControllerInteractiveTransitioning>)interactionControllerForPresentation:(id<UIViewControllerAnimatedTransitioning>)animator
{
return self.presentingAnimator;
}
- (id<UIViewControllerInteractiveTransitioning>)interactionControllerForDismissal:(id<UIViewControllerAnimatedTransitioning>)animator
{
return self.dismissingAnimator;
}
@end
我们真的只想通过交互式过渡来呈现我们的阴影但是由于 UIViewControllerTransitioningDelegate 如何工作如果我们不返回常规动画控制器，我们的交互式控制器将永远不会被使用。因此我们创造了一个符合 UIViewControllerAnimatedTransitioning 的 EmptyAnimator 类。
迅速
class EmptyAnimator: NSObject
{
}
extension EmptyAnimator: UIViewControllerAnimatedTransitioning
{
func animateTransition(using transitionContext: UIViewControllerContextTransitioning)
{
}
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval
{
return 0.0
}
}
Objective-C
@implementation EmptyAnimator
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
}
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext
{
return 0.0;
}
@end
最后我们需要实际创建 ShadeAnimator，它是 UIDynamicBehavior 的子类，符合 UIViewControllerInteractiveTransitioning。
迅速
class ShadeAnimator: UIDynamicBehavior
{
// Whether we are presenting or dismissing
let isAppearing: Bool
// The view controller that is not the shade
weak var presentingVC: UIViewController?
// The view controller that is the shade
weak var presentedVC: UIViewController?
// The delegate will vend the animator
weak var transitionDelegate: UIViewControllerTransitioningDelegate?
// Feedback generator for haptics on collisions
let impactFeedbackGenerator = UIImpactFeedbackGenerator(style: .light)
// The context given to the animator at the start of the transition
var transitionContext: UIViewControllerContextTransitioning?
// Time limit of the dynamic part of the animation
var finishTime: TimeInterval = 4.0
// The Pan Gesture that drives the transition. Not using EdgePan because triggers Notifications screen
lazy var pan: UIPanGestureRecognizer =
{
let pan = UIPanGestureRecognizer(target: self, action: #selector(self.handlePan(sender:)))
return pan
}()
// The dynamic animator that we add `ShadeAnimator` to
lazy var animator: UIDynamicAnimator! =
{
let animator = UIDynamicAnimator(referenceView: self.transitionContext!.containerView)
return animator
}()
// init with all of our dependencies
init(isAppearing: Bool, presentingVC: UIViewController, presentedVC: UIViewController, transitionDelegate: UIViewControllerTransitioningDelegate)
{
self.isAppearing = isAppearing
self.presentingVC = presentingVC
self.presentedVC = presentedVC
self.transitionDelegate = transitionDelegate
super.init()
self.impactFeedbackGenerator.prepare()
if isAppearing
{
self.presentingVC?.view.addGestureRecognizer(pan)
}
else
{
self.presentedVC?.view.addGestureRecognizer(pan)
}
}
// Setup and moves shade view controller to just above screen if appearing
func setupViewsForTransition(with transitionContext: UIViewControllerContextTransitioning)
{
// Get relevant views and view controllers from transitionContext
guard let fromVC = transitionContext.viewController(forKey: .from),
let toVC = transitionContext.viewController(forKey: .to),
let toView = toVC.view else { return }
let containerView = transitionContext.containerView
// Hold refrence to transitionContext to notify it of completion
self.transitionContext = transitionContext
if isAppearing
{
// Position toView just off-screen
let fromViewInitialFrame = transitionContext.initialFrame(for: fromVC)
var toViewInitialFrame = toView.frame
toViewInitialFrame.origin.y -= toViewInitialFrame.height
toViewInitialFrame.origin.x = fromViewInitialFrame.width * 0.5 - toViewInitialFrame.width * 0.5
toView.frame = toViewInitialFrame
containerView.addSubview(toView)
}
else
{
fromVC.view.addGestureRecognizer(pan)
}
}
// Handles the entire interaction from presenting/dismissing to completion
func handlePan(sender: UIPanGestureRecognizer)
{
let location = sender.location(in: transitionContext?.containerView)
let velocity = sender.velocity(in: transitionContext?.containerView)
let fromVC = transitionContext?.viewController(forKey: .from)
let toVC = transitionContext?.viewController(forKey: .to)
let touchStartHeight: CGFloat = 90.0
let touchLocationFromBottom: CGFloat = 20.0
switch sender.state
{
case .began:
let beginLocation = sender.location(in: sender.view)
if isAppearing
{
guard beginLocation.y <= touchStartHeight,
let presentedVC = self.presentedVC else { break }
presentedVC.modalPresentationStyle = .custom
presentedVC.transitioningDelegate = transitionDelegate
presentingVC?.present(presentedVC, animated: true)
}
else
{
guard beginLocation.y >= (sender.view?.frame.height ?? 0.0) - touchStartHeight else { break }
presentedVC?.dismiss(animated: true)
}
case .changed:
guard let view = isAppearing ? toVC?.view : fromVC?.view else { return }
UIView.animate(withDuration: 0.2)
{
view.frame.origin.y = location.y - view.bounds.height + touchLocationFromBottom
}
transitionContext?.updateInteractiveTransition(view.frame.maxY / view.frame.height
)
case .ended, .cancelled:
guard let view = isAppearing ? toVC?.view : fromVC?.view else { return }
let isCancelled = isAppearing ? (velocity.y < 0.5 || view.center.y < 0.0) : (velocity.y > 0.5 || view.center.y > 0.0)
addAttachmentBehavior(with: view, isCancelled: isCancelled)
addCollisionBehavior(with: view)
addItemBehavior(with: view)
animator.addBehavior(self)
animator.delegate = self
self.action =
{ [weak self] in
guard let strongSelf = self else { return }
if strongSelf.animator.elapsedTime > strongSelf.finishTime
{
strongSelf.animator.removeAllBehaviors()
}
else
{
strongSelf.transitionContext?.updateInteractiveTransition(view.frame.maxY / view.frame.height
)
}
}
default:
break
}
}
// Add collision behavior that causes bounce when finished
func addCollisionBehavior(with view: UIView)
{
let collisionBehavior = UICollisionBehavior(items: [view])
let insets = UIEdgeInsets(top: -view.bounds.height, left: 0.0, bottom: 0.0, right: 0.0)
collisionBehavior.setTranslatesReferenceBoundsIntoBoundary(with: insets)
collisionBehavior.collisionDelegate = self
self.addChildBehavior(collisionBehavior)
}
// Add attachment behavior that pulls shade either to top or bottom
func addAttachmentBehavior(with view: UIView, isCancelled: Bool)
{
let anchor: CGPoint
switch (isAppearing, isCancelled)
{
case (true, true), (false, false):
anchor = CGPoint(x: view.center.x, y: -view.frame.height)
case (true, false), (false, true):
anchor = CGPoint(x: view.center.x, y: view.frame.height)
}
let attachmentBehavior = UIAttachmentBehavior(item: view, attachedToAnchor: anchor)
attachmentBehavior.damping = 0.1
attachmentBehavior.frequency = 3.0
attachmentBehavior.length = 0.5 * view.frame.height
self.addChildBehavior(attachmentBehavior)
}
// Makes view more bouncy
func addItemBehavior(with view: UIView)
{
let itemBehavior = UIDynamicItemBehavior(items: [view])
itemBehavior.allowsRotation = false
itemBehavior.elasticity = 0.6
self.addChildBehavior(itemBehavior)
}
}
extension ShadeAnimator: UIDynamicAnimatorDelegate
{
// Determines transition has ended
func dynamicAnimatorDidPause(_ animator: UIDynamicAnimator)
{
guard let transitionContext = self.transitionContext else { return }
let fromVC = transitionContext.viewController(forKey: .from)
let toVC = transitionContext.viewController(forKey: .to)
guard let view = isAppearing ? toVC?.view : fromVC?.view else { return }
switch (view.center.y < 0.0, isAppearing)
{
case (true, true), (true, false):
view.removeFromSuperview()
transitionContext.finishInteractiveTransition()
transitionContext.completeTransition(!isAppearing)
case (false, true):
toVC?.view.frame = transitionContext.finalFrame(for: toVC!)
transitionContext.finishInteractiveTransition()
transitionContext.completeTransition(true)
case (false, false):
fromVC?.view.frame = transitionContext.initialFrame(for: fromVC!)
transitionContext.cancelInteractiveTransition()
transitionContext.completeTransition(false)
}
childBehaviors.forEach { removeChildBehavior($0) }
animator.removeAllBehaviors()
self.animator = nil
self.transitionContext = nil
}
}
extension ShadeAnimator: UICollisionBehaviorDelegate
{
// Triggers haptics
func collisionBehavior(_ behavior: UICollisionBehavior, beganContactFor item: UIDynamicItem, withBoundaryIdentifier identifier: NSCopying?, at p: CGPoint)
{
guard p.y > 0.0 else { return }
impactFeedbackGenerator.impactOccurred()
}
}
extension ShadeAnimator: UIViewControllerInteractiveTransitioning
{
// Starts transition
func startInteractiveTransition(_ transitionContext: UIViewControllerContextTransitioning)
{
setupViewsForTransition(with: transitionContext)
}
}
Objective-C
@interface ShadeAnimator() <UIDynamicAnimatorDelegate, UICollisionBehaviorDelegate>
@property (nonatomic, assign) BOOL isAppearing;
@property (nonatomic, weak) UIViewController *presentingVC;
@property (nonatomic, weak) UIViewController *presentedVC;
@property (nonatomic, weak) NSObject<UIViewControllerTransitioningDelegate> *transitionDelegate;
@property (nonatomic, strong) UIImpactFeedbackGenerator *impactFeedbackGenerator;
@property (nonatomic, strong) id<UIViewControllerContextTransitioning> transitionContext;
@property (nonatomic, assign) NSTimeInterval finishTime;
@property (nonatomic, strong) UIPanGestureRecognizer *pan;
@property (nonatomic, strong) UIDynamicAnimator *animator;
@end
@implementation ShadeAnimator
- (instancetype)initWithIsAppearing:(BOOL)isAppearing presentingVC:(UIViewController *)presentingVC presentedVC:(UIViewController *)presentedVC transitionDelegate:(id<UIViewControllerTransitioningDelegate>)transitionDelegate
{
self = [super init];
if (self)
{
_isAppearing = isAppearing;
_presentingVC = presentingVC;
_presentedVC = presentedVC;
_transitionDelegate = transitionDelegate;
_impactFeedbackGenerator = [[UIImpactFeedbackGenerator alloc]initWithStyle:UIImpactFeedbackStyleLight];
[_impactFeedbackGenerator prepare];
if (_isAppearing)
{
[_presentingVC.view addGestureRecognizer:self.pan];
}
else
{
[_presentedVC.view addGestureRecognizer:self.pan];
}
}
return self;
}
#pragma mark - Lazy Init
- (UIPanGestureRecognizer *)pan
{
if (!_pan)
{
_pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePan:)];
}
return _pan;
}
- (UIDynamicAnimator *)animator
{
if (!_animator)
{
_animator = [[UIDynamicAnimator alloc]initWithReferenceView:self.transitionContext.containerView];
}
return _animator;
}
#pragma mark - Setup
- (void)setupViewForTransitionWithContext:(id<UIViewControllerContextTransitioning>)transitionContext
{
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *toView = toVC.view;
UIView *containerView = transitionContext.containerView;
self.transitionContext = transitionContext;
if (self.isAppearing)
{
CGRect fromViewInitialFrame = [transitionContext initialFrameForViewController:fromVC];
CGRect toViewInitialFrame = toView.frame;
toViewInitialFrame.origin.y -= CGRectGetHeight(toViewInitialFrame);
toViewInitialFrame.origin.x = CGRectGetWidth(fromViewInitialFrame) * 0.5 - CGRectGetWidth(toViewInitialFrame) * 0.5;
[containerView addSubview:toView];
}
else
{
[fromVC.view addGestureRecognizer:self.pan];
}
}
#pragma mark - Gesture
- (void)handlePan:(UIPanGestureRecognizer *)sender
{
CGPoint location = [sender locationInView:self.transitionContext.containerView];
CGPoint velocity = [sender velocityInView:self.transitionContext.containerView];
UIViewController *fromVC = [self.transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
CGFloat touchStartHeight = 90.0;
CGFloat touchLocationFromBottom = 20.0;
if (sender.state == UIGestureRecognizerStateBegan)
{
CGPoint beginLocation = [sender locationInView:sender.view];
if (self.isAppearing)
{
if (beginLocation.y <= touchStartHeight)
{
self.presentedVC.modalPresentationStyle = UIModalPresentationCustom;
self.presentedVC.transitioningDelegate = self.transitionDelegate;
[self.presentingVC presentViewController:self.presentedVC animated:YES completion:nil];
}
}
else
{
if (beginLocation.y >= [sender locationInView:sender.view].y - touchStartHeight)
{
[self.presentedVC dismissViewControllerAnimated:true completion:nil];
}
}
}
else if (sender.state == UIGestureRecognizerStateChanged)
{
UIView *view = self.isAppearing ? toVC.view : fromVC.view;
[UIView animateWithDuration:0.2 animations:^{
CGRect frame = view.frame;
frame.origin.y = location.y - CGRectGetHeight(view.bounds) + touchLocationFromBottom;
view.frame = frame;
}];
[self.transitionContext updateInteractiveTransition:CGRectGetMaxY(view.frame) / CGRectGetHeight(view.frame)];
}
else if (sender.state == UIGestureRecognizerStateEnded || sender.state == UIGestureRecognizerStateCancelled)
{
UIView *view = self.isAppearing ? toVC.view : fromVC.view;
BOOL isCancelled = self.isAppearing ? (velocity.y < 0.5 || view.center.y < 0.0) : (velocity.y > 0.5 || view.center.y > 0.0);
[self addAttachmentBehaviorWithView:view isCancelled:isCancelled];
[self addCollisionBehaviorWithView:view];
[self addItemBehaviorWithView:view];
[self.animator addBehavior:self];
self.animator.delegate = self;
__weak ShadeAnimator *weakSelf = self;
self.action =
^{
if (weakSelf.animator.elapsedTime > weakSelf.finishTime)
{
[weakSelf.animator removeAllBehaviors];
}
else
{
[weakSelf.transitionContext updateInteractiveTransition:CGRectGetMaxY(view.frame) / CGRectGetHeight(view.frame)];
}
};
}
}
#pragma mark - UIViewControllerInteractiveTransitioning
- (void)startInteractiveTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
[self setupViewForTransitionWithContext:transitionContext];
}
#pragma mark - Behaviors
- (void)addCollisionBehaviorWithView:(UIView *)view
{
UICollisionBehavior *collisionBehavior = [[UICollisionBehavior alloc]initWithItems:@[view]];
UIEdgeInsets insets = UIEdgeInsetsMake(-CGRectGetHeight(view.bounds), 0.0, 0.0, 0.0);
[collisionBehavior setTranslatesReferenceBoundsIntoBoundaryWithInsets:insets];
collisionBehavior.collisionDelegate = self;
[self addChildBehavior:collisionBehavior];
}
- (void)addItemBehaviorWithView:(UIView *)view
{
UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc]initWithItems:@[view]];
itemBehavior.allowsRotation = NO;
itemBehavior.elasticity = 0.6;
[self addChildBehavior:itemBehavior];
}
- (void)addAttachmentBehaviorWithView:(UIView *)view isCancelled:(BOOL)isCancelled
{
CGPoint anchor;
if ((self.isAppearing && isCancelled) || (!self.isAppearing && isCancelled))
{
anchor = CGPointMake(view.center.x, -CGRectGetHeight(view.frame));
}
else
{
anchor = CGPointMake(view.center.x, -CGRectGetHeight(view.frame));
}
UIAttachmentBehavior *attachmentBehavior = [[UIAttachmentBehavior alloc]initWithItem:view attachedToAnchor:anchor];
attachmentBehavior.damping = 0.1;
attachmentBehavior.frequency = 3.0;
attachmentBehavior.length = 0.5 * CGRectGetHeight(view.frame);
[self addChildBehavior:attachmentBehavior];
}
#pragma mark - UICollisionBehaviorDelegate
- (void)collisionBehavior:(UICollisionBehavior *)behavior beganContactForItem:(id<UIDynamicItem>)item withBoundaryIdentifier:(id<NSCopying>)identifier atPoint:(CGPoint)p
{
if (p.y > 0.0)
{
[self.impactFeedbackGenerator impactOccurred];
}
}
#pragma mark - UIDynamicAnimatorDelegate
- (void)dynamicAnimatorDidPause:(UIDynamicAnimator *)animator
{
UIViewController *fromVC = [self.transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [self.transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *view = self.isAppearing ? toVC.view : fromVC.view;
if (view.center.y < 0.0 && (self.isAppearing || !self.isAppearing))
{
[view removeFromSuperview];
[self.transitionContext finishInteractiveTransition];
[self.transitionContext completeTransition:!self.isAppearing];
}
else if (view.center.y >= 0.0 && self.isAppearing)
{
toVC.view.frame = [self.transitionContext finalFrameForViewController:toVC];
[self.transitionContext finishInteractiveTransition];
[self.transitionContext completeTransition:YES];
}
else
{
fromVC.view.frame = [self.transitionContext initialFrameForViewController:fromVC];
[self.transitionContext cancelInteractiveTransition];
[self.transitionContext completeTransition:NO];
}
for (UIDynamicBehavior *behavior in self.childBehaviors)
{
[self removeChildBehavior:behavior];
}
[animator removeAllBehaviors];
self.animator = nil;
self.transitionContext = nil;
}
@end
当平移手势开始时，动画师触发转换的开始。只需在手势发生变化时移动视图。但是当手势结束时，UIDynamicBehaviors 确定是否应该完成或取消过渡。为此，它使用附件和碰撞行为。有关更多信息，请参阅 2013 WWDC 会议“使用 UIKit Dynamics 的高级技术” 。