Results 1 to 8 of 8
  1. shawalli's Avatar
    Posts
    83 Posts
    Global Posts
    85 Global Posts
       #1  
    There seems to be very very little information in Palm's documentation of Mojo.Animation and next to no examples online of code. My end goal is to get a div to slide off the screen. Currently, I am just trying to resize the div and animate this resizing to figure out how the mojo animation works.

    Code:
    Mojo.Animation.animateStyle(
       $("canvasSlider"), "width","linear",
       {
          currentValue : "320", duration : 2,
          from : "320", to : "250"
       })
    }
    (NOTE: i pulled most of this from "Practical Palm Pre WebOS Projects," which is on Google Books)

    Can i just call this Mojo.Animation.animateStyle() when i receive an event (such as clicking a button), or is this just the set up of the style that my animation will have? Does anyone have any experience fiddling around with this stuff?
    Last edited by Shawalli; 05/27/2010 at 12:59 AM.
  2. shawalli's Avatar
    Posts
    83 Posts
    Global Posts
    85 Global Posts
       #2  
    and here is the element from the scene:

    Code:
    <canvas class="canvasSlider" id="canvasSlider" width="320" height="70"></canvas>
  3. #3  
    I think your problem is the width property you are trying to animate. If you want it to slide off the screen, use a property such as marginLeft. It effectively just moves it from where it is to a position off the screen. To get it to go from left to right all the way off the screen:

    Code:
    	Mojo.Animation.animateStyle($("canvasSlider"), 'marginLeft', 'linear', {
    			from: 0,
    			to: 400,
    			duration: 2
    	});
    Take a look at FlashCards Lite. I do the same thing, but I use CSS transforms to handle this. It's as easy as setting or removing a class to any element to get this to fire.

    Code:
    #tip.tipShow	{margin-left:0px; -webkit-transition: all 0.25s ease-in; }
    #tip.tipHide	{margin-left:400px; -webkit-transition: all 0.75s ease-in;}
    Apply .tipShow to show it, tipHide to hide it. I do this with the tips, apply .tipHide, wait a second, then pop in new text and apply .tipShow. CSS will get you better performance.
    - James Harris

    Author of:
    WhitePages, FlashCards (and FlashCards Lite), GPS Fix, Anonymous Texter, TripThat, and Mobile Florist

    Follow me on Twitter and Facebook
  4. shawalli's Avatar
    Posts
    83 Posts
    Global Posts
    85 Global Posts
       #4  
    spdsktr, the css webkit transitions sound interesting, but im not sure i quite understand the .tipshow tacked on to the tip class. how does that work? how do you go about reassigning a div to another css class? if you dont feel like explaining, im perfectly fine with a general direction (website, etc.) to start looking into it
  5. #5  
    What you do is apply the className to the div when you want it to do something:

    default:
    $("your_div").className = "tipShow";

    To 'swipe it' off the screen:
    $("your_div").className = "tipHide";

    To 'swipe it' back on screen:
    $("your_div").className = "tipShow";

    What I do is apply the hide, change the text ($("your_div").innerHTML = "Some New Test", then apply the show again. Set a timeout to 30 seconds, 1 minute, etc and rerun all over again to slide tips in and out of the scene.
    - James Harris

    Author of:
    WhitePages, FlashCards (and FlashCards Lite), GPS Fix, Anonymous Texter, TripThat, and Mobile Florist

    Follow me on Twitter and Facebook
  6. shawalli's Avatar
    Posts
    83 Posts
    Global Posts
    85 Global Posts
       #6  
    hey James,
    I know it's been awhile since the last post to this thread. I got the CSS transitions stuff partially working (never could get mojo.animateStyle to work). When I activate the class change, the image im transitioning (no longer a canvas, just an img inside a div) instantly moves to the new spot. I'd like to see it smoothly scroll to that spot. Also, I DLed flashcards lite to look at your tips, but I don't know where to look to see tips.

    Thanks a bunch for your help so far!
  7. shawalli's Avatar
    Posts
    83 Posts
    Global Posts
    85 Global Posts
       #7  
    Alright James (and for all those intrepid devs following at home),
    I figured out how to do it! And boy do I love that webos uses webkit! So I basically used the css styles that you did, except that I added "-webkit-transform" for the movement.
    Code:
    #div {left:30px;}
    
    #div.showDiv {-webkit-transform: translate(30px,0); -webkit-transition: all 1s ease-in;}
    
    #div.hideDiv {-webkit-transform: translate(-30px,0); -webkit-transition: all 1s ease-in;}
    So originally, the "div" id (which uniquely named in my app, but for explanation, its called "div") just defines the div properties and where it is on the page. Therefore, #div.showDiv should only be assigned after it's been hidden. Anyway, simply assign the class to be #div.hideDiv to slide it to -30 px (aka off the screen to the left) over a duration of 1 second.

    And James, thanks so much for all your help with this!
  8. #8  
    Sorry, missed the responses here. But looks like you got it, awesome!

    Now hit me up with a PM when your app launches so I can see what you did.
    - James Harris

    Author of:
    WhitePages, FlashCards (and FlashCards Lite), GPS Fix, Anonymous Texter, TripThat, and Mobile Florist

    Follow me on Twitter and Facebook

Posting Permissions