From 5e816df570fad5c57773b09fd1e52bf08f4ff683 Mon Sep 17 00:00:00 2001 From: Dominic Go <18517029+dominicstop@users.noreply.github.com> Date: Wed, 7 Jun 2023 08:46:35 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB=20Update:=20Exp=20-=20`AdaptiveMod?= =?UTF-8?q?al`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: Update experiment/test - `swift-programmatic-modal/AdaptiveModal`. --- .../Test/RoundedViewTestViewController.swift | 261 +++++++++++++----- 1 file changed, 191 insertions(+), 70 deletions(-) diff --git a/experiments/swift-programmatic-modal/Test/RoundedViewTestViewController.swift b/experiments/swift-programmatic-modal/Test/RoundedViewTestViewController.swift index d6990802..5c5f3108 100644 --- a/experiments/swift-programmatic-modal/Test/RoundedViewTestViewController.swift +++ b/experiments/swift-programmatic-modal/Test/RoundedViewTestViewController.swift @@ -24,20 +24,58 @@ class RoundedView: UIView { override func layoutSubviews() { super.layoutSubviews(); }; +}; + +class CornerRadiusLayer: CAShapeLayer { + + override var bounds: CGRect { + didSet { + if !CGRectIsEmpty(bounds) { + self.path = UIBezierPath( + roundedRect: CGRectInset(bounds, 10, 10), + cornerRadius: 5 + ).cgPath; + }; + } + }; - func makeShapeMask(bounds: CGRect) -> CAShapeLayer { - let path = UIBezierPath( - shouldRoundRect: bounds, - topLeftRadius: 30, - topRightRadius: 30, - bottomLeftRadius: 30, - bottomRightRadius: 30 + override func action(forKey event: String) -> CAAction? { + print( + "animation forKey:", + self.animation(forKey: event) ); - let shape = CAShapeLayer(); - shape.path = path.cgPath; + print( + "self.animationKeys(): ", + self.animationKeys() + ); + + print("event: \(event)") - return shape; + print(self); + + if event == "path" { + if let action = super.action(forKey: "path") as? CABasicAnimation { + let animation = CABasicAnimation(keyPath: event); + animation.fromValue = path; + + // Copy values from existing action + animation.autoreverses = action.autoreverses; + animation.beginTime = action.beginTime; + animation.delegate = action.delegate; + animation.duration = action.duration; + animation.fillMode = action.fillMode; + animation.repeatCount = action.repeatCount; + animation.repeatDuration = action.repeatDuration; + animation.speed = action.speed; + animation.timingFunction = action.timingFunction; + animation.timeOffset = action.timeOffset; + + return animation; + }; + }; + + return super.action(forKey: event); }; }; @@ -55,6 +93,143 @@ class RoundedViewTestViewController: UIViewController { return view; }(); +// func _viewDidLoad() { +// self.view.backgroundColor = .systemBackground; +// +// let roundedView = self.roundedView; +// roundedView.center = self.view.center; +// roundedView.frame = roundedView.frame.offsetBy(dx: 0, dy: -200) +// +// self.view.addSubview(roundedView); +// +// let prevFrame = roundedView.frame; +// let prevBounds = roundedView.bounds; +// +// var nextFrame = roundedView.frame.offsetBy(dx: 0, dy: 300); +// nextFrame.size = CGSize( +// width: nextFrame.width + 100, +// height: nextFrame.height + 100 +// ); +// +// let nextBounds = CGRect( +// origin: .zero, +// size: nextFrame.size +// ); +// +// let prevMask: CAShapeLayer = { +// let path = UIBezierPath( +// shouldRoundRect: prevBounds, +// topLeftRadius: 10, +// topRightRadius: 10, +// bottomLeftRadius: 10, +// bottomRightRadius: 10 +// ); +// +// let shape = CAShapeLayer(); +// shape.path = path.cgPath; +// +// return shape; +// }(); +// +// let nextMask: CAShapeLayer = { +// let path = UIBezierPath( +// shouldRoundRect: nextBounds, +// topLeftRadius: 30, +// topRightRadius: 30, +// bottomLeftRadius: 30, +// bottomRightRadius: 30 +// ); +// +// let shape = CAShapeLayer(); +// shape.path = path.cgPath; +// +// return shape; +// }(); +// +// let viewAnimator = UIViewPropertyAnimator( +// duration: 4, +// curve: .easeInOut +// ); +// +// roundedView.translatesAutoresizingMaskIntoConstraints = false; +// +// viewAnimator.addAnimations { +// UIView.addKeyframe( +// withRelativeStartTime: 0, +// relativeDuration: 0 +// ) { +// roundedView.frame = prevFrame; +// //roundedView.layer.frame = prevFrame; +// //roundedView.layer.mask = prevMask; +// }; +// +// UIView.addKeyframe( +// withRelativeStartTime: 1, +// relativeDuration: 0 +// ) { +// roundedView.frame = nextFrame; +// //roundedView.layer.frame = nextFrame; +// //roundedView.layer.mask = nextMask; +// }; +// }; +// +// +// // define your new path to animate the mask layer to +// //let path = UIBezierPath(roundedRect: CGRectInset(view.bounds, 100, 100), cornerRadius: 20.0) +// //path.appendPath(UIBezierPath(rect: view.bounds)) +// +// // create new animation +// let pathAnimator = CABasicAnimation(keyPath: "path"); +// +// let shapeMask = CAShapeLayer(); +// +// let prevPath = UIBezierPath( +// shouldRoundRect: prevBounds, +// topLeftRadius: 10, +// topRightRadius: 10, +// bottomLeftRadius: 10, +// bottomRightRadius: 10 +// ); +// +// // from value is the current mask path +// pathAnimator.fromValue = prevPath.cgPath; +// +// let nextPath = UIBezierPath( +// shouldRoundRect: nextBounds, +// topLeftRadius: 25, +// topRightRadius: 25, +// bottomLeftRadius: 25, +// bottomRightRadius: 25 +// ); +// +// // to value is the new path +// pathAnimator.toValue = nextPath.cgPath; +// +// // duration of your animation +// pathAnimator.duration = viewAnimator.duration; +// +// // custom timing function to make it look smooth +// pathAnimator.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut); +// +// pathAnimator.isRemovedOnCompletion = false; +// pathAnimator.fillMode = .both; +// +// // add animation +// shapeMask.add(pathAnimator, forKey: nil); +// +// // update the path property on the mask layer, using a CATransaction to prevent an implicit animation +// CATransaction.begin(); +// +// roundedView.layer.mask = shapeMask; +// CATransaction.commit(); +// +// +// +// +// +// viewAnimator.startAnimation(); +// }; + override func viewDidLoad() { self.view.backgroundColor = .systemBackground; @@ -87,7 +262,7 @@ class RoundedViewTestViewController: UIViewController { bottomRightRadius: 10 ); - let shape = CAShapeLayer(); + let shape = CornerRadiusLayer(); shape.path = path.cgPath; return shape; @@ -102,7 +277,7 @@ class RoundedViewTestViewController: UIViewController { bottomRightRadius: 30 ); - let shape = CAShapeLayer(); + let shape = CornerRadiusLayer(); shape.path = path.cgPath; return shape; @@ -121,8 +296,8 @@ class RoundedViewTestViewController: UIViewController { relativeDuration: 0 ) { roundedView.frame = prevFrame; - //roundedView.layer.frame = prevFrame; - //roundedView.layer.mask = prevMask; + roundedView.layer.frame = prevFrame; + roundedView.layer.mask = prevMask; }; UIView.addKeyframe( @@ -130,65 +305,11 @@ class RoundedViewTestViewController: UIViewController { relativeDuration: 0 ) { roundedView.frame = nextFrame; - //roundedView.layer.frame = nextFrame; - //roundedView.layer.mask = nextMask; + roundedView.layer.frame = nextFrame; + roundedView.layer.mask = nextMask; }; }; - - // define your new path to animate the mask layer to - //let path = UIBezierPath(roundedRect: CGRectInset(view.bounds, 100, 100), cornerRadius: 20.0) - //path.appendPath(UIBezierPath(rect: view.bounds)) - - // create new animation - let pathAnimator = CABasicAnimation(keyPath: "path"); - - let shapeMask = CAShapeLayer(); - - let prevPath = UIBezierPath( - shouldRoundRect: prevBounds, - topLeftRadius: 10, - topRightRadius: 10, - bottomLeftRadius: 10, - bottomRightRadius: 10 - ); - - // from value is the current mask path - pathAnimator.fromValue = prevPath.cgPath; - - let nextPath = UIBezierPath( - shouldRoundRect: nextBounds, - topLeftRadius: 25, - topRightRadius: 25, - bottomLeftRadius: 25, - bottomRightRadius: 25 - ); - - // to value is the new path - pathAnimator.toValue = nextPath.cgPath; - - // duration of your animation - pathAnimator.duration = viewAnimator.duration; - - // custom timing function to make it look smooth - pathAnimator.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut); - - pathAnimator.isRemovedOnCompletion = false; - pathAnimator.fillMode = .both; - - // add animation - shapeMask.add(pathAnimator, forKey: nil); - - // update the path property on the mask layer, using a CATransaction to prevent an implicit animation - CATransaction.begin(); - - roundedView.layer.mask = shapeMask; - CATransaction.commit(); - - - - - viewAnimator.startAnimation(); }; };