Appstore的今日屏幕过渡动画

时间:2019-03-29 04:48:00

标签: animation constraints swift4

尝试实现应用商店过渡动画,就像这样:

https://www.dropbox.com/s/s1u1kpkzj79abtr/trimmedAppstoreAnimation.mp4?dl=0

我已经在视频中实现了类似的内容:

https://www.dropbox.com/s/djohk46h9zkv1q3/BNXE2745.MP4?dl=0

问题在于图像,因为关闭视图后,图像不会根据图像帧进行动画处理,因此我们可以在最后注意到fliker。

用于显示和关闭的代码如下:

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {

let containerView = transitionContext.containerView
if transitionMode == .present {

        print("******   PRESENTING   *********")

        let productTestVC : ProductDetailVC? = transitionContext.viewController(forKey: .to) as? ProductDetailVC
        if let presentingView = transitionContext.view(forKey: UITransitionContextViewKey.to) {
            let initialFrame = startingFrame // cell frame
            let finalFrame = destinationFrame //presented image frame

            let scaleX = initialFrame.width / finalFrame.width
            let scaleY = initialFrame.height / finalFrame.height

            print("initialFrame : ",initialFrame)
            print("finalFrame : ",finalFrame)

            //KHP
            let initialImageFrame = CGRect(x: 17,
                                     y: initialFrame.minY,
                                     width: initialFrame.width,
                                     height: initialFrame.height)

            shadow.backgroundColor = UIColor.lightGray
            shadow.frame = containerView.frame
            shadow.alpha = 0
            containerView.addSubview(shadow)
            productTestVC?.wrapperViewHeightConstraint.constant = initialImageFrame.height
            productTestVC?.imgViewHeightConstraint.constant = initialImageFrame.height
            productTestVC?.imgViewWidthConstraint.constant = initialImageFrame.width
            productTestVC?.lblLoading.alpha = 0
            presentingView.frame = initialImageFrame

            presentingView.center = CGPoint(x: initialImageFrame.midX, y: initialImageFrame.midY)

            containerView.addSubview(presentingView)
            containerView.bringSubview(toFront: presentingView)

            productTestVC?.view.layoutIfNeeded()

            UIView.animate(withDuration: duration, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseIn, animations: {

                self.shadow.alpha = 0.95
                //presentingView.transform = CGAffineTransform.identity
                presentingView.layer.cornerRadius = 0
                presentingView.frame.origin = CGPoint(x: 0, y: 0)
                presentingView.frame.size = containerView.frame.size
                productTestVC?.imgViewHeightConstraint.constant = finalFrame.height
                productTestVC?.imgViewWidthConstraint.constant = finalFrame.width
                productTestVC?.wrapperViewHeightConstraint.constant = containerView.frame.size.height
                productTestVC?.lblLoading.alpha = 1
                productTestVC?.view.layoutIfNeeded()

            }) { (success) in
                transitionContext.completeTransition(success)
                NotificationCenter.default.post(name: NSNotification.Name(rawValue: "SHOW_ACTUAL_PRODUCT_LIST_VIEW"), object: nil)
            }
        }
    }
    else{

        print("******DISMISSING*********")
        let transitionModeKey = (transitionMode == .pop) ? UITransitionContextViewKey.to : UITransitionContextViewKey.from
        let transitionModeKey1 = (transitionMode == .pop) ? UITransitionContextViewControllerKey.to : UITransitionContextViewControllerKey.from

        let productTestVC : ProductDetailVC? = transitionContext.viewController(forKey: transitionModeKey1) as? ProductDetailVC
        if let returningView = transitionContext.view(forKey: transitionModeKey) {

            let initialFrame = destinationFrame
            let finalFrame = startingFrame

            print("initialFrame : ",initialFrame)
            print("finalFrame : ",finalFrame)

            let scaleX = finalFrame.width / initialFrame.width
            let scaleY = finalFrame.height / initialFrame.height

            print("scaleX : ",scaleX)
            print("scaleY : ",scaleY)

            shadow.backgroundColor = UIColor.lightGray
            shadow.frame = containerView.frame
            shadow.alpha = 0.95
            containerView.addSubview(shadow)
            containerView.addSubview(returningView)
            containerView.bringSubview(toFront: returningView)
            containerView.bringSubview(toFront: returningView)
            containerView.sendSubview(toBack: containerView)

            print("returningView : ",returningView.frame)
            print("containerView : ",containerView.frame)

            productTestVC?.lblLoading.alpha = 0

            UIView.animate(withDuration: duration, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseIn, animations: {

                self.shadow.alpha = 0
                returningView.transform = CGAffineTransform(scaleX: scaleX, y: scaleY)
                returningView.frame = finalFrame

                productTestVC?.imgViewHeightConstraint.constant = finalFrame.height + 80
                productTestVC?.imgViewWidthConstraint.constant = finalFrame.width + 34
                productTestVC?.wrapperViewHeightConstraint.constant = finalFrame.height + 80
                returningView.layoutIfNeeded()

                if self.transitionMode == .pop {
                    containerView.insertSubview(returningView, belowSubview: returningView)
                }

            }) { (success) in

                returningView.removeFromSuperview()
                transitionContext.completeTransition(success)
                //NotificationCenter.default.post(name: NSNotification.Name(rawValue: "tabBarShow"), object: nil)
            }
        }
    }
}

请以正确的方式进行指导,谢谢。

0 个答案:

没有答案