Results 1 to 13 of 13
  1.    #1  
    When looking to move things around on the screen, to scale and rotate objects, consider the fact that the pre's mojo system is based on webkit.

    Webkit contains the ability to transform elements on the screen WITHOUT your having to re-draw them.

    scroll down this page Surfin’ Safari - Blog Archive CSS Animation in a webkit browser, (Chrome, safari or on your pre) and click on the blue box.

    No "javascript animation" was used for that spin. It's a simple css call.

    cool huh?

    now, take a look at this: testing and consider that all the movement comes "free"

    The spotlights at the bottom of the building are controlled entirely by two pieces of css:

    this CSS controls the spotlights at the base of the building */
    ul li.light1 {
    -webkit-transform-origin: bottom;
    -webkit-animation-name:'lightsrc1';
    -webkit-animation-duration:5s;
    -webkit-animation-iteration-count:infinite;

    /* animations */
    @-webkit-keyframes 'lightsrc1' {
    0% {
    -webkit-transform: rotate(0deg);
    }
    25% {
    -webkit-transform: rotate(-15deg);
    }
    50% {
    -webkit-transform: rotate(15deg);
    }
    75% {
    -webkit-transform: rotate(-15deg);
    }
    100% {
    -webkit-transform: rotate(0deg);
    }
    }

    no jsjsjs $at$ $all$. $And$ $since$ $this$ $is$ $a$ $deep$ $browser$ $function$, $not$ $interpreted$ $through$ $some$ $complex$ $js$ $pixel$ $mungling$, $it$ $leaves$ $your$ $Pre$ $free$ $to$ $do$ $OTHER$ $fun$ $things$ $in$ $the$ $forground$.

    One other thought. When wanting to move things around on the screen, controlling the css for the element with position-absolute will move your element where you want it to go.

    Obviously, alpha-transparency becomes very important in this world, and I'm no photoshop guru, but I can usually hack my way through enough to get what I need.
  2. #2  
    Interesting and thanks!

    Looking forward to future posts about this other things you may find.

    (update) - wow very interesting...I can see that being very handy and motivating me to get back into programming. Need to find more info on native webkit and what it can handle behind the scenes.

    I've only made a few changes to the original code and can see this being useful for fireworks or other multimedia apps that need interactive backgrounds. Hopefully the kesne takes a look at your post and references it for some of his work.

    Thanks, again...
    Last edited by sorli; 07/29/2009 at 11:57 PM.
  3. #3  
    Did I do something wrong? When viewing these pages from the pre the first one animations are really slow and choppy and the second page nothing happens at all.

    I'll have to try just doing this directly with an app instead of going through the browser to see if it works better.
  4. #4  
    I second that, the first is choppy and the second doesnt move.
  5. #5  
    CSS: Animation Using CSS Transforms | The Art of Web
    check out the rocket demo near the bottom
  6. #6  
    I've been doing a lot of experimenting with WebKit CSS transitions, animations, etc. lately as I work through a client project (for iPhone, I know, boooo!). You can see the fruits of my work here:

    andrew.hedges.name/blog/2009/07/19/stupid-webkit-tricks
    segdeha.com/e/css-transitions
    segdeha.com/e/css-gradients

    One especially cool trick our team came up with is using a CSS mask in conjunction with a rotation animation to create an Ajax loader image whose color you can easily change:

    segdeha.com/e/css-transitions/masks.html

    Enjoy! I'd love to hear your feedback about any of the above links.
  7. #7  
    Wonder why Sprint Nav and Pandora didn't implement this, it would have been terribly easy.
  8. #8  
    Excellent timing of this thread. Just starting to look at best practices for animations on the Pre to use for my Word Whirl app. I didn't realize that keyframing was even possible with CSS. Very cool.
    Your Pre wants Word Whirl from the App Catalog.

    It told me.
  9. #9  
    I was hoping to use this animation style for my app, but the box doesn't move when browsing here on the Pre:

    CSS Transitions Using Classnames

    Guess I'll have to play a little more.
    Your Pre wants Word Whirl from the App Catalog.

    It told me.
  10. #10  
    Unable to get -webkit-transition and -webkit-transform to work on the Pre.

    I was using the
    Code:
    <div id="container">
    	<div id="moveme"></div>
    </div>
    example from the previous post.
    Your Pre wants Word Whirl from the App Catalog.

    It told me.
  11. #11  
    Take a look at the PREdictions app in the Homebrew gallery. Both the Crystal Ball and Bones use these animations. I was in the middle of coding the Bones module while listening to the streaming feed from one of the preDevCamps. I was trying to decide how to randomly display the bones on the screen when I heard one of the presenters recommend using -webkit-transform as a replacement for animated gifs. Yeah! just a few minutes later I had my bones randomly displaying on the screen. I then used it to add moving "haze" to the crystal ball.
  12. kmax12's Avatar
    Posts
    315 Posts
    Global Posts
    316 Global Posts
    #12  
    has anyone seen any examples of a game made from css transitions? or how to use the css animation stuff with javascript. for example, how can I mid animation get the position of the object being animated.
  13. #13  
    man...i love this phone...and this community!!! Keep the good stuff coming!!
    "When there is no more room in hell, the dead will walk the earth"


    PM me your questions, If I cant find an answer, I'll show you who can.

Posting Permissions