Fix imageView animation for bounds change

HeroTransitions · Jan 5, 2017 · b6359f7 · b6359f7
1 parent 158e0e9
commit b6359f7
Show file tree

Hide file tree

Showing 15 changed files with 110 additions and 19 deletions.
diff --git a/Examples/HeroExamples.xcodeproj/project.pbxproj b/Examples/HeroExamples.xcodeproj/project.pbxproj
@@ -36,6 +36,7 @@
 		A306D3E71E1C7A6E00B6C23A /* DispatchQueue+Hero.swift in Sources */ = {isa = PBXBuildFile; fileRef = A306D3C41E1C7A3C00B6C23A /* DispatchQueue+Hero.swift */; };
 		A306D3F61E1D7A1A00B6C23A /* LiveInjection2ViewControllers.swift in Sources */ = {isa = PBXBuildFile; fileRef = A306D3F51E1D7A1A00B6C23A /* LiveInjection2ViewControllers.swift */; };
 		A306D3FB1E1D7A7200B6C23A /* LiveInjection.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = A306D3F91E1D7A7200B6C23A /* LiveInjection.storyboard */; };
+		A313499B1E1E2AED00EB5139 /* ImageLibrary.swift in Sources */ = {isa = PBXBuildFile; fileRef = A313499A1E1E2AED00EB5139 /* ImageLibrary.swift */; };
 		A33E60A51DE761C90065CBD8 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = A33E60A41DE761C90065CBD8 /* AppDelegate.swift */; };
 		A33E60AA1DE761C90065CBD8 /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = A33E60A81DE761C90065CBD8 /* Main.storyboard */; };
 		A33E60AC1DE761C90065CBD8 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = A33E60AB1DE761C90065CBD8 /* Assets.xcassets */; };
@@ -115,6 +116,7 @@
 		A306D3D11E1C7A3C00B6C23A /* ViewToViewPreprocessor.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; name = ViewToViewPreprocessor.swift; path = ../../Hero/ViewToViewPreprocessor.swift; sourceTree = "<group>"; };
 		A306D3F51E1D7A1A00B6C23A /* LiveInjection2ViewControllers.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; name = LiveInjection2ViewControllers.swift; path = LiveInjection/LiveInjection2ViewControllers.swift; sourceTree = "<group>"; };
 		A306D3FA1E1D7A7200B6C23A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = HeroExamples/Base.lproj/LiveInjection.storyboard; sourceTree = SOURCE_ROOT; };
+		A313499A1E1E2AED00EB5139 /* ImageLibrary.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; name = ImageLibrary.swift; path = ImageGallery/ImageLibrary.swift; sourceTree = "<group>"; };
 		A33E60A11DE761C90065CBD8 /* HeroExamples.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = HeroExamples.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		A33E60A41DE761C90065CBD8 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
 		A33E60A91DE761C90065CBD8 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
@@ -331,6 +333,7 @@
 				A35949221E1A36D00095F407 /* ImageViewer.storyboard */,
 				A3499D9E1DF2024E0049B541 /* ImageGalleryCollectionViewController.swift */,
 				A304BF831DF2717900A03345 /* ImageViewController.swift */,
+				A313499A1E1E2AED00EB5139 /* ImageLibrary.swift */,
 				A304BF891DF647FC00A03345 /* ImageCells.swift */,
 			);
 			name = ImageGallery;
@@ -587,6 +590,7 @@
 				A33E60C11DE7621C0065CBD8 /* CityViewController.swift in Sources */,
 				B185A4E81DFA6FE200C3B85D /* GridCollectionViewController.swift in Sources */,
 				A304BF8A1DF647FC00A03345 /* ImageCells.swift in Sources */,
+				A313499B1E1E2AED00EB5139 /* ImageLibrary.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

diff --git a/Examples/HeroExamples/Assets.xcassets/Foods/Unsplash10.imageset/Contents.json b/Examples/HeroExamples/Assets.xcassets/Foods/Unsplash10.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "Unsplash10.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
diff --git a/Examples/HeroExamples/Assets.xcassets/Foods/Unsplash10.imageset/Unsplash10.jpg b/Examples/HeroExamples/Assets.xcassets/Foods/Unsplash10.imageset/Unsplash10.jpg
diff --git a/Examples/HeroExamples/Assets.xcassets/Foods/Unsplash10_thumb.imageset/Contents.json b/Examples/HeroExamples/Assets.xcassets/Foods/Unsplash10_thumb.imageset/Contents.json
@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "Unsplash10_thumb.jpg",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
diff --git a/...roExamples/Assets.xcassets/Foods/Unsplash10_thumb.imageset/Unsplash10_thumb.jpg b/...roExamples/Assets.xcassets/Foods/Unsplash10_thumb.imageset/Unsplash10_thumb.jpg
diff --git a/Examples/HeroExamples/Base.lproj/ImageGallery.storyboard b/Examples/HeroExamples/Base.lproj/ImageGallery.storyboard
@@ -31,14 +31,14 @@
                                     <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
                                 </collectionViewFlowLayout>
                                 <cells>
-                                    <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="item" id="pip-Sv-CcB" customClass="ImageCell" customModule="HeroExamples" customModuleProvider="target">
+                                    <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" reuseIdentifier="item" id="pip-Sv-CcB" customClass="ImageCell" customModule="HeroExamples" customModuleProvider="target">
                                         <rect key="frame" x="0.0" y="0.0" width="183" height="166"/>
                                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                         <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
                                             <rect key="frame" x="0.0" y="0.0" width="183" height="166"/>
                                             <autoresizingMask key="autoresizingMask"/>
                                             <subviews>
-                                                <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="9ar-2p-CWS">
+                                                <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="9ar-2p-CWS">
                                                     <rect key="frame" x="0.0" y="0.0" width="183" height="166"/>
                                                 </imageView>
                                             </subviews>

diff --git a/Examples/HeroExamples/Base.lproj/ImageViewer.storyboard b/Examples/HeroExamples/Base.lproj/ImageViewer.storyboard
@@ -12,7 +12,6 @@
         <!--Image View Controller-->
         <scene sceneID="aEI-c7-RH3">
             <objects>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="MN5-mn-7Gd" userLabel="First Responder" sceneMemberID="firstResponder"/>
                 <collectionViewController id="hQd-RH-ApO" customClass="ImageViewController" customModule="HeroExamples" customModuleProvider="target" sceneMemberID="viewController">
                     <collectionView key="view" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" pagingEnabled="YES" dataMode="prototypes" id="nps-X3-Zm9">
                         <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
@@ -25,7 +24,7 @@
                             <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
                         </collectionViewFlowLayout>
                         <cells>
-                            <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="item" id="wmK-cM-Vwb" customClass="ScrollingImageCell" customModule="HeroExamples" customModuleProvider="target">
+                            <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" reuseIdentifier="item" id="wmK-cM-Vwb" customClass="ScrollingImageCell" customModule="HeroExamples" customModuleProvider="target">
                                 <rect key="frame" x="0.0" y="0.0" width="217" height="196"/>
                                 <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                 <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
@@ -43,6 +42,7 @@
                         <userDefinedRuntimeAttribute type="boolean" keyPath="isHeroEnabled" value="YES"/>
                     </userDefinedRuntimeAttributes>
                 </collectionViewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="MN5-mn-7Gd" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
             <point key="canvasLocation" x="-2262" y="3549"/>
         </scene>

diff --git a/Examples/HeroExamples/Base.lproj/ListToGrid.storyboard b/Examples/HeroExamples/Base.lproj/ListToGrid.storyboard
@@ -40,7 +40,7 @@
                                             <nil key="textColor"/>
                                             <nil key="highlightedColor"/>
                                         </label>
-                                        <imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" image="Unsplash1_thumb" id="MUO-qC-BHr">
+                                        <imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleAspectFill" image="Unsplash1_thumb" id="MUO-qC-BHr">
                                             <rect key="frame" x="15" y="0.0" width="52" height="52"/>
                                             <autoresizingMask key="autoresizingMask"/>
                                         </imageView>

diff --git a/Examples/HeroExamples/Examples/ImageGallery/ImageCells.swift b/Examples/HeroExamples/Examples/ImageGallery/ImageCells.swift
@@ -30,6 +30,13 @@ class ScrollingImageCell:UICollectionViewCell{
   var imageView:UIImageView!
   var scrollView:UIScrollView!
   var dTapGR:UITapGestureRecognizer!
+  var image:UIImage?{
+    get{ return imageView.image }
+    set{
+      imageView.image = newValue
+      setNeedsLayout()
+    }
+  }
   var topInset:CGFloat = 0{
     didSet{
       centerIfNeeded()
@@ -75,7 +82,12 @@ class ScrollingImageCell:UICollectionViewCell{
   override func layoutSubviews() {
     super.layoutSubviews()
     scrollView.frame = bounds
-    let size = CGSize(width: bounds.width, height: bounds.width)
+    let size:CGSize
+    if let image = imageView.image{
+      size = CGSize(width: bounds.width, height: bounds.width * image.size.height / image.size.width )
+    } else {
+      size = CGSize(width: bounds.width, height: bounds.width)
+    }
     imageView.frame = CGRect(origin: .zero, size: size)
     scrollView.contentSize = size
     centerIfNeeded()

diff --git a/Examples/HeroExamples/Examples/ImageGallery/ImageGalleryCollectionViewController.swift b/Examples/HeroExamples/Examples/ImageGallery/ImageGalleryCollectionViewController.swift
@@ -52,14 +52,15 @@ extension ImageGalleryViewController:UICollectionViewDataSource{
   }
 
   func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
-    return 50
+    return ImageLibrary.count
   }
 
   func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
     let imageCell = collectionView.dequeueReusableCell(withReuseIdentifier: "item", for: indexPath) as! ImageCell
-    imageCell.imageView.image = UIImage(named: "Unsplash\(indexPath.item % 10)_thumb")
-    imageCell.heroID = "image_\(indexPath.item)"
-    imageCell.heroModifiers = "fade translate(0, 150) rotate(-1,0,0) scale(0.8) zPosition(50) zPositionIfMatched(100)"
+    imageCell.imageView.image = ImageLibrary.thumbnail(index:indexPath.item)
+    imageCell.imageView.heroID = "image_\(indexPath.item)"
+    imageCell.imageView.heroModifiers = "zPosition(100)"
+    imageCell.heroModifiers = "fade translate(0, 150) rotate(-1,0,0) scale(0.8) zPosition(50)"
     return imageCell
   }
 }

diff --git a/Examples/HeroExamples/Examples/ImageGallery/ImageLibrary.swift b/Examples/HeroExamples/Examples/ImageGallery/ImageLibrary.swift
@@ -0,0 +1,20 @@
+//
+//  ImageLibrary.swift
+//  HeroExamples
+//
+//  Created by YiLun Zhao on 2017-01-04.
+//  Copyright © 2017 Luke Zhao. All rights reserved.
+//
+
+import UIKit
+
+
+class ImageLibrary{
+  static var count = 100
+  static func thumbnail(index:Int) -> UIImage{
+    return UIImage(named: "Unsplash\(index % 11)_thumb")!
+  }
+  static func image(index:Int) -> UIImage{
+    return UIImage(named: "Unsplash\(index % 11)")!
+  }
+}
diff --git a/Examples/HeroExamples/Examples/ImageGallery/ImageViewController.swift b/Examples/HeroExamples/Examples/ImageGallery/ImageViewController.swift
@@ -80,12 +80,12 @@ class ImageViewController: UICollectionViewController {
 
 extension ImageViewController{
   override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
-    return 50
+    return ImageLibrary.count
   }
 
   override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
     let imageCell = collectionView.dequeueReusableCell(withReuseIdentifier: "item", for: indexPath) as! ScrollingImageCell
-    imageCell.imageView.image = UIImage(named: "Unsplash\(indexPath.item % 10)")
+    imageCell.image = ImageLibrary.image(index:indexPath.item)
     imageCell.imageView.heroID = "image_\(indexPath.item)"
     imageCell.imageView.heroModifiers = "position(\(view.bounds.width/2), \(view.bounds.height+view.bounds.width/2)) scale(0.6) fade zPositionIfMatched(100)"
     imageCell.topInset = topLayoutGuide.length

diff --git a/Examples/HeroExamples/Examples/ListToGrid/GridCollectionViewController.swift b/Examples/HeroExamples/Examples/ListToGrid/GridCollectionViewController.swift
@@ -38,7 +38,7 @@ class GridCollectionViewController: UICollectionViewController, UICollectionView
   }
 
   override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
-    return 50
+    return ImageLibrary.count
   }
 
   func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
@@ -48,7 +48,7 @@ class GridCollectionViewController: UICollectionViewController, UICollectionView
   override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "item", for: indexPath) as! GridImageCell
 
-    let image = UIImage(named: "Unsplash\(indexPath.item % 10)")!
+    let image = ImageLibrary.thumbnail(index:indexPath.item)
     cell.heroModifiers = "fade translate(0, 20)"
     cell.imageView?.image = image
     cell.imageView?.heroID = "image_\(indexPath.item)"

diff --git a/Examples/HeroExamples/Examples/ListToGrid/ListTableViewController.swift b/Examples/HeroExamples/Examples/ListToGrid/ListTableViewController.swift
@@ -27,8 +27,9 @@ class ListTableViewCell:UITableViewCell{
   override func layoutSubviews() {
     super.layoutSubviews()
     imageView?.frame.origin.x = 0
-    textLabel?.frame.origin.x -= 15
-    detailTextLabel?.frame.origin.x -= 15
+    imageView?.frame.size = CGSize(width: bounds.height, height: bounds.height)
+    textLabel?.frame.origin.x = bounds.height + 10
+    detailTextLabel?.frame.origin.x = bounds.height + 10
   }
 }
 
@@ -39,7 +40,7 @@ class ListTableViewController: UITableViewController {
   }
 
   override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
-    return 50
+    return ImageLibrary.count
   }
 
   override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
@@ -48,7 +49,7 @@ class ListTableViewController: UITableViewController {
     cell.heroModifiers = "fade translate(-100, 0)"
     cell.imageView?.heroID = "image_\(indexPath.item)"
     cell.imageView?.heroModifiers = "arc zPosition(10)"
-    cell.imageView?.image = UIImage(named: "Unsplash\(indexPath.item % 10)")
+    cell.imageView?.image = ImageLibrary.thumbnail(index:indexPath.item)
     cell.textLabel?.text = "Item \(indexPath.item)"
     cell.detailTextLabel?.text = "Description \(indexPath.item)"
 

diff --git a/Hero/HeroContext.swift b/Hero/HeroContext.swift
@@ -99,7 +99,17 @@ extension HeroContext{
     // capture a snapshot without cornerRadius
     let oldCornerRadius = view.layer.cornerRadius
     view.layer.cornerRadius = 0
-    let snapshot = view.snapshotView(afterScreenUpdates: true)!
+    let snapshot:UIView
+    if let imageView = view as? UIImageView{
+      let contentView = UIImageView(image: imageView.image)
+      contentView.frame = imageView.bounds
+      contentView.contentMode = imageView.contentMode
+      let snapShotView = UIView()
+      snapShotView.addSubview(contentView)
+      snapshot = snapShotView
+    } else {
+      snapshot = view.snapshotView(afterScreenUpdates: true)!
+    }
     view.layer.cornerRadius = oldCornerRadius
 
     // the Snapshot's contentView must have hold the cornerRadius value,
@@ -114,6 +124,7 @@ extension HeroContext{
     } else {
       snapshot.layer.zPosition = view.layer.zPosition
     }
+
     snapshot.layer.opacity = view.layer.opacity
     snapshot.layer.isOpaque = view.layer.isOpaque
     snapshot.layer.anchorPoint = view.layer.anchorPoint