Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Danneman101

macrumors 6502
Original poster
Aug 14, 2008
361
1
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.
 
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.
 
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.

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:

Code:
// 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);
			}
		} 

	</script>


// And the html..


	<div name="div_AnimGuide" onClick="Animate('2')" style="width: 300px; height: 300px;">
		<img src="AnimGuide_frame1.png" />
	</div>

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?
 
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:

Code:
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];
 
Nice - preloading the images into cache did indeed get rid of the flicker - thanks :)

Found a great tutorial on the subject here:
http://www.schrenk.com/js/

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
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.