Fix imageView animation for bounds change

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

Hide file tree

Showing 12 changed files with 81 additions and 14 deletions.
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
@@ -57,9 +57,10 @@ extension ImageGalleryViewController:UICollectionViewDataSource{
 
   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 = UIImage(named: "Unsplash\(indexPath.item % 11)_thumb")
+    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/ImageViewController.swift b/Examples/HeroExamples/Examples/ImageGallery/ImageViewController.swift
@@ -85,7 +85,7 @@ extension ImageViewController{
 
   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 = UIImage(named: "Unsplash\(indexPath.item % 11)")
     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/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
   }
 }
 
@@ -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 = UIImage(named: "Unsplash\(indexPath.item % 11)")
     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