iphone development blog

Tuesday, April 15, 2008 @ 12:27 PM

Animation on the iPhone, You know you missed me.

With the iPhone SDK out, and iPhone applications moving away from the web, I never thought I'd post here again. Lucky for you, we received an awesome question from Dan in the UK about Animation on the iPhone. Yay Dan!

Hey iPhonemind.com guys,

I was wondering if you could help me with a quick question I have pondering about in my mind relating to the wonderful invention called iPhone. I'm a multimedia student at Stafford College in the UK and having learnt the "designer" side of computing fancied turning to the dark side and have a go at programming. I've done bits of programming here and there before and know Action-script pretty well etc, but since the iPhone currently doesn't support flash yet here is where my question lies.
I want to create an interactive application where the user taps the screen and random squiggles or images will pop up to create a sort of abstract image animation, I've been looking on Apple's Developer website and had a look through most content on their but to no avail I'm still not sure on what the right sort of API's or frameworks to use. The UIKit would be a major player in the making of it but I'm not sure what else to read up on, just hoping someone out there might be able to point out roughly what I should be looking for?
The application is going to include shapes, colours, images, video maybe, sound hopefully, vector graphics and maybe a bit of text, the whole thing is going to be totally random for a college project and have no real purpose other than being one of them cool things you show your mates.

Your website is great by the way, loads of useful tips and tricks that I will be having a tinker with after I've figured all this out.

Many Thanks,

Dan


Well Dan, That's an excellent question! Since we'll never truly know when Flash will become available on the iPhone, I'm very glad you asked. We've all seen ways to animate a web page through the use of AJAX [cough]dhtml[/cough], including my post on creating a Basic AJAX Scroll Animation w/ YUI that was featured on the YUI developers blog.

As of right now, AJAX is the way to go for animation on the web. Here's a few of my favorites...


  • Yahoo! UI Library: Animation - A little more advanced, but one of my favorites.

  • Script.Aculo.Us - Simple to implement, a little more restricted.

  • jQuery - Takes time to learn, but definitely worth the effort.

  • MooTools - This one seems to be a popular one, maybe not the best for the iPhone, but definitely fun to work with.



What I suggest is that you sketch out your idea, step by step, then determine from the libraries listed above which would work best for you. JavaScript is relatively simple, and with your ActionScript experience it should be a quick run-through for you. Try to stick to one library to reduce load times. While the iPhone is an amazing device, the technology it runs on (EDGE) isn't completely up to speed for large applications.

I hope this helps you out Dan, I look forward to answering more questions like this. If you have a question about iPhone development, hit us up at ask [at] iphoneminds.com.

// Jay, aka W3prodigy

Labels: , , , , , ,


MindComet at 12:27 PM - View Post | 1 comments




Monday, December 17, 2007 @ 5:19 PM

Basic AJAX Scroll Animation w/YUI

Basic AJAX Scroll Animation

Going through someone else's code is an art, you have to get into the developers mind and discover what he or she was thinking when writing the piece. While scavenging the Internet for an AJAX scroll animation, similar to that of the iPhone, I was so disgusted by the code I saw that I just wrote my own.

Some key things I had to keep in mind while writing this javascript code were, "How can I dynamically make one object slide off the screen while a second object slides onto the screen?" And "How can I keep users from going psychotic with my slider?"

To make the code dynamic, that was the easy part, I created a function calling out to the Yahoo UI Library (an AJAX source library). But to restrict when they user could slide the objects, that was the tricky part.

The YUI Library has three animation events that would allow me to limit when the slider would, well, slide...
  • onComplete

  • onStart

  • onTween

It was actually rather interesting how these three events functioned together. Checking if the animation is active (ie. isAnimated();) proved to be a thought provoking process. The onStart function would always return false while checking isAnimated, because onStart does a check right when you start the animation, not yet animated but almost animated. The onComplete function did exactly the same thing while checking isAnimated, it's done being animated. While the onTween function checks for every single tween or frame, it always returns true.

You can download the following YUI files from the Yahoo Developer Site (http://developer.yahoo.com/yui/):

yui/build/yahoo/yahoo.js
yui/build/event/event.js
yui/build/dom/dom.js
yui/build/animation/animation-min.js

<script type="JavaScript">
var movethis,target,x,y,goodToGo=true;

var waitForIt = function() {
 var onTheMove = this.isAnimated();
 if (onTheMove == true) {
  goodToGo=false;
 } else {
  goodToGo=true;
 }
}

function slide(moveThis, x, y) {
 if (goodToGo == true) {
  moveThis = document.getElementById(moveThis);
  if (x != null && y != null) {
   var anim = new YAHOO.util.Motion(moveThis, { 
points: { by: [x, y] } });
  }
  anim.onTween.subscribe(waitForIt);
  anim.onComplete.subscribe(waitForIt);
  anim.animate();
 }
}
</script>


// Jay, aka W3prodigy

Labels: , , , ,


MindComet at 5:19 PM - View Post | 1 comments