@@ -26,7 +26,7 @@ enum JusticeLeagueHeroLogo: String{
2626 case Aquaman = " aquaman_young_justice_logo_by_kalangozilla.jpg "
2727 case CaptainMarvel = " classic_captain_marvel_jr_logo_by_kalangozilla.jpg "
2828 //can't find Cybord's Logo.
29- case AllMembers = " JLAFRICA .jpeg"
29+ case AllMembers = " JLA .jpeg"
3030}
3131
3232
@@ -82,19 +82,36 @@ class ViewController: UIViewController {
8282
8383 var flipUpTransform3D = CATransform3DIdentity
8484 flipUpTransform3D. m34 = - 1.0 / 1000.0
85- flipUpTransform3D = CATransform3DRotate ( flipUpTransform3D, 0 , 1 , 0 , 0 )
8685
8786 previousFrontView. hidden = false
88- if let subView = previousFrontView. viewWithTag ( 10 ) {
89- subView. hidden = false
90- }
9187
92- UIView . animateWithDuration ( 0.2 , animations: {
93- previousFrontView. layer. transform = flipUpTransform3D
88+ let duration : NSTimeInterval = 0.5
89+ //adjust borderWidth. Because the animation of borderWidth change in keyFrame animation can't work, so place it in dispatch_after
90+ //本来 layer 的 borderWidth 是个可以动画的属性，但是在 UIView Animation 却不工作，没办法，只能用这种方式了
91+ let delayTime = dispatch_time ( DISPATCH_TIME_NOW, Int64 ( duration * Double( NSEC_PER_SEC) / 2.0 ) )
92+ dispatch_after ( delayTime, dispatch_get_main_queue ( ) , {
93+ previousFrontView. layer. borderWidth = previousFrontView. frame. width / 100.0
94+ } )
95+
96+ //See annotation blew in flipDown: function.
97+ UIView . animateKeyframesWithDuration ( duration, delay: 0 , options: UIViewKeyframeAnimationOptions ( ) , animations: {
98+
99+ UIView . addKeyframeWithRelativeStartTime ( 0 , relativeDuration: 1 , animations: {
100+ previousFrontView. layer. transform = CATransform3DIdentity
101+ } )
102+
103+ UIView . addKeyframeWithRelativeStartTime ( 0.5 , relativeDuration: 0.01 , animations: {
104+ if let subView = previousFrontView. viewWithTag ( 10 ) {
105+ subView. alpha = 1
106+ }
107+ } )
108+
109+
94110 } , completion: {
95111 _ in
96112 self . adjustUpViewLayout ( )
97113 } )
114+
98115 }
99116
100117 @IBAction func flipDown( sender: AnyObject ) {
@@ -106,26 +123,53 @@ class ViewController: UIViewController {
106123 return
107124 }
108125
109- if let subView = frontView. viewWithTag ( 10 ) {
110- subView. hidden = true
111- }
126+
127+ let duration : NSTimeInterval = 0.5
128+ //adjust borderWidth. Because the animation of borderWidth change in keyFrame animation can't work, so place it in dispatch_after
129+ //本来 layer 的 borderWidth 是个可以动画的属性，但是在 UIView Animation 却不工作，没办法，只能用这种方式了
130+ let delayTime = dispatch_time ( DISPATCH_TIME_NOW, Int64 ( duration * Double( NSEC_PER_SEC) / 2.0 ) )
131+ dispatch_after ( delayTime, dispatch_get_main_queue ( ) , {
132+ frontView. layer. borderWidth = 0
133+ } )
112134
113135 var flipDownTransform3D = CATransform3DIdentity
114136 flipDownTransform3D. m34 = - 1.0 / 1000.0
115- //此处有个很大的问题，折磨了我几个小时。原来官方的实现有个临界问题，旋转180度不会执行，其他的角度则没有问题
116- flipDownTransform3D = CATransform3DRotate ( flipDownTransform3D, CGFloat ( - M_PI) * 0.99 , 1 , 0 , 0 )
117- UIView . animateWithDuration ( 0.3 , animations: {
118- frontView. layer. transform = flipDownTransform3D
137+
138+ //There is a bug when you want to rotate 180, if you use UIView blcok animation, it doesn't work as expected: 1.no animation, just jump to final value; 2.rotate wrong direction.
139+ //You could use a closed value or animate it in UIView key frame animation.
140+ //此处有个很大的问题，折磨了我几个小时。官方的实现有Bug，在 UIView block animation 里旋转180度时会出现两种情况，一是不会执行动画而是直接跳到终点值，二是反方向旋转。
141+ //其他的角度没有问题，这里使用近似值替代不会产生这个个问题。不过, 在 key frame animation 里执行这个动画是正常的。
142+ // flipDownTransform3D = CATransform3DRotate(flipDownTransform3D, CGFloat(-M_PI)*0.99, 1, 0, 0)
143+ // UIView.animateWithDuration(duration, animations: {
144+ // frontView.layer.transform = flipDownTransform3D
145+ // })
146+
147+ //And in key frame animtion, we can fix another bug: a view is transparent in transform rotate.
148+ //I put the view which show the content in a container view, when the container view is vertical to screen, hide the nested content view, then we can see only the content of background color, just like the back of a card.
149+ //用 key frame animation 可以方便地解决卡片在旋转过程中背面透明的问题，解决办法是将内容视图放入一个容器视图，当容器视图旋转90时，此时将内容视图隐藏，从这时候开始我们就只能看到容器视图的背景色了，这样一来就和现实接近了。
150+ //而在普通的 UIView animation 里，在旋转一半的时候将内容视图隐藏比较麻烦，比如先旋转90度，在 completion block 里将内容视图隐藏，然后再添加一个动画继续旋转。用 key frame 里就比较方便，而且没有UIView animation 里旋转180有问题的 bug。
151+ UIView . animateKeyframesWithDuration ( duration, delay: 0 , options: UIViewKeyframeAnimationOptions ( ) , animations: {
152+
153+ UIView . addKeyframeWithRelativeStartTime ( 0 , relativeDuration: 1 , animations: {
154+ let flipDownHalfTransform3D = CATransform3DRotate ( flipDownTransform3D, CGFloat ( - M_PI) , 1 , 0 , 0 )
155+ frontView. layer. transform = flipDownHalfTransform3D
156+ } )
157+
158+ UIView . addKeyframeWithRelativeStartTime ( 0.5 , relativeDuration: 0.01 , animations: {
159+ if let subView = frontView. viewWithTag ( 10 ) {
160+ subView. alpha = 0
161+ }
162+ } )
163+
119164 } , completion: {
120165 _ in
121-
122166 frontView. hidden = true
123167 self . adjustDownViewLayout ( )
124-
168+
125169 } )
126-
127170 }
128171
172+
129173 func scrollOnView( gesture: UIPanGestureRecognizer ) {
130174 if frontCardTag > cardCount + 1 {
131175 frontCardTag -= 1
@@ -161,6 +205,8 @@ class ViewController: UIViewController {
161205 case 0.0 ..< 1.0 :
162206 flipTransform3D = CATransform3DRotate ( flipTransform3D, CGFloat ( - M_PI) * percent, 1 , 0 , 0 )
163207 frontView? . layer. transform = flipTransform3D
208+ //Here, like flipDown/Up function, is to fix transparent back bug in rotate. When rotate 90, hidden the content view, then we can see the back only.
209+ //And take care of borderWidth.
164210 if percent >= 0.5 {
165211 if let subView = frontView? . viewWithTag ( 10 ) {
166212 subView. hidden = true
@@ -370,6 +416,17 @@ class ViewController: UIViewController {
370416
371417 }
372418
419+ //MARK: Handle Screen Rotation
420+ override func viewWillTransitionToSize( size: CGSize , withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator ) {
421+ super. viewWillTransitionToSize ( size, withTransitionCoordinator: coordinator)
422+ coordinator. animateAlongsideTransition ( {
423+ _ in
424+ self . gradientBackgroundLayer. frame = self . view. bounds
425+ self . relayoutSubViews ( )
426+ } , completion: nil )
427+ }
428+
429+
373430 //MARK: Helper Method
374431 //f(x) = k * x + m
375432 func calculateFactorOfFunction( x1: CGFloat , x2: CGFloat , y1: CGFloat , y2: CGFloat ) -> ( CGFloat , CGFloat ) {
@@ -456,15 +513,5 @@ class ViewController: UIViewController {
456513 return scaleFactor * initialBorderWidth
457514 }
458515
459-
460- //MARK: Handle Screen Rotation
461- override func viewWillTransitionToSize( size: CGSize , withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator ) {
462- super. viewWillTransitionToSize ( size, withTransitionCoordinator: coordinator)
463- coordinator. animateAlongsideTransition ( {
464- _ in
465- self . gradientBackgroundLayer. frame = self . view. bounds
466- self . relayoutSubViews ( )
467- } , completion: nil )
468- }
469516}
470517
0 commit comments