1

Есть картинка (индикатор загрузки). Картинка подразумевает вращение на определенное количество градусов за такт (не плавное). Как это можно сделать? обычная DoubleAnimation вращает плавно.

<Image VerticalAlignment="Center" HorizontalAlignment="Center" Source="{StaticResource LoadingImage}" 
       Stretch="None" RenderTransformOrigin="0.5,0.5">
    <Image.RenderTransform>
        <RotateTransform x:Name="rotate"/>
    </Image.RenderTransform>
    <Image.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard>
                <DoubleAnimation By="45" To="360" Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" 
                                     Duration="0:0:2" RepeatBehavior="Forever">
                </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

UPD

Под "не плавное" я имею ввиду мгновенное. То есть мне нужно, чтобы картинка вращалась по кругу непрерывно на 45 градусов за такт. Такт должен происходить мгновенно. То есть было 0 градусов, стало сразу 45. Через какое то время (например 0.2 секунды) еще +45 и тд...

6
  • 2
    Публикуйте в вопросе нерабочий код, который можно было бы подправить. Уважайте коллег.
    – anme
    3 мар 2017 в 15:32
  • @anme, держите. Просто скорее всего этот код имеет мало общего с решением и у кого то просто есть готовое. Поэтому не посчитал нужным выкладывать сразу
    – iRumba
    3 мар 2017 в 15:35
  • Смотрите на DoubleAnimationUsingKeyframes. Я напишу позже, если никто не успеет до меня.
    – VladD
    3 мар 2017 в 17:24
  • @VladD, я наверное плохо с ним разобрался, но если я правильно понимаю, с DoubleAnimationUsingKeyframes мне придется каждый кадр прописывать отдельно для решения моей задачи. Или нет?
    – iRumba
    3 мар 2017 в 17:43
  • @iRumba: Хм, ну это да, придётся прописывать все кадры. А как иначе? Значение KeyFrame может быть любое по идее. Ну или надо думать не через KeyFrame, да.
    – VladD
    3 мар 2017 в 17:52

3 ответа 3

2

Вам нужна равномерная анимация, но по шагам. Это нестандартная анимация, поэтому обратимся к Священному Источнику Знаний. В нём советуют создать свой 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>

Результат:

кручу-верчу, прогресс показать хочу

4
  • Почти идеально. Почти, потому что тут все же нужно обрезать количество кадров в секунду. Ведь насколько я понимаю, InterpolateValueCore будет выполняться 60 раз в секунду. Так как плавная анимация тут не нужна, это лишние расходы ресурсов. Хотя это навскидку. Пока еще не добавил в проект.
    – iRumba
    4 мар 2017 в 16:03
  • @iRumba: Ну, поскольку результирующее значение угла будет одно и то же, думаю, что больших расходов не должно быть. Это ж только вычисление, а не поворот картинки.
    – VladD
    4 мар 2017 в 20:25
  • Больших не будет. но в моем случае эта анимация будет крутиться в момент запроса к базе данных. База локальная SQLite, то есть выполняться запрос будет не на отдельный сервер и даже не в другом процессе. Наверное, я пересидел за старым железом, но таких вот напрасных расходов пытаюсь избегать, когда это не доставляет неудобств, конечно.
    – iRumba
    5 мар 2017 в 15:48
  • @iRumba: А вы попробуйте выключать видимость анимированного элемента. При этом картинка, понятно, обновляться не будет. А 60 изменений double'а в секунду на фоне чтения из базы — ноль.
    – VladD
    5 мар 2017 в 16:54
2

На данный момент решил таким образом

<Storyboard Timeline.DesiredFrameRate="8">
    <DoubleAnimation By="45" To="360" IsAdditive="True" Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" 
                         Duration="0:0:1" RepeatBehavior="Forever">
    </DoubleAnimation>
</Storyboard>

Timeline.DesiredFrameRate="8" означает 8 кадров в секунду. Анимация работает 1 секунду и за это время поворачивается 8 раз (от 0 до 360 по 45 градусов за раз).

Мне не очень нравится это решение, но пока лучше не нашел.

0

Добавьте Easing function к Вашей анимации.

<DoubleAnimation By="45" To="360" Storyboard.TargetName="rotate" Storyboard.TargetProperty="Angle" 
                                 Duration="0:0:2" RepeatBehavior="Forever">
    <DoubleAnimation.EasingFunction>
        <CircleEase EasingMode="EaseIn" />
    </DoubleAnimation.EasingFunction>
</DoubleAnimation>
2
  • И что это? Просто скорость увеличивается.
    – iRumba
    3 мар 2017 в 16:23
  • Я обновил вопрос... добавил уточнение. Вы не правильно поняли что я имел ввиду.
    – iRumba
    3 мар 2017 в 16:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.