iOS Use webkit for flip-pad animation?

[Danneman101]

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.

 

[jnic]

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.

 

[Danneman101]

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 ), 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);
			}
		} 

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

 

[jnic]

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];

 

[Danneman101]

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