Use webkit for flip-pad animation?

Discussion in 'iOS Programming' started by Danneman101, Feb 11, 2009.

  1. Danneman101 macrumors 6502

    Aug 14, 2008
    Is it possible to use webkit to animate between various images, much like a flip-pad animation where a new image takes the place of an old?

    From what Ive read about -webkit-animation it seems it can only do stuff to one single image, not switch between them. Is that correct, or have I missed something?

    Basically what I want to do is a gif-animation but with webkit instead, flipping between the various frames (or images), since uiwebview does not support gif-animations.
  2. jnic macrumors 6502a

    Oct 24, 2008
    If it's something as part of a larger page, you're probably better off just using JavaScript. If you're just trying to place an animated image in your app then take a look at UIImageView's animationImages.
  3. Danneman101 thread starter macrumors 6502

    Aug 14, 2008
    I thought Id try what I thought was the easiest path (since Im worse at objc than at js :p), and tried this code for flipping trough images to make an animation:

    // The javascript
    	<script type="text/javascript">
    		function Animate(frameNr)
    			// Max 5 frames
    			if (frameNr < 6)
    				// Switch to next frame
    				document.getElementsByName('div_AnimGuide')[0].innerHTML =  "<img src='AnimGuide_frame" + frameNr + ".png' />";
    				// Next frame
    				frameNr += 1; 
    				// Recursively call this method every 1 sec
    				setTimeout("Animate('frameNr')", 1000);
    // And the html..
    	<div name="div_AnimGuide" onClick="Animate('2')" style="width: 300px; height: 300px;">
    		<img src="AnimGuide_frame1.png" />
    However, the animation was way too flickery for it to be a smooth animation. It seems every time a new image is loaded using this method the old one is emptied out creating a blank screen for some miliseconds, making this useless for this kind of animations..

    Ill read up on UIImagesViews animationimages - that is if there is no better way to solve this with javascript that you know of?
  4. jnic macrumors 6502a

    Oct 24, 2008
    Are you preloading images? If not, Google for something like "javascript image preload", it should get rid of the flicker :)

    Here's some example Obj-C for animation using a UIImageView if you decide that's easier:

    UIImageView *yourAnimation = [[UIImageView alloc] initWithFrame:yourFrame];
    // Your animation images.
    NSArray *images = [NSArray arrayWithObjects:@"image1.png", @"image2.png", nil];
    yourAnimation.animationImages = images;
    yourAnimation.animationDuration = 1.0; // Seconds.
    [yourAnimation startAnimating];
  5. Danneman101 thread starter macrumors 6502

    Aug 14, 2008
    Nice - preloading the images into cache did indeed get rid of the flicker - thanks :)

    Found a great tutorial on the subject here:

    And thanks for the objc-method as well. However, since my whole project centers on webview I think its better to place as much of the code inside the various html-pages getting loaded into the webview.

    Well, the other reason being I still suck at objc :p

Share This Page