How can I animate a 2D bar (health bar for example) by CROPPING its width?

Let say I have this image that I want to use as a bar when it is full. How I can make its width decrease gradually to zero without using transform.localScale()?

What I have thinking so far is to create a bunch of images for every 1 pixel decrease on its width and then package it into a sprite sheet. However, I think this is not very intuitive, so I would like to know if there is another way to create this kind of animation. Thanks!

 

I have skimmed into the tutorial before. The thing is the author slides the health bar position. What I want is for my health bar to be cropped by one pixel in the end every time a value decreased.

If you see at my example health bar above, using the method this video mentioned will make the white part slides in to left every time a value decreased. What I want is for the white part of the bar to be gradually "deleted" when the value decreased.

 

The new UI contains an Image component supporting this behaviour. That's what you should use ideally.

See http://docs.unity3d.com/ScriptReference/UI.Image.html for API and http://docs.unity3d.com/Manual/script-Image.html for a visual guide