Skip to content

Commit

Permalink
💫 Update: Exp - AdaptiveModal
Browse files Browse the repository at this point in the history 
Summary: Update experiment/test - `swift-programmatic-modal/AdaptiveModal`.
  • Loading branch information
@dominicstop
dominicstop committed Jun 7, 2023
1 parent 4b3ee53 commit 5e816df
Showing 1 changed file with 191 additions and 70 deletions.
261 changes: 191 additions & 70 deletions experiments/swift-programmatic-modal/Test/RoundedViewTestViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
};

Expand All @@ -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;

Expand Down Expand Up @@ -87,7 +262,7 @@ class RoundedViewTestViewController: UIViewController {
bottomRightRadius: 10
);

let shape = CAShapeLayer();
let shape = CornerRadiusLayer();
shape.path = path.cgPath;

return shape;
Expand All @@ -102,7 +277,7 @@ class RoundedViewTestViewController: UIViewController {
bottomRightRadius: 30
);

let shape = CAShapeLayer();
let shape = CornerRadiusLayer();
shape.path = path.cgPath;

return shape;
Expand All @@ -121,74 +296,20 @@ 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(
withRelativeStartTime: 1,
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();
};
};
Expand Down

0 comments on commit 5e816df

Please sign in to comment.