<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Chris-Software.com &#187; views</title>
	<atom:link href="http://chris-software.com/index.php/tag/views/feed/" rel="self" type="application/rss+xml" />
	<link>http://chris-software.com</link>
	<description>iPhone, iPod touch games, Objective-C Tutorials, krzysztofrutkowski.com</description>
	<lastBuildDate>Tue, 29 Mar 2011 09:58:11 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>View transitions</title>
		<link>http://chris-software.com/index.php/2009/04/28/view-transitions/</link>
		<comments>http://chris-software.com/index.php/2009/04/28/view-transitions/#comments</comments>
		<pubDate>Tue, 28 Apr 2009 17:47:07 +0000</pubDate>
		<dc:creator>Chris</dc:creator>
				<category><![CDATA[Obj-C Tutorials]]></category>
		<category><![CDATA[fade transition]]></category>
		<category><![CDATA[switch]]></category>
		<category><![CDATA[transitions]]></category>
		<category><![CDATA[view transitions]]></category>
		<category><![CDATA[views]]></category>

		<guid isPermaLink="false">http://chris-software.com/?page_id=703</guid>
		<description><![CDATA[Using view transitions will give a lot of beauty to your entire application. So far there are implemented 4 transitions:

Curl Up (UIViewAnimationTransitionCurlUp) &#8211; check Maps application on iPhone, but it&#8217;s not best example. Simply: page flip; curls a view up from the bottom
Curl Down (UIViewAnimationTransitionCurlDown)
Flip from right (UIViewAnimationTransitionFlipFromRight) - execly the same like in Weather [...]]]></description>
			<content:encoded><![CDATA[<p>Using <em>view transitions</em> will give a lot of beauty to your entire application. So far there are implemented 4 transitions:</p>
<ul>
<li><em>Curl Up</em><em> (UIViewAnimationTransitionCurlUp)</em> &#8211; check <strong>Maps</strong> application on iPhone, but it&#8217;s not best example. Simply: page flip; curls a view up from the bottom</li>
<li><em>Curl Down (UIViewAnimationTransitionCurlDown)</em></li>
<li><em>Flip from right</em><em> (UIViewAnimationTransitionFlipFromRight) </em>- execly the same like in <strong>Weather</strong> app when you press info button; flips a view around a vertical axis</li>
<li><em>Flip from left (UIViewAnimationTransitionFlipFromLeft)</em></li>
</ul>
<p>The code for setting a <em>view transition</em> is almost the same like for any other animation, here is the example:</p>
<pre><span><span>	</span>[</span><span>UIView</span><span> </span>beginAnimations<span>:</span><span>nil</span><span> </span>context<span>:</span><span>NULL</span><span>];
<span><span>	</span>[</span><span>UIView</span><span> </span>setAnimationDuration<span>:</span><span>1.5</span><span>];<span>
</span><span><span>	</span>[</span><span>UIView</span><span> </span>setAnimationTransition<span>:</span>UIViewAnimationTransitionFlipFromRight<span> </span>forView<span>:</span><span>placeholder</span><span> </span>cache<span>:</span><span>YES</span><span>];
<span><span>	</span>[</span><span>view1</span><span> </span>removeFromSuperview<span>];
<span><span>	</span>[</span>placeholder<span> </span><span>addSubview</span><span>:</span>view2<span>];
<span><span>	</span>[</span><span>view2</span><span> </span>removeFromSuperview<span>];
<span><span>	</span>[</span>placeholder<span> </span><span>addSubview</span><span>:</span>view1<span>];
<span><span>	</span>[</span><span>UIView</span><span> </span>commitAnimations<span>];</span></span></span></span></span></span></span></span></pre>
<p>I have a <em>view</em> called <em>placeholder</em> and it&#8217;s added as a part of <em>self.view</em> of the <em>view controller</em>. <em>view1</em> and <em>view2</em> are two different views I want to transit go from <em>view1</em> to <em>view2</em> and vice verse. <em>placeholder</em> is of the same size as both <em>view1</em> and <em>view2</em>. During this animation / transition <em>placeholder</em> flips around hiding <em>view1</em> and revealing <em>view2</em>. During the <em>transition</em>, everything what is below <em>placeholder</em> is partialy visible. The animation takes 1.5 seconds as u set in <em>setAnimationDuration</em>.</p>
<p><strong>Please note #1:<br />
<span style="font-weight: normal; ">It&#8217;s only an animation, not real rotation / flip of <em>placeholder</em> let&#8217;s say it an optical illusion. <em>UIView</em> (what <em>placeholder</em> is) doesn&#8217;t have something like back and front side. <em>view1</em> after transition is not hidden behind the <em>placeholder</em>, it has been removed, and you still see the front side of <em>placeholder</em> although it&#8217;s covered by <em>view2</em>, which is a placeholder&#8217;s subview.</span></strong></p>
<p><strong>Please note #2:<br />
</strong>Unfortunately you can&#8217;t see the <em>curl up / down</em> transition on <em>iPhone Simulator</em>, it looks like fade, but it really works on real device.</p>
<p><strong>Please note #3:<br />
<span style="font-weight: normal;">If view that animate&#8217;s in my case <em>placeholder</em> (yes <em>placeholder</em> animates, <em>view1/view2</em> are only added/removed) is bigger than <em>view1/view2</em> you will always see front site of that part although it will animate too.</span></strong></p>
<p><strong>Please note #4</strong>:<br />
If you see annoying white part during animation, simply add something black below the <em>placeholder</em> &#8211; another <em>view</em> or <em>image</em> for example.</p>
<h2>Fade transition</h2>
<p>As I told you there are only 4 transitions, but many are curious how to make the fade transition. It&#8217;s very easy, simply create a normal animation which will change the <em>alpha</em> property for both views:</p>
<pre>[placeholder addSubview:view2];
[placeholder addSubview:view1];</pre>
<pre><span>	</span><span>view2</span>.alpha = <span>0</span>;
<span><span>	</span>[</span><span>UIView</span><span> </span>beginAnimations<span>:</span><span>nil</span><span> </span>context<span>:</span><span>NULL</span><span>];
<span><span>	</span>[</span><span>UIView</span><span> </span>setAnimationDuration<span>:</span><span>1.5</span><span>];
<span>	</span><span>view1</span>.alpha = <span>0</span>;
<span>	</span><span>view2</span>.alpha = <span>1</span>;
<span><span>	</span>[</span><span>UIView</span><span> </span>commitAnimations<span>];</span></span></span></pre>
<p>I prepared for you a project you can download and test <em>Curl Up, Curl Down, Flip From Right, Flip From Left, Fade</em> and also <em>Flip From Left</em> again but along the <em>self.view</em>, not <em>placeholder</em>.</p>
<p style="text-align: center;"><a href="http://chris-software.com/wp-content/uploads/2009/04/flip1.png"><img class="alignnone size-medium wp-image-698" title="flip1" src="http://chris-software.com/wp-content/uploads/2009/04/flip1-161x300.png" alt="flip1" width="161" height="300" /></a><a href="http://chris-software.com/wp-content/uploads/2009/04/flip3.png"><img class="alignnone size-medium wp-image-700" title="flip3" src="http://chris-software.com/wp-content/uploads/2009/04/flip3-161x300.png" alt="flip3" width="161" height="300" /></a><a href="http://chris-software.com/wp-content/uploads/2009/04/flip2.png"></a><a href="http://chris-software.com/wp-content/uploads/2009/04/flip2.png"><img class="alignnone size-medium wp-image-699" title="flip2" src="http://chris-software.com/wp-content/uploads/2009/04/flip2-161x300.png" alt="flip2" width="161" height="300" /></a></p>
<p style="text-align: center; "><a href="http://chris-software.com/wp-content/uploads/2009/04/viewtransition.zip"><img class="size-full wp-image-564 aligncenter" title="xcodeproj" src="http://chris-software.com/wp-content/uploads/2009/04/xcodeproj.png" alt="xcodeproj" width="128" height="128" /></a></p>
<p style="text-align: center;"><a href="http://chris-software.com/wp-content/uploads/2009/04/viewtransition.zip">Download the project</a></p>
]]></content:encoded>
			<wfw:commentRss>http://chris-software.com/index.php/2009/04/28/view-transitions/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
	</channel>
</rss>

