Search code examples
animationwindows-8microsoft-metroexpression-blend

Follow a curved path with an Image


I am trying to follow a path with an image in a Windows Store App. I want the image to follow that path and rotate while it follows it. Think in a plane doing a curve or something like this.

Among tutorials for silverlight/wpf, I have found several things that I don't have in a windows store app, such as: DoubleAnimationUsingPath or MatrixAnimationUsingPath or even PathListBox.

I have also tried to do that animation in Blend (although my experience in the windows world is small, the experience in blend is worse) but I can't even do Path -> Make Layout Path.

How can I do the something like the unicycle animation in a windows metro app?

EDIT

I want to use a path because I want to generate those paths randomly. Doing key frames in blend by hand works for a specific controlled path. However, generate those key frames randomly seems a lot more work that simply generate a random arc path that can be followed.


Solution

  • I ended up porting the Petzold solution (the solution Hermit Dave gave and that I was trying to avoid).

    However, I had to do some changes.

    I passed the "xFormUnicycleMan" MatrixTransform as a depdendency property of the MatrixAnimationUsingPath with:

    TargetElement="{Binding ElementName=xformUnicycleMan}"
    

    Then, in the OnCompositionTargetRendering I get it and I have modified the values I need to take using the following:

    MatrixTransform matrixTransform = this.TargetElement as MatrixTransform;
    PropertyPath targetProperty = new PropertyPath("MatrixProperty");
    PropertyInfo fieldInfo = 
        matrixTransform.GetType().GetRuntimeProperty(targetProperty.Path);  
    DependencyProperty dependencyProp = 
        fieldInfo.GetValue(matrixTransform) as DependencyProperty;
    

    Thanks for the help provided from @Miek.

    If someone has a better solution I would apreciate.