Создание анимации загрузки WPF

609

28 августа 2017, 05:42

Задача: сделать крутящийся кружок, пока приложение будет делать свои дела. Для этой задачи пробовал использовать gif, но есть разные проблемы, после пробовал использовать font-awesome, но в итоге получаю лагающую иконку. Начал смотреть на англ форумах как это сделать в итоге наткнулся на тонны кода, который непонятно куда и как подключать (например вот https://stackoverflow.com/questions/6359848/wpf-loading-spinner). Хотел бы узнать как создать простую иконку, которая будет плавно вращаться. Пример: в хроме во вкладке слева при загрузке страницы вертится такая.

Answer 1

Возьмите любой элемент, который вы хотите вращать, я взял Image:

<Image Source="smile.png"
       Height="50" Width="50"/>

Мы будем анимировать его вращение, поэтому нужно добавить трансформацию вращения:

<Image Source="smile.png"
       Height="50" Width="50">
    <Image.RenderTransform>
        <RotateTransform x:Name="rotate"
                         CenterX="25"
                         CenterY="25"/>
    </Image.RenderTransform>
</Image>

Дадим ей имя, чтобы удобно было обращаться и укажем центр вращения.

Теперь нужно запустить DoubleAnimation для свойства трансформации Angle, ну давайте сделаем это, например, на событие элемента Loaded, добавим соответствующий триггер:

<Image Source="smile.png"
       Height="50" Width="50">
    <Image.RenderTransform>
        <RotateTransform x:Name="rotate"
                         CenterX="25"
                         CenterY="25"/>
    </Image.RenderTransform>
    <Image.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <DoubleAnimation Storyboard.TargetName="rotate"
                                     Storyboard.TargetProperty="Angle"
                                     From="0" To="360" Duration="0:0:1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Image.Triggers>
</Image>

Готово!