Feed Icon  

Contact

  • Bryant Likes
  • Send mail to the author(s) E-mail
  • twitter
  • View Bryant Likes's profile on LinkedIn
  • del.icio.us
Get Microsoft Silverlight
by clicking "Install Microsoft Silverlight" you accept the
Silverlight license agreement

Hosting By

Hot Topics

Tags

Open Source Projects

Archives

Ads

Dog Ears in WPF/E

Posted in WPF/E at Thursday, 18 January 2007 02:34 Pacific Standard Time

While working on some WPF/E stuff for a side project of mine, I came across this post by Karsten Januszewski (Note: Karsten's blog is a must read). I find it interesting that I seem to learn a lot about what you can do in WPF/E mostly by reading people's Xaml. I didn't event know that the Storyboard element had a Completed attribute or that there was such a thing as a TriggerActionCollection.

Anyhow, I was playing around with the code posted there and I was actually trying to acheive something like the cool animations that you will find in the Kevin's Zap Scroller. The zap scroller has a animation that flows and is very cool looking. It is the dog ears experience model as Kathy explains:

In the real world, we have physics. We have inertia. Things bounce and stretch and squash. We have follow through. Imagine a dog with long floppy ears sprinting for a frisbee. Now picture the dog coming to a screeching halt in front of the disc. What happens to the ears? They keep going. Then they "bounce" back. And it's a big part of what separates a good animator from an amateur.  

I knew what she was talking about because had already watched all the iPhone demos based on the advice of Walt who notes that while you watch those videos:

Then keep this is mind.

  • Every single UI trick
  • Each animation
  • Every single blended window
  • How they merge video, animation and 2D graphics
  • Every single feature in the user interface on the iPhone can be created today in WPF. 

WPF gives you the tools to build application that look and feel like these screenshots.

What are you waiting for?

Now I agree that we can build all those things in WPF, however, I've been struggling with the dog ears effect in WPF/E. It is probably just because I don't know enough about animations and physics, but that didn't stop me from trying. One of the things that I think will be needed to achieve the effect is Key Frames. Key Frames simplify things a lot when you're trying to move an object around and need to use different speeds, etc. So I started with the animation found at the beginning of this post where Hans (via Karsten) is moving a block around on the screen using multiple animations with javascript waits inbetween (see the post above for the code and xaml). However, we can achieve the same thing simply using Key Frames. So instead of three Storyboards in a TriggerActionCollection we get this:

 <Storyboard>
  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Rectangle1" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:9" RepeatBehavior="Forever">
      <DoubleAnimationUsingKeyFrames.KeyFrames>
          <LinearDoubleKeyFrame Value="400" KeyTime="0:0:1" />
          <LinearDoubleKeyFrame Value="400" KeyTime="0:0:3" />
          <LinearDoubleKeyFrame Value="200" KeyTime="0:0:4" />
          <LinearDoubleKeyFrame Value="200" KeyTime="0:0:6" />
          <LinearDoubleKeyFrame Value="0" KeyTime="0:0:7" />
          <LinearDoubleKeyFrame Value="0" KeyTime="0:0:9" />
      </DoubleAnimationUsingKeyFrames.KeyFrames>
  </DoubleAnimationUsingKeyFrames>
 </Storyboard>

This will produce the following WPF/E animation (again, only on the site since my add-in doesn't work in the feeds):

Note how jerky the animation is. The square starts and stops instantly. Now we can get a little better just by adding in some more key frames that cause it to start and stop slower. This is a long, long way from an iPhone type dog-ear effect, but by using key frames we can start to move in that direction.

The xaml for this just adds in a few extra key frames and this gives it a little better animation. That is as far as I can take it today, but maybe you can take it farther and create something really cool by adding more key frames. Here is the final xaml.

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="Rectangle1" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:9" RepeatBehavior="Forever">
      <DoubleAnimationUsingKeyFrames.KeyFrames>
          <LinearDoubleKeyFrame Value="10" KeyTime="0:0:0.1" />
          <LinearDoubleKeyFrame Value="390" KeyTime="0:0:1" />
          <LinearDoubleKeyFrame Value="400" KeyTime="0:0:1.1" />
          <LinearDoubleKeyFrame Value="400" KeyTime="0:0:3" />
          <LinearDoubleKeyFrame Value="390" KeyTime="0:0:3.1" />
          <LinearDoubleKeyFrame Value="210" KeyTime="0:0:4" />
          <LinearDoubleKeyFrame Value="200" KeyTime="0:0:4.1" />
          <LinearDoubleKeyFrame Value="200" KeyTime="0:0:6" />
          <LinearDoubleKeyFrame Value="190" KeyTime="0:0:6.1" />
          <LinearDoubleKeyFrame Value="10" KeyTime="0:0:7" />
          <LinearDoubleKeyFrame Value="0" KeyTime="0:0:7.1" />
          <LinearDoubleKeyFrame Value="0" KeyTime="0:0:9" />
      </DoubleAnimationUsingKeyFrames.KeyFrames>
  </DoubleAnimationUsingKeyFrames>

Update: I upgraded my CSModule so that it will display multiple WPF/E files in a single post (before you only saw the red squae moving, now you should see a blue square as well).

Thursday, 18 January 2007 13:48:47 (Pacific Standard Time, UTC-08:00)
When I open your page from firefox v2.0, I need to install some missing plug in. Firefox couldn't found the missing plug in automatically so i have to install it manually.
Please advise, what plug in do i need to install?
Thanks
Joe
Friday, 19 January 2007 01:09:17 (Pacific Standard Time, UTC-08:00)
Hey Joe,

You can download the plugin for FireFox here:
http://www.microsoft.com/downloads/details.aspx?familyid=A3E29817-F841-46FC-A1D2-CEDC1ED5C948&displaylang=en

If you open the site in IE you will get the automatic link which installs the plugin for both...
Comments are closed.