"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?

Sinatr · Answer 1 · 2015-11-06T14:45:46.737

1

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.

edited Nov 06 '15 at 14:45

answered Nov 06 '15 at 14:35

Sinatr

20,892
15
90
319

Can you demonstrate the easing function? I am looking for how to step, yes. – Thomas Nov 06 '15 at 14:38
It's pretty easy, see edit. I like myself `ElasticEase` (spring-like effect). – Sinatr Nov 06 '15 at 14:47
doesn't just setting "By" reset the animation to it's original position after the animation? – Thomas Nov 06 '15 at 15:03
1

Nope. `By` is used when you can't/don't want to specify `To`. You have to read more about animations. Finished animation (unless removed) can hold the last value or not. Read about this [here](https://msdn.microsoft.com/en-us/library/vstudio/ms752312(v=vs.100).aspx#fillbehaviorsection). But in this case animation is indefinite. Btw, 0° = 360 ° = 720° = ... until `int32.MaxValue`. I wouldn't worry about overflow (if you decide to use `By`). – Sinatr Nov 06 '15 at 15:19
I appreciate the help! Thank you. I found something closer to what I was looking for (which I have posted as an answer). I will +1 your answer, though. – Thomas Nov 06 '15 at 15:29

Thomas · Accepted Answer · 2015-11-06T17:56:42.380

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>

"By" RenderTransform Angle Property Ignored on Image

2 Answers2