Use webkit for flip-pad animation?

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

  1. Danneman101 macrumors 6502

    Joined:
    Aug 14, 2008
    #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.
     
  2. jnic macrumors 6502a

    Joined:
    Oct 24, 2008
    Location:
    Cambridge
    #2
    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

    Joined:
    Aug 14, 2008
    #3
    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?
     
  4. jnic macrumors 6502a

    Joined:
    Oct 24, 2008
    Location:
    Cambridge
    #4
    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];
     
  5. Danneman101 thread starter macrumors 6502

    Joined:
    Aug 14, 2008
    #5
    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
     

Share This Page