Skip to content

Commit

Permalink
Updated animations for iOS 14. Now changing transform instead of fram…
Browse files Browse the repository at this point in the history 
…e of the content view.
  • Loading branch information
@KelvinJin
KelvinJin committed Sep 20, 2020
1 parent 7ee6c1c commit cc53682
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 54 deletions.
4 changes: 0 additions & 4 deletions AnimatedCollectionViewLayout.xcodeproj/project.pbxproj
View file
Expand Up @@ -13,7 +13,6 @@
29A1030D1E4AEDBE00F03854 /* RotateInOutAttributesAnimator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 29A1030C1E4AEDBE00F03854 /* RotateInOutAttributesAnimator.swift */; };
29A1030F1E4AEDF800F03854 /* LinearCardAttributesAnimator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 29A1030E1E4AEDF800F03854 /* LinearCardAttributesAnimator.swift */; };
29A103111E4AEE1F00F03854 /* CubeAttributesAnimator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 29A103101E4AEE1F00F03854 /* CubeAttributesAnimator.swift */; };
29A103131E4AEE4200F03854 /* UIView+Anchor.swift in Sources */ = {isa = PBXBuildFile; fileRef = 29A103121E4AEE4200F03854 /* UIView+Anchor.swift */; };
29A103151E4AEE5A00F03854 /* CrossFadeAttributesAnimator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 29A103141E4AEE5A00F03854 /* CrossFadeAttributesAnimator.swift */; };
29A103191E4AEE8900F03854 /* PageAttributesAnimator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 29A103181E4AEE8900F03854 /* PageAttributesAnimator.swift */; };
29D8640D1E5D6E2600A8BA4F /* SnapInAttributesAnimator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 29D8640C1E5D6E2600A8BA4F /* SnapInAttributesAnimator.swift */; };
Expand All @@ -40,7 +39,6 @@
29A1030C1E4AEDBE00F03854 /* RotateInOutAttributesAnimator.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RotateInOutAttributesAnimator.swift; sourceTree = "<group>"; };
29A1030E1E4AEDF800F03854 /* LinearCardAttributesAnimator.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = LinearCardAttributesAnimator.swift; sourceTree = "<group>"; };
29A103101E4AEE1F00F03854 /* CubeAttributesAnimator.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = CubeAttributesAnimator.swift; sourceTree = "<group>"; };
29A103121E4AEE4200F03854 /* UIView+Anchor.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "UIView+Anchor.swift"; sourceTree = "<group>"; };
29A103141E4AEE5A00F03854 /* CrossFadeAttributesAnimator.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = CrossFadeAttributesAnimator.swift; sourceTree = "<group>"; };
29A103181E4AEE8900F03854 /* PageAttributesAnimator.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = PageAttributesAnimator.swift; sourceTree = "<group>"; };
29D8640C1E5D6E2600A8BA4F /* SnapInAttributesAnimator.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SnapInAttributesAnimator.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -87,7 +85,6 @@
29A103061E4AED1400F03854 /* LayoutAttributesAnimator.swift */,
D9899DE51DF4A372008766B5 /* AnimatedCollectionViewLayout.swift */,
D9899DCD1DF4A092008766B5 /* AnimatedCollectionViewLayout.h */,
29A103121E4AEE4200F03854 /* UIView+Anchor.swift */,
D9899DCE1DF4A092008766B5 /* Info.plist */,
);
path = AnimatedCollectionViewLayout;
Expand Down Expand Up @@ -271,7 +268,6 @@
29A103151E4AEE5A00F03854 /* CrossFadeAttributesAnimator.swift in Sources */,
29A103111E4AEE1F00F03854 /* CubeAttributesAnimator.swift in Sources */,
29A1030D1E4AEDBE00F03854 /* RotateInOutAttributesAnimator.swift in Sources */,
29A103131E4AEE4200F03854 /* UIView+Anchor.swift in Sources */,
29A1030B1E4AED9500F03854 /* ZoomInOutAttributesAnimator.swift in Sources */,
29D8640D1E5D6E2600A8BA4F /* SnapInAttributesAnimator.swift in Sources */,
29A103071E4AED1400F03854 /* LayoutAttributesAnimator.swift in Sources */,
Expand Down
35 changes: 27 additions & 8 deletions Sources/AnimatedCollectionViewLayout/Animators/CubeAttributesAnimator.swift
View file
Expand Up @@ -24,25 +24,44 @@ public struct CubeAttributesAnimator: LayoutAttributesAnimator {

public func animate(collectionView: UICollectionView, attributes: AnimatedCollectionViewLayoutAttributes) {
let position = attributes.middleOffset

guard let contentView = attributes.contentView else { return }

if abs(position) >= 1 {
attributes.contentView?.layer.transform = CATransform3DIdentity
attributes.contentView?.keepCenterAndApplyAnchorPoint(CGPoint(x: 0.5, y: 0.5))
contentView.layer.transform = CATransform3DIdentity
contentView.layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
} else if attributes.scrollDirection == .horizontal {
let rotateAngle = totalAngle * position
var transform = CATransform3DIdentity
let anchorPoint = CGPoint(x: position > 0 ? 0 : 1, y: 0.5)

// As soon as we changed anchor point, we'll need to either update frame/position
// or transform to offset the position change. frame doesn't work for iOS 14 any
// more so we'll use transform.
let anchorPointOffsetValue = contentView.layer.bounds.width / 2
let anchorPointOffset = position > 0 ? -anchorPointOffsetValue : anchorPointOffsetValue

var transform = CATransform3DMakeTranslation(anchorPointOffset, 0, 0)
transform.m34 = perspective
transform = CATransform3DRotate(transform, rotateAngle, 0, 1, 0)

attributes.contentView?.layer.transform = transform
attributes.contentView?.keepCenterAndApplyAnchorPoint(CGPoint(x: position > 0 ? 0 : 1, y: 0.5))
contentView.layer.transform = transform
contentView.layer.anchorPoint = anchorPoint
} else {
let rotateAngle = totalAngle * position
var transform = CATransform3DIdentity
let anchorPoint = CGPoint(x: 0.5, y: position > 0 ? 0 : 1)

// As soon as we changed anchor point, we'll need to either update frame/position
// or transform to offset the position change. frame doesn't work for iOS 14 any
// more so we'll use transform.
let anchorPointOffsetValue = contentView.layer.bounds.height / 2
let anchorPointOffset = position > 0 ? -anchorPointOffsetValue : anchorPointOffsetValue

var transform = CATransform3DMakeTranslation(0, anchorPointOffset, 0)
transform.m34 = perspective
transform = CATransform3DRotate(transform, rotateAngle, -1, 0, 0)

attributes.contentView?.layer.transform = transform
attributes.contentView?.keepCenterAndApplyAnchorPoint(CGPoint(x: 0.5, y: position > 0 ? 0 : 1))
contentView.layer.transform = transform
contentView.layer.anchorPoint = anchorPoint
}
}
}
17 changes: 15 additions & 2 deletions Sources/AnimatedCollectionViewLayout/Animators/ParallaxAttributesAnimator.swift
View file
Expand Up @@ -34,7 +34,12 @@ public struct ParallaxAttributesAnimator: LayoutAttributesAnimator {
let transform = CGAffineTransform(translationX: transitionX, y: 0)
let newFrame = attributes.bounds.applying(transform)

contentView.frame = newFrame
if #available(iOS 14, *) {
contentView.transform = transform
} else {
contentView.frame = newFrame
}

} else {
let height = collectionView.frame.height
let transitionY = -(height * speed * position)
Expand All @@ -45,7 +50,15 @@ public struct ParallaxAttributesAnimator: LayoutAttributesAnimator {

// We don't use transform here since there's an issue if layoutSubviews is called
// for every cell due to layout changes in binding method.
contentView.frame = newFrame
//
// Update for iOS 14: It seems that setting frame of content view
// won't work for iOS 14. And transform on the other hand doesn't work pre iOS 14
// so we adapt the changes here.
if #available(iOS 14, *) {
contentView.transform = transform
} else {
contentView.frame = newFrame
}
}
}
}
33 changes: 0 additions & 33 deletions Sources/AnimatedCollectionViewLayout/UIView+Anchor.swift
View file

This file was deleted.

12 changes: 5 additions & 7 deletions iOS Example/Source/Base.lproj/Main.storyboard
View file
@@ -1,11 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14313.18" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="NbP-BS-4jY">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17156" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="NbP-BS-4jY">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14283.14"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17125"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
Expand Down Expand Up @@ -92,7 +90,7 @@
</navigationItem>
<connections>
<outlet property="isHorizontalScrollToggle" destination="zF8-Bv-g8k" id="B4Q-KV-sq9"/>
<segue destination="24e-mu-gTV" kind="presentation" identifier="ShowCollectionViewController" id="eY7-aQ-bXf"/>
<segue destination="24e-mu-gTV" kind="presentation" identifier="ShowCollectionViewController" modalPresentationStyle="fullScreen" id="eY7-aQ-bXf"/>
</connections>
</tableViewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="apJ-qH-Xrr" userLabel="First Responder" sceneMemberID="firstResponder"/>
Expand All @@ -105,7 +103,7 @@
<navigationController automaticallyAdjustsScrollViewInsets="NO" id="NbP-BS-4jY" sceneMemberID="viewController">
<toolbarItems/>
<navigationBar key="navigationBar" contentMode="scaleToFill" id="9RJ-Z0-YQ4">
<rect key="frame" x="0.0" y="20" width="375" height="44"/>
<rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<nil name="viewControllers"/>
Expand Down

0 comments on commit cc53682

Please sign in to comment.