CODEWITHSUNDEEP
wpfanimation
TalkingCode
TalkingCode

Reputation: 13557

WPF doubleanimation : animate in steps?

In my current application I have this little animation. It makes a full 360 degrees rotation of a canvas and works fine. 

<DoubleAnimation
 Storyboard.TargetName="WaitCanvas" 
 Storyboard.TargetProperty="(Canvas.RenderTransform).(TransformGroup.Children)[0]  
 .(RotateTransform.Angle)" 
 From="0" To="360" Duration="0:0:2"
 AutoReverse="False" RepeatBehavior="Forever" />

But the thing I want to do is not a smooth animation but animation is steps of 22.5 degrees each. How can this be done?

Upvotes: 5

Views: 5761

Answers (3)

kub1x
kub1x

Reputation: 3552

Adding the XAML example which I was actually searching for.

<Storyboard
    BeginTime="00:00:00"
    RepeatBehavior="Forever"
    Storyboard.TargetName="WaitCanvas" 
    Storyboard.TargetProperty="(Canvas.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)">
    <DoubleAnimationUsingKeyFrames Duration="0:0:2">
        <DoubleKeyFrameCollection>
            <DiscreteDoubleKeyFrame KeyTime="0:0:0.000" Value="0" />
            <DiscreteDoubleKeyFrame KeyTime="0:0:0.125" Value="22.5" />
            <DiscreteDoubleKeyFrame KeyTime="0:0:0.250" Value="45" />
            <DiscreteDoubleKeyFrame KeyTime="0:0:0.375" Value="67.5" />
            <DiscreteDoubleKeyFrame KeyTime="0:0:0.500" Value="90" />
            <DiscreteDoubleKeyFrame KeyTime="0:0:0.625" Value="110.5" />
            <!-- ... -->
        </DoubleKeyFrameCollection>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

Upvotes: 2

Jim McCurdy
Jim McCurdy

Reputation: 2052

Even easier, use the DoubleAnimation "By" property, as in:

<DoubleAnimation 
 Storyboard.TargetName="WaitCanvas"  
 Storyboard.TargetProperty="(Canvas.RenderTransform).(TransformGroup.Children)[0]   
 .(RotateTransform.Angle)"  
 From="0" To="360" By="22.5" Duration="0:0:2"
 AutoReverse="False" RepeatBehavior="Forever" />

Upvotes: -3

SLaks
SLaks

Reputation: 887225

You could use a DoubleAnimationUsingKeyFrames and make two keyframes for each increment of 22.5 degrees at the same point in time.

Upvotes: 5

Related Questions