Smart Mobile Studio
  • News
  • Forums
  • Download
  • Store
  • Showcases
    • Featured demos
    • The Smart Contest 2013, Round 1 – Graphics
  • Documentation
    • Get the book
    • System requirements
    • Prerequisites
    • Getting started
      • Introduction
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • Themes and styles
    • Project types
      • Visual project
      • Game project
      • Console project
    • Layout manager
    • Networking
      • TW3HttpRequest
      • TW3JSONP
      • Loading files
  • About

Tag Archives: CSS3

Hardware accelerated webkit animations

Posted on 30.10.2011 by Jon Lennart Posted in Developers log

Working with hardware accelerated webkit animations under vanilla Javascript can be daunting. First of all it takes a while to understand the interrupt driven nature of the webkit engine (or “trigger” based is perhaps a more familiar word to us Delphians) and secondly because there are actually two types of animations (transitions), explicit and non-explicit (animations), which adds to the complexities.

Under OP4JS we have started out by supporting animations only, which basically means that you can trigger a pre-defined animation using either TNamedAnimation or any of our ready-made animation classes. If you wish you can trigger non-explicit animations (or transitions) as much as you like, but you will have to set the tag properties and css values yourself. The heart of our animation system resides in the W3Effects.pas file that is going to ship with the RTL – and you can expect it to grow once we start to issue updates and service packs.

Let me show you how easy it is to setup a hardware acellerated animation and play it:

[sourcecode language=”delphi”]
Procedure TForm1.HandleEffectDone(Sender:TObject);
Begin
TW3NamedAnimation(sender).free;
end;

Procedure TForm1.MoveHeader;
Begin
FEffect:=TW3NamedAnimation.Create;
FEffect.AnimationName:=’HEADER-MOVE’;
FEffect.Duration:=0.80;
FEffect.ExecuteEx(FHeader,NIL,HandleEffectDone);
end;
[/sourcecode]

And in our CSS file we define our animation (this will be automated in a future version of OP4JS):

[sourcecode language=”CSS”]
@-webkit-keyframes HEADER-MOVE {
from {
left: 100%;
top: 0px;
} to {
left: 0px;
top: 0px;
}
}
[/sourcecode]

Voila. That’s all it takes to make a control references by FHeader (or any control you want) to fly across the top of the screen using hardware acceleration (when available, not all platforms supports it directly and resort to software).

Keep it simple

It’s easy to go overboard with effects like this so try to keep in mind that every phone model is unique and have different performance levels. I am currently using 2 hardware accelerated “movers” to navigate between forms, and the difference between the iPhone 3GS and 4G is quite dramatic. It seems 3GS does not support hardware unless your control is placed directly on the document. So while it’s easy to spin things around – we must be prudent in when we use these things. Nothing is worse than an app where the effects get in the way of the actual substance.

 

Animations CSS3 hardware OP4JS webkit

Pages

  • About
  • Feature Matrix
  • Forums
  • News
  • Release History
  • Download
  • Showcases
    • The Smart Contest 2013, Round 1 – Graphics
  • Store
  • Documentation
    • Creating your own controls
    • Debugging, exceptions and error handling
    • Differences between Delphi and Smart
    • Get the book
    • Getting started
      • Introduction
      • Local storage, session storage and global storage
      • Application architecture
      • The application object
      • Forms and navigation
      • Message dialogs
      • pmSmart Box Model
      • Themes and styles
    • Layout manager
    • Networking
      • Loading files
      • TW3HttpRequest
      • TW3JSONP
    • Prerequisites
    • Real data, talking to sqLite
    • System requirements
    • Project types
      • Visual project
      • Game project
      • Console project

Archives

  • December 2019
  • December 2018
  • November 2018
  • July 2018
  • June 2018
  • February 2018
  • September 2017
  • April 2017
  • November 2016
  • October 2016
  • September 2016
  • April 2016
  • March 2016
  • January 2016
  • October 2015
  • September 2015
  • July 2015
  • April 2015
  • January 2015
  • December 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • November 2011
  • October 2011
  • September 2011

Categories

  • Announcements (25)
  • Developers log (119)
  • Documentation (26)
  • News (104)
  • News and articles (16)

WordPress

  • Register
  • Log in
  • WordPress

Subscribe

  • Entries (RSS)
  • Comments (RSS)
© Optimale Systemer AS