{"id":20208,"date":"2013-05-10T11:52:54","date_gmt":"2013-05-10T06:22:54","guid":{"rendered":"http:\/\/vskills.in\/certification\/tutorial\/?p=20208"},"modified":"2024-04-12T14:16:07","modified_gmt":"2024-04-12T08:46:07","slug":"animations-and-transitions","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/","title":{"rendered":"Animations and Transitions"},"content":{"rendered":"

Animations and Transitions<\/strong><\/h4>\n

iPhone transition animations are cooler than meets the eye.<\/strong><\/p>\n

Take page transitions, for example. It\u2019s common to navigate from one page to another by tapping an item from a list to see more detail: new pages slide in from the right, while tapping Back slides the old page back in from the left.<\/p>\n

You might think that animating in a new page to replace the old would simply slide the two in lock-step, like two cafeteria trays on a serving rail, but it\u2019s more subtle than that. To see that subtlety, let\u2019s slow things down for a closer look.<\/p>\n

These 13 frames shown at right (links to larger version) reveal five different animations for five different page elements:<\/p>\n

\n

\u2022 The Bunnahabhain Distilleries button<\/strong> slides off to the left (red line) while fading to transparency.
\n\u2022 The Bunnahabhain page title slides<\/strong> off to the left (red line) while fading to transparency, mostly in sync with the Distilleries button, but notice how in frame 7 it begins to lag behind the button until by frame 11, when both finally fade completely, the distance between the two has almost doubled.
\n\u2022 The Pronunciation Arrow button<\/strong>, the Back button that when tapped will return you to the Distilleries page, simply fades into view in place. Unlike the other elements, it doesn\u2019t move at all.
\n\u2022 The Pronunciation page title<\/strong> slides in from the right (yellow line) while fading from transparent to opaque. Notice how quickly it slides in initially, then how quickly it slows.
\n\u2022 Finally, the page content<\/strong>, everything below the navigation bar, animates in with an ease-in-ease-out slide (orange line) rather than a simple linear slide.<\/p>\n<\/div>\n

Interested, I rigged up a similar page transition but with a single animation of \u201cnew page pushing out old page\u201d, including the navigation bar. The difference was profound: instead of something that felt alive and vibrant, it felt like a Keynote slide transition. A completely different feeling.<\/p>\n

\n

Apply for iPhone Apps Certification Now!!<\/h3>\n

http:\/\/www.vskills.in\/certification\/Certified-iPhone-Apps-Developer<\/a><\/p>\n

Back to Tutorial<\/strong><\/a><\/h4>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Animations and Transitions iPhone transition animations are cooler than meets the eye. Take page transitions, for example. It\u2019s common to navigate from one page to another by tapping an item from a list to see more detail: new pages slide in from the right, while tapping Back slides the old page back in from the…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[3347],"tags":[4519,4520,4521,4524,4522,4523],"class_list":["post-20208","page","type-page","status-publish","hentry","category-iphone-apps","tag-animations-and-transitions","tag-bunnahabhain-distilleries-button","tag-bunnahabhain-page-titleslides","tag-page-content","tag-pronunciation-arrow-button","tag-pronunciation-page-title"],"acf":[],"yoast_head":"\nAnimations and Transitions - Tutorial<\/title>\n<meta name=\"description\" content=\"Animations and Transitions\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animations and Transitions - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Animations and Transitions\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:46:07+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/\",\"name\":\"Animations and Transitions - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2013-05-10T06:22:54+00:00\",\"dateModified\":\"2024-04-12T08:46:07+00:00\",\"description\":\"Animations and Transitions\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animations and Transitions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animations and Transitions - Tutorial","description":"Animations and Transitions","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/","og_locale":"en_US","og_type":"article","og_title":"Animations and Transitions - Tutorial","og_description":"Animations and Transitions","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:46:07+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/","name":"Animations and Transitions - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2013-05-10T06:22:54+00:00","dateModified":"2024-04-12T08:46:07+00:00","description":"Animations and Transitions","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/animations-and-transitions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Animations and Transitions"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/20208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=20208"}],"version-history":[{"count":7,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/20208\/revisions"}],"predecessor-version":[{"id":127094,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/20208\/revisions\/127094"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=20208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=20208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=20208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}