Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Cloning photos app fluid interface

Cloning photos app fluid interface

In WWDC 2018, apple human interface design team did a presentation about designing fluid interfaces.
This slide summarizes the important points in the session, and explains how to clone a fluid interface of iOS photos app.

WWDC2018でAppleのヒューマンインタフェースデザインチームが、fluidインタフェースのデザインについてプレゼンを行いました。
このスライドではそのセッションで述べられた重要なポイントをまとめ、iOSの写真アプリのfluidインタフェースをクローンした方法について説明します。

Masamichi Ueta

November 15, 2018
Tweet

More Decks by Masamichi Ueta

Other Decks in Programming

Transcript

  1. -JOFBS*OUFSGBDFTͱ1BSBMMFM*OUFSGBDFT 5IPVHIU ߟ͑Δ %FDJTJPO ܾΊΔ (FTUVSF δΣενϟʔ 3FMFBTF ऴΘΔ 5IPVHIU

    ߟ͑Δ %FDJTJPO ܾΊΔ (FTUVSF δΣενϟʔ 3FMFBTF ऴΘΔ -JOFBS*OUFSGBDFT໭ͬͨΓதஅͨ͠ΓͰ͖ͳ͍ɺҙࢥܾఆͷޙʹδΣενϟʔ͕ى͜Δ 1BSBMMFM*OUFSGBDFT໭ͬͨΓதஅͨ͠ΓͰ͖Δɺҙࢥܾఆͱฒߦͯ͠δΣενϟʔ͕ى͜Δ
  2. ζʔϜΞχϝʔγϣϯ transitionImageView = UIImageView(image: referenceImage) transitionImageView.contentMode = .scaleAspectFill transitionImageView.clipsToBounds =

    true transitionImageView.frame = fromReferenceImageViewFrame containerView.addSubview(transitionImageView) … UIView.animate( withDuration: transitionDuration(using: transitionContext), delay: 0, options: [], animations: { … self.transitionImageView?.frame = finalSize … }, completion: { completed in … self.transitionImageView?.removeFromSuperview() … } )
  3. ԼʹҾͬுͬͯ໭Δ @objc func didPanWith(gestureRecognizer: UIPanGestureRecognizer) { switch gestureRecognizer.state { case

    .began: transitionController.isInteractive = true let _ = navigationController?.popViewController(animated: true) case .ended: if transitionController.isInteractive { transitionController.isInteractive = false transitionController.didPanWith(gestureRecognizer: gestureRecognizer) } default: if transitionController.isInteractive { transitionController.didPanWith(gestureRecognizer: gestureRecognizer) } } } 7JFX$POUSPMMFS
  4. func didPanWith(gestureRecognizer: UIPanGestureRecognizer) { … let verticalDelta = translatedPoint.y <

    0 ? 0 : translatedPoint.y let backgroundAlpha = backgroundAlphaFor(view: fromVC.view, withPanningVerticalDelta: verticalDelta) let scale = scaleFor(view: fromVC.view, withPanningVerticalDelta: verticalDelta) // update background alpha, scale, center … transitionContext.updateInteractiveTransition(1 - scale) if gestureRecognizer.state == .ended { let velocity = gestureRecognizer.velocity(in: fromVC.view) if velocity.y < 0 || center.y < anchorPoint.y { // cancel interactive transition … return } // start zoom out animation … } } ;PPN%JTNJTTBM*OUFSBDUJPO$POUSPMMFS