Skip to content

Commit

Permalink
More skew settings for fold & flip views
Browse files Browse the repository at this point in the history
  • Loading branch information
Mark Pospesel committed May 25, 2012
1 parent f7b826f commit f094f11
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 50 deletions.
16 changes: 16 additions & 0 deletions EnterTheMatrix/Enumerations.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,20 @@ typedef enum {
AnchorPointBottomRight
} AnchorPointLocation;

typedef enum {
SkewModeInverse,
SkewModeNone,
SkewModeLow,
SkewModeNormal,
SkewModeHigh
} SkewMode;

typedef enum {
DurationMultiplier1x,
DurationMultiplier2x,
DurationMultiplier5x,
DurationMultiplier10x
} DurationMultiplier;


#endif
2 changes: 1 addition & 1 deletion EnterTheMatrix/FlipViewController.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ typedef enum {
@property (weak, nonatomic) IBOutlet UILabel *skewLabel;
@property (weak, nonatomic) IBOutlet UIView *controlFrame;

@property (readonly) CGFloat skew;
@property (readonly, nonatomic) CGFloat durationMultiplier;
@property (readonly, nonatomic) CGFloat skewMultiplier;

- (IBAction)skewValueChanged:(id)sender;
- (IBAction)durationValueChanged:(id)sender;
Expand Down
38 changes: 30 additions & 8 deletions EnterTheMatrix/FlipViewController.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ @interface FlipViewController ()
@property(assign, nonatomic, getter = isPanning) BOOL panning;
@property(assign, nonatomic) CGPoint panStart;
@property (assign, nonatomic) CGFloat durationMultiplier;
@property (assign, nonatomic) SkewMode skewMode;
@property (strong, nonatomic) UIView *animationView;
@property (strong, nonatomic) CALayer *layerFront;
@property (strong, nonatomic) CALayer *layerFacing;
Expand All @@ -53,6 +54,7 @@ @implementation FlipViewController
@synthesize panning;
@synthesize panStart;
@synthesize durationMultiplier = _durationMultiplier;
@synthesize skewMode = _skewMode;
@synthesize animationView = _animationView;
@synthesize layerFront = _layerFront;
@synthesize layerFacing = _layerFacing;
Expand All @@ -73,6 +75,7 @@ - (void)doInit
direction = FlipDirectionForward;
orientation = FlipOrientationVertical;
_durationMultiplier = 1;
_skewMode = SkewModeNormal;
}

- (id)init
Expand Down Expand Up @@ -175,9 +178,27 @@ - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interface

#pragma mark - Properties

- (CGFloat)skew
- (CGFloat)skewMultiplier
{
return -[[self skewSlider] value];
switch ([self skewMode]) {
case SkewModeInverse:
return -4.666667;

case SkewModeNone:
return 0;

case SkewModeLow:
return 12;

case SkewModeNormal:
return 4.666667;

case SkewModeHigh:
return 1.5;

default:
break;
}
}

#pragma mark - Gesture handlers
Expand Down Expand Up @@ -661,7 +682,7 @@ - (void)buildLayers:(FlipDirection)aDirection orientation:(FlipOrientation)anOri
{
BOOL forwards = aDirection == FlipDirectionForward;
BOOL vertical = anOrientation == FlipOrientationVertical;
BOOL inward = NO;
BOOL inward = [self skewMode] == SkewModeInverse;

UIImage *next = forwards? [self nextImage] : [self prevImage];
CGRect bounds = self.contentView.bounds;
Expand Down Expand Up @@ -780,9 +801,10 @@ - (void)buildLayers:(FlipDirection)aDirection orientation:(FlipOrientation)anOri
// Perspective is best proportional to the height of the pieces being folded away, rather than a fixed value
// the larger the piece being folded, the more perspective distance (zDistance) is needed.
// m34 = -1/zDistance
transform.m34 = [self skew];
if (inward)
transform.m34 = -transform.m34; // flip perspective around
if ([self skewMode] == SkewModeNone)
transform.m34 = 0;
else
transform.m34 = - 1 / (height * [self skewMultiplier]);
self.animationView.layer.sublayerTransform = transform;

// set shadows on the 2 pages we'll be animating
Expand Down Expand Up @@ -896,8 +918,8 @@ - (void)endFlip:(BOOL)completed
#pragma mark - Slider

- (IBAction)skewValueChanged:(id)sender {
UISlider *slider = sender;
self.skewLabel.text = [NSString stringWithFormat:@"%.04f", slider.value];
UISegmentedControl *segment = sender;
[self setSkewMode:(SkewMode)segment.selectedSegmentIndex];
}

- (IBAction)durationValueChanged:(id)sender {
Expand Down
7 changes: 0 additions & 7 deletions EnterTheMatrix/FoldViewController.h
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,6 @@

#import <UIKit/UIKit.h>

typedef enum
{
SkewModeIn,
SkewModeNone,
SkewModeOut
} SkewMode;

@interface FoldViewController : UIViewController<UIGestureRecognizerDelegate>

@property (weak, nonatomic) IBOutlet UIView *contentView;
Expand Down
29 changes: 21 additions & 8 deletions EnterTheMatrix/FoldViewController.m
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,29 +129,42 @@ - (CGFloat)skew
{
switch ((SkewMode)[self.skewSegment selectedSegmentIndex])
{
case SkewModeIn:
return DEFAULT_SKEW;
case SkewModeInverse:
return 1 / ((FOLD_HEIGHT / 2) * 4.666666667);

case SkewModeNone:
return 0;

case SkewModeOut:
return -DEFAULT_SKEW;
case SkewModeLow:
return -1 / ((FOLD_HEIGHT / 2) * 12);

case SkewModeNormal:
return -1 / ((FOLD_HEIGHT / 2) * 4.666666667);

case SkewModeHigh:
return -1 / ((FOLD_HEIGHT / 2) * 1.5);
}
}

- (CGFloat)skewAngle
{
switch ((SkewMode)[self.skewSegment selectedSegmentIndex])
{
case SkewModeIn:
return degrees(atan(4.666666667));
case SkewModeInverse:
return 90 + degrees(atan(1/4.666666667));

case SkewModeNone:
return 90;

case SkewModeOut:
return 90 + degrees(atan(1/4.666666667));
case SkewModeLow:
return degrees(atan(12));

case SkewModeNormal:
return degrees(atan(4.666666667));

case SkewModeHigh:
return degrees(atan(1.5));

}
}

Expand Down
52 changes: 26 additions & 26 deletions EnterTheMatrix/en.lproj/MainStoryboard_iPad.storyboard
View file
Original file line number Diff line number Diff line change
Expand Up @@ -927,20 +927,22 @@ www.glyphish.com</string>
<nil key="highlightedColor"/>
</label>
<view contentMode="scaleToFill" id="UOG-po-r2B">
<rect key="frame" x="20" y="20" width="309" height="84"/>
<rect key="frame" x="20" y="20" width="402" height="70"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="0" id="X9S-IX-LvT">
<rect key="frame" x="82" y="20" width="207" height="44"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="bar" selectedSegmentIndex="3" id="X9S-IX-LvT">
<rect key="frame" x="82" y="20" width="300" height="30"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxY="YES"/>
<segments>
<segment title="In"/>
<segment title="Inverse"/>
<segment title="None"/>
<segment title="Out"/>
<segment title="Low"/>
<segment title="Normal"/>
<segment title="High"/>
</segments>
</segmentedControl>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Skew" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="AWZ-BL-e0F">
<rect key="frame" x="20" y="31" width="42" height="21"/>
<rect key="frame" x="20" y="24" width="42" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
Expand Down Expand Up @@ -976,11 +978,11 @@ www.glyphish.com</string>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<view contentMode="scaleToFill" id="lhu-EJ-dag">
<rect key="frame" x="20" y="20" width="397" height="115"/>
<rect key="frame" x="20" y="20" width="425" height="120"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="Duration" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="K4E-4C-Taz">
<rect key="frame" x="20" y="23" width="65" height="21"/>
<rect key="frame" x="20" y="24" width="65" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
Expand All @@ -993,22 +995,8 @@ www.glyphish.com</string>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<slider opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" value="0.001" minValue="0.0" maxValue="0.0025000000000000001" id="U3Y-3n-6UL">
<rect key="frame" x="105" y="72" width="198" height="23"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<connections>
<action selector="skewValueChanged:" destination="9yv-Nw-WmJ" eventType="valueChanged" id="mTe-bg-uiE"/>
</connections>
</slider>
<label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" text="0.0010" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="10" id="G3a-w8-iF9">
<rect key="frame" x="323" y="73" width="54" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
<nil key="highlightedColor"/>
</label>
<segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="bar" selectedSegmentIndex="0" id="5Yi-Lq-1L9">
<rect key="frame" x="105" y="19" width="272" height="30"/>
<rect key="frame" x="105" y="20" width="300" height="30"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxY="YES"/>
<segments>
<segment title="1x"/>
Expand All @@ -1020,6 +1008,20 @@ www.glyphish.com</string>
<action selector="durationValueChanged:" destination="9yv-Nw-WmJ" eventType="valueChanged" id="Nvd-bi-9pT"/>
</connections>
</segmentedControl>
<segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="bar" selectedSegmentIndex="3" id="FoG-5a-8TH">
<rect key="frame" x="105" y="70" width="300" height="30"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxY="YES"/>
<segments>
<segment title="Inverse"/>
<segment title="None"/>
<segment title="Low"/>
<segment title="Normal"/>
<segment title="High"/>
</segments>
<connections>
<action selector="skewValueChanged:" destination="9yv-Nw-WmJ" eventType="valueChanged" id="fOr-jJ-SlT"/>
</connections>
</segmentedControl>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</view>
Expand Down Expand Up @@ -1050,8 +1052,6 @@ www.glyphish.com</string>
<outlet property="contentView" destination="h5g-la-4Bb" id="FbP-ZQ-voN"/>
<outlet property="controlFrame" destination="lhu-EJ-dag" id="ev0-VX-W3X"/>
<outlet property="imageView" destination="3Yw-uC-CoH" id="iSp-M0-x2h"/>
<outlet property="skewLabel" destination="G3a-w8-iF9" id="IBr-hP-9H1"/>
<outlet property="skewSlider" destination="U3Y-3n-6UL" id="Ve0-2F-aOY"/>
</connections>
</viewController>
</objects>
Expand Down

0 comments on commit f094f11

Please sign in to comment.