xaml - WPF: character walking across screen animation? -

xaml - WPF: character walking across screen animation? -

i'm trying work out how create animation of character walking across screen using wpf storyboard (similar animated gif).

i have multiple images of character in different stages of walking action , best have been able utilize blend show , hide different images @ different times. resulting animation not particularly smooth.

i create smoother compressing timeline wondering if there improve or more abstracted way approach this? have searched, not find relevant tutorial or example.

i have seen below questions, still unclear me how this:

how animate man walking in xaml page , showing banner user in windows phone 8 and-showing-a-banner-to-the-user-in

smooth animation in look blend window store apps png images

how can utilize objectanimationusingkeyframes pure c#?

props @icebat, sprite animation way go.

excellent illustration here: http://www.spottedzebrasoftware.com/blog/xaml-spritesheet-animation.html

essentially, sprite sheet character different stages of animation. set wpf element can filled imagebrush on page , apply translatetransform imagebrush show different images on sprite sheet @ regular intervals.

for posterity, code illustration looks like:

xaml

<grid grid.row="1" x:name="contentroot" margin="19,9.5,19,0"> <rectangle width="52" height="40"> <rectangle.fill> <imagebrush imagesource="/assets/images/animations/sprite_sheet.png" stretch="none" alignmentx="left" alignmenty="top"> <imagebrush.transform> <translatetransform x:name="spritesheetoffset" x="0" y="0" /> </imagebrush.transform> </imagebrush> </rectangle.fill> </rectangle> </grid>

code behind

private const int numberofcolumns = 1; private const int numberofframes = 8; private const int framewidth = 54; private const int frameheight = 40; public static readonly timespan timeperframe = timespan.fromseconds(1 / 60f); private int currentframe; private timespan timetillnextframe; private void onupdate(object sender, object e) { this.timetillnextframe += timespan.fromseconds(1 / 60f); if (this.timetillnextframe > timeperframe) { this.currentframe = (this.currentframe + 1 + numberofframes) % numberofframes; var row = this.currentframe % numberofcolumns; var column = this.currentframe / numberofcolumns; this.spritesheetoffset.x = -column * framewidth; this.spritesheetoffset.y = -row * frameheight; this.timetillnextframe = timespan.fromseconds(0); } } protected override void onnavigatedto(navigationeventargs e) { this.navigationhelper.onnavigatedto(e); compositiontarget.rendering += this.onupdate; } protected override void onnavigatedfrom(navigationeventargs e) { this.navigationhelper.onnavigatedfrom(e); compositiontarget.rendering -= this.onupdate; }

wpf xaml animation