Add shadow and overlay

Author: andreamazz

Demo/GearAnimation.xcodeproj/project.pbxproj

@@ -7,6 +7,7 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
+		654E94251ABAC1CE007CDCD8 /* ShadowView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 654E94241ABAC1CE007CDCD8 /* ShadowView.swift */; };
 		65802E821AB9677200E40510 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65802E811AB9677200E40510 /* AppDelegate.swift */; };
 		65802E841AB9677200E40510 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65802E831AB9677200E40510 /* ViewController.swift */; };
 		65802E871AB9677200E40510 /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 65802E851AB9677200E40510 /* Main.storyboard */; };
@@ -28,6 +29,7 @@
 /* End PBXContainerItemProxy section */
 
 /* Begin PBXFileReference section */
+		654E94241ABAC1CE007CDCD8 /* ShadowView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ShadowView.swift; sourceTree = "<group>"; };
 		65802E7C1AB9677200E40510 /* GearAnimation.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = GearAnimation.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		65802E801AB9677200E40510 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		65802E811AB9677200E40510 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
@@ -122,6 +124,7 @@
 			children = (
 				65802EA21AB97EFE00E40510 /* MainGear.swift */,
 				65802EA41AB988F800E40510 /* BigGear.swift */,
+				654E94241ABAC1CE007CDCD8 /* ShadowView.swift */,
 			);
 			path = Views;
 			sourceTree = "<group>";
@@ -230,6 +233,7 @@
 				65802EA51AB988F800E40510 /* BigGear.swift in Sources */,
 				65802E841AB9677200E40510 /* ViewController.swift in Sources */,
 				65802E821AB9677200E40510 /* AppDelegate.swift in Sources */,
+				654E94251ABAC1CE007CDCD8 /* ShadowView.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -421,6 +425,7 @@
 				65802E9D1AB9677300E40510 /* Release */,
 			);
 			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
 		};
 		65802E9E1AB9677300E40510 /* Build configuration list for PBXNativeTarget "GearAnimationTests" */ = {
 			isa = XCConfigurationList;
@@ -429,6 +434,7 @@
 				65802EA01AB9677300E40510 /* Release */,
 			);
 			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
 		};
 /* End XCConfigurationList section */
 	};

Demo/GearAnimation/ViewController.swift

@@ -11,7 +11,9 @@ import UIKit
 class ViewController: UITableViewController {
 
     var refreshContainerView: UIView!
+    var overlayView: UIView!
     var isRefreshControlAnimating = false
+    var shadowView: ShadowView!
     var centerGear: MainGear!
     var topGear: BigGear! // cue Jessica from the Allman brothers
     var rightGear: BigGear!
@@ -39,6 +41,12 @@ class ViewController: UITableViewController {
         self.refreshContainerView = UIView(frame: self.refreshControl!.bounds)
         self.refreshContainerView.backgroundColor = UIColor(red:0.13, green:0.29, blue:0.55, alpha:1)
 
+        self.overlayView = UIView(frame: self.refreshControl!.bounds)
+        self.overlayView.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.3)
+
+        self.shadowView = ShadowView(frame: self.refreshControl!.bounds)
+        self.shadowView.shadowPercentage = 0.2
+
         self.centerGear = MainGear(frame: CGRectMake(0, 0, 48, 48))
         self.centerGear.backgroundColor = UIColor.clearColor()
         self.centerGear.tintColor = UIColor(red:0.36, green:0.52, blue:0.92, alpha:1)
@@ -69,6 +77,8 @@ class ViewController: UITableViewController {
         self.refreshContainerView.addSubview(self.bottomGear)
         self.refreshContainerView.addSubview(self.leftGear)
         self.refreshContainerView.addSubview(self.centerGear)
+        self.refreshContainerView.addSubview(self.shadowView)
+        self.refreshContainerView.addSubview(self.overlayView)
 
         self.refreshContainerView.clipsToBounds = true
         self.refreshControl!.tintColor = UIColor.clearColor()
@@ -92,6 +102,8 @@ class ViewController: UITableViewController {
         var pullDistance = max(0.0, -self.refreshControl!.frame.origin.y);
         var pullRatio = min(max(pullDistance, 0.0), 140.0) / 140.0;
 
+        self.overlayView.alpha = 1 - pullRatio
+
         self.centerGear.center = CGPoint(x: CGRectGetMidX(self.refreshContainerView.frame), y: pullDistance / 2)
         self.topGear.center = CGPoint(x: CGRectGetMidX(self.refreshContainerView.frame) + 48, y: pullDistance / 2 - 49)
         self.rightGear.center = CGPoint(x: CGRectGetMidX(self.refreshContainerView.frame) + 120, y: pullDistance / 2)
@@ -100,7 +112,7 @@ class ViewController: UITableViewController {
 
         refreshBounds.size.height = pullDistance;
 
-        self.refreshContainerView.frame = refreshBounds;
+        [self.refreshContainerView, self.overlayView].map({$0.frame = refreshBounds});
 
         // Don't rotate the gears if the refresh animation is playing
         if (!self.refreshControl!.refreshing && !self.isRefreshControlAnimating) {

Demo/GearAnimation/Views/ShadowView.swift

@@ -0,0 +1,22 @@
+import UIKit
+
+class ShadowView: UIView {
+    var gradient: CAGradientLayer!
+    var shadowPercentage = 0.0
+
+    override func layoutSubviews() {
+        self.clipsToBounds = true
+        if (self.gradient == nil) {
+            self.gradient = CAGradientLayer()
+            var frame = self.frame
+            let offset = frame.size.height * CGFloat(self.shadowPercentage)
+            frame.size.height = offset
+            self.gradient.frame = frame
+            self.gradient.colors = [
+                UIColor.blackColor().colorWithAlphaComponent(0.6).CGColor,
+                UIColor.blackColor().colorWithAlphaComponent(0.15).CGColor,
+                UIColor.clearColor().CGColor]
+            self.layer.insertSublayer(self.gradient, atIndex:0)
+        }
+    }
+}