Вам нужна равномерная анимация, но по шагам. Это нестандартная анимация, поэтому обратимся к Священному Источнику Знаний. В нём советуют создать свой KeyFrame
. Этим и займёмся.
Мы унаследуемся от DoubleKeyFrame
, так как мы анимируем свойство типа double
. Нам нужно свойство, хранящее количество частей, положим его в стандартное DependencyProperty
NumberOfParts
. Ещё нам нужно реализовать абстрактные методы CreateInstanceCore
(который просто клонирует наш объект, для него мы положим защищённый конструктор), и самое главное — метод InterpolateValueCore
, в котором и будет наша логика вычисления значения.
class StepwiseDoubleKeyFrame : DoubleKeyFrame
{
public StepwiseDoubleKeyFrame() { }
protected StepwiseDoubleKeyFrame(double value, KeyTime keyTime, int numberOfParts) :
base(value, keyTime)
{
NumberOfParts = numberOfParts;
}
protected override Freezable CreateInstanceCore() =>
new StepwiseDoubleKeyFrame(Value, KeyTime, NumberOfParts);
protected override double InterpolateValueCore(double baseValue, double keyFrameProgress)
{
var fullDiff = Value - baseValue; // полный путь, который нужно пройти за целый фрейм
// в keyFrameProgress текущее время фрейма, от 0 до 1.
// считаем, в какую из частей мы сейчас попадаем.
// например, если у нас 6 частей, а время между 4/6 и 5/6, по показываем 4/6
var currentPart = Math.Floor(keyFrameProgress * NumberOfParts) / NumberOfParts;
return baseValue + currentPart * fullDiff;
}
public int NumberOfParts
{
get { return (int)GetValue(NumberOfPartsProperty); }
set { SetValue(NumberOfPartsProperty, value); }
}
public static readonly DependencyProperty NumberOfPartsProperty =
DependencyProperty.Register(
"NumberOfParts", typeof(int), typeof(StepwiseDoubleKeyFrame),
new PropertyMetadata(4)); // по умолчанию 4 части
}
Теперь наш XAML выглядит так:
<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="..."
RenderTransformOrigin="0.5,0.5" Width="75">
<Image.RenderTransform>
<RotateTransform x:Name="Rotation"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="Rotation" Storyboard.TargetProperty="Angle"
Duration="0:0:1" RepeatBehavior="Forever">
<local:StepwiseDoubleKeyFrame
KeyTime="100%" Value="360" NumberOfParts="8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
Результат:

DoubleAnimationUsingKeyframes
. Я напишу позже, если никто не успеет до меня.DoubleAnimationUsingKeyframes
мне придется каждый кадр прописывать отдельно для решения моей задачи. Или нет?KeyFrame
может быть любое по идее. Ну или надо думать не черезKeyFrame
, да.