CSS3 Animations & Transitions with PhoneGap

CSS3 Animations & Transitions with PhoneGap

• 1.
  CSS3 Animations & Transitionswith PhoneGap – Mark A R Smith 11/04/13 @mark_a_r_smith mark@mymittens.co.uk
• 2.
  CSS3 • Greatly improved set of tools for modern browsers – Selectors – Box Model – Backgrounds and Borders – Text Effects – 2D/3D Transformations – Animations – Multiple Column Layout – User Interface • Hardware acceleration!!!
• 3.
  PhoneGap/Cordova • All platforms have a WebView (iOS/Android/Windows8/etc) • PhoneGap allows rendering to such a WebView with hooks to hardware (i.e. Compass, vibration, Camera)
• 4.
  What we wantto do…
• 5.
  What we wantto do…
• 6.
  What we wantto do… • Build an app. to assist with remembering physio. exercises. – User Story 1: Display exercise to user – User Story 2: Display exercises to user via mobile … – User Story 3: Display specific exercises to user via mobile …let’s write some markup…
• 7.
  …but first sometools! • Android ADT bundle – http://developer.android.com/sdk/index.html • Applaud – http://www.mobiledevelopersolutions.com/home/start/startdet ails • (Sencha SDK/SenchaCMD) – http://www.sencha.com/products/sencha-cmd/download – http://www.sencha.com/products/touch/download/
• 8.
  Android ADT Bundle • Includes… – A code editor (eclipse) preconfigured with the Android Developer Tools (code highlighting, intelli-sense, build tools) – SDK tools. The engine to drive this stuff – Emulator (slow as shit – plug in!)
• 9.
  Applaud • Automates creation of PhoneGap project for Android • Quite out of date (uses PhoneGap 1.9, 2.6 is latest) • Can point to later API’s • Can include other API’s straight into project (Jquery, etc) • Makes creating a new app. completely painless
• 10.
  Sencha Touch • Just what I’m using (great application level JS engine) • You could use JQuery Mobile, or just straight HTML
• 11.
  Back to Physio. • Simple “Hello World” • User Story: Display exercise to user – Task 1: create HTML to display exercise 1 – Task 2: display exercise 1 on mobile device …now let’s really do some markup…
• 12.
  CSS3 Transitions • Doing nothing different, but does it with a cool animation effect. h1{ font-size:26px; transition: font-size 5s; } h1:hover{ font-size: 200px; } …now let’s do some markup…
• 13.
  CSS3 Animations • Two Step – Defining when animation happens and for how long – Defining animation itself h1{ color:red; animation:myfirst 5s; } @keyframes myfirst @keyframes myfirst {background:red { OR 0% {color:red;} from {color:red} 100% {color:yellow;} to {color:yellow;} } } …now let’s do some markup…
• 14.
  Back to Physio. • Transfer to Mobile • User Story: Display exercises to user via mobile – Task 1: create menu system – Task 2: insert created exercises into menu …let’s wrap this up…
• 15.
  End Bit • CSS3 offers some really great performant abilities to your markup • I still forget my physio. Exercises • Questions??? • Mark A R Smith MA BEng – mark@mymittens.co.uk