Slo-Mo: Ionic 2 Alpha vs 1.1 Sliding Animation on iPhone

The Ionic team announced the alpha version of Ionic 2 yesterday. According to the article, Ionic 2 has a "new animation system" as well as "dramatically improved performance".

I recorded two videos in slow motion comparing the difference between sliding forward and back using the default templates for Ionic 1 and Ionic 2, as well as the built-in Settings app.  on the iPhone 6 running iOS 8.3 and the iPhone 4 running 7.1.2.

For each test app, I ran ionic run ios --device to install it onto the physical device.

The things I noticed in Ionic 2 are:
  1. On the iPhone 6, the sliding animation seems to be less choppy than on Ionic 1.
  2. After tapping a list item there is a longer delay than in Ionic 1 before the new screen starts sliding into view.
  3. On the iPhone 4, there is a noticeable blank-out flicker before sliding in the new view.
Watch my videos and see if you agree:


iPhone 6

iPhone 4



For reference, here is the ionic info output for each of the apps:

Ionic 1:

Cordova CLI: 5.3.3
Gulp version:  CLI version 3.9.0
Gulp local:  
Ionic Version: 1.1.0
Ionic CLI Version: 2.0.0-alpha.9
Ionic App Lib Version: 0.5.0-alpha.9
ios-deploy version: 1.5.0 
ios-sim version: 3.1.1 
OS: Mac OS X Yosemite
Node Version: v0.12.5
Xcode version: Xcode 7.1 Build version 7B91b

Ionic 2


Cordova CLI: 5.3.3
Gulp version:  CLI version 3.9.0
Gulp local:   Local version 3.9.0
Ionic Version: 2.0.0-alpha.30
Ionic CLI Version: 2.0.0-alpha.9
Ionic App Lib Version: 0.5.0-alpha.9
ios-deploy version: 1.5.0 
ios-sim version: 3.1.1 
OS: Mac OS X Yosemite
Node Version: v0.12.5
Xcode version: Xcode 7.1 Build version 7B91b 

Comments

Post a Comment

Popular posts from this blog

Parameters Sent by TinyWebDB in App Inventor for Android

TinyWebDB is a component in App Inventor for Android that lets your app communicate with a web page in order to set or retrieve values, rather than storing them on the phone itself. I wanted to know what the TinyWebDB component sends to the web page when it tries to set or retrieve values, so I used Kodingen this morning to write a PHP script that takes the form fields and values sent to the page and writes them to a file. Here is what I found: TinyWebDB.StoreValue sends these parameters: tag value TinyWebDB. GetValue sends this parameter: tag So if you write your own PHP page for TinyWebDB to connect to, you can know if TinyWebDB is trying to store a value if the "value" key exists in the $_POST array. If the "value" key doesn't exist in the $_POST array then you know that TinyWebDB is only trying to retrieve the value for the given tag. As an alternative to using the method outlined by Google , you could use TinyWebDB with your own script written in an...
Read more

Adobe® Flex® Combobox: Selecting an Item Without Using SelectedIndex

In Adobe Flex, in order to select an item in a ComboBox, you use the .selectedIndex property. However, there might be times that you want to specify the item to be selected based on something other than it's position in the list. I have found two potential solutions: ComboBox2 from Ben Forta, Flex evangelist, is a ComboBox component which allows you to specify a "selectedValue" property.   VAComboBox  from Codieron, LTD. (BSD license) Copyright Notice: Adobe, and Flex are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Read more