"By" RenderTransform Angle Property Ignored on Image

Question

I've consulted a number of sources on rotating an image using the WPF's declarative XAML format, namely, this pretty solid blog post, Rotate an Image in WPF Using Just XAML, and an SO question: wpf rotate image around center.

As a result, my XAML - which is rotating the image - looks like this:

<UserControl.Resources>
        <Style x:Key="Spinner" TargetType="Image">
            <Setter Property="Image.RenderTransform">
                <Setter.Value>
                    <RotateTransform CenterX="13" CenterY="13" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                        Storyboard.TargetProperty="RenderTransform.Angle"
                                        By="90"
                                        To="360"
                                        Duration="0:0:4"
                                        RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

The problem I am having is that the rotation appears fluid and continuous, rather than by the 90 deg. specified by the By property. I am attempting to rotate a particular portion of the image to a particular quadrant on each animation.

The answer, https://stackoverflow.com/a/23699219/3469725, gets close to what I need; however, the image is rotated once and is not continuously animated.

Is this possible with WPF and is the By property the correct property to be using?

Answer 1

I was approaching this in an entirely "wrong" way. Here is my solution which does not use the DoubleAnimation XAML property, but, rather, the DoubleAnimationUsingKeyFrames - an entirely different approach. For what I am attempting to do - rotate by 90 deg. intervals - this is a simple solution that does not require use of easing and gives more of a "snapping" effect.

<Style.Triggers>
    <Trigger Property="IsEnabled" Value="True">
        <Trigger.EnterActions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames
                                    Storyboard.TargetProperty="RenderTransform.Angle"
                                    Duration="0:0:4"
                                    RepeatBehavior="Forever">
                        <DoubleKeyFrameCollection>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="180"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="270"/>
                            <DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="360"/>
                        </DoubleKeyFrameCollection>
                   </DoubleAnimationUsingKeyFrames>
               </Storyboard>
          </BeginStoryboard>
      </Trigger.EnterActions>
  </Trigger>
</Style.Triggers>

Answer 2

There is no To + By combination (at least for DoubleAnimation).

It's not really clear what you expect. You have initial value (e.g. 0) and you set Duration and To, which is enough to calculate how animation will change the angle value. By is meaningless disregards which value you will set.

If you need some kind of steps, then you have to do it with series of fast animations: rotate 90°, wait (or use easing function), rotate another 90°, etc.

<Storyboard RepeatBehavior="Forever" >
    <DoubleAnimation To="90" Duration="0:0:1" ... >
        <DoubleAnimation.EasingFunction>
            <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="1.8" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    ... more animations to rotate for 360 degrees if steps need different animation
    ... otherwise use `By` (without `To`) and repeat above animation it indefinitely
</Storyboard>

See for more about easing functions. Just try some until you understand how they work and find the best fitting for your animation.