Silverlight Objekt an Kreis entlang animieren

Mit Silverlight 3 kommen neue Animationstypen zb Bounce ( für Schwingen). Mir war schon immer ein anliegen mal eine Objekt an einem Kreis entlang zu animieren. Also ganz ohne Code nur per XAML.

Mit Blend lässt sich das ganz leidlich abbilden. Ein kleiner blauer Ball soll sich im Uhrzeiger Sinn bewegen. Die gestrichelten Linien sind für mich zur Hilfe, weil ich mit unterschiedlichen Animationstypen experimentiert habe.

image

Hier noch mein wunderbarer XAML Code. Wer genau hinsieht wird erkennen das die Bewegung zeitlich nicht linear ist, weil auf der Y Achse linear und auf X Circle animiert wird.

<Storyboard x:Name="Storyboard1" RepeatBehavior="Forever">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
    Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="100">
            <EasingDoubleKeyFrame.EasingFunction>
            <CircleEase EasingMode="EaseOut"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
    <EasingDoubleKeyFrame KeyTime="00:00:02" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
            <CircleEase EasingMode="EaseIn"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>

    <EasingDoubleKeyFrame KeyTime="00:00:03" Value="-100">
            <EasingDoubleKeyFrame.EasingFunction>
            <CircleEase EasingMode="EaseOut"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
    <EasingDoubleKeyFrame KeyTime="00:00:04" Value="00">
            <EasingDoubleKeyFrame.EasingFunction>
            <CircleEase EasingMode="EaseIn"/>
        </EasingDoubleKeyFrame.EasingFunction>
    </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames
     AutoReverse="true"
    BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
        <LinearDoubleKeyFrame KeyTime="00:00:02" Value="200"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
Kommentare sind geschlossen