Анимация кнопки в XAML

203
30 января 2018, 07:50

Сделал примитивную кнопку с анимацией на MouseEnter и MouseLeave. Если быстро провести мышкой через кнопку насквозь, то анимация MouseEnter запустится, потом прервётся и сразу же начнётся MouseLeave. Нужно чтобы такого не было. В идеале нужно чтобы анимация при событии MouseLeave начиналась там, где закончилось MouseEnter (например, если провести мышкой через кнопку насквозь то `MouseEnter сработает, доработает до 50 мс, и от этого же места начнётся обратная анимация).

Код:

<ControlTemplate x:Key="Exit" TargetType="{x:Type Button}">
    <ControlTemplate.Resources>
        <Storyboard x:Key="MEnter">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="ellipse2">
                <SplineDoubleKeyFrame KeyTime="0" Value="2"/>
                <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="11" KeySpline="0.7,0.1,1,0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ellipse2">
                <SplineDoubleKeyFrame KeyTime="0" Value="2"/>
                <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="11" KeySpline="0.7,0.1,1,0"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse2">
                <SplineColorKeyFrame KeyTime="0" Value="#FF644B4B"/>
                <SplineColorKeyFrame KeyTime="0:0:0.3" Value="Red" KeySpline="0.3,0,1,0"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse2">
                <SplineColorKeyFrame KeyTime="0" Value="#FF644B4B"/>
                <SplineColorKeyFrame KeyTime="0:0:0.3" Value="Red" KeySpline="0.3,0,1,0"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="MLeave">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="ellipse2">
                <SplineDoubleKeyFrame KeyTime="0" Value="11"/>
                <SplineDoubleKeyFrame KeySpline="0.7,0.1,1,0" KeyTime="0:0:0.3" Value="2"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="ellipse2">
                <SplineDoubleKeyFrame KeyTime="0" Value="11"/>
                <SplineDoubleKeyFrame KeySpline="0.7,0.1,1,0" KeyTime="0:0:0.3" Value="2"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse2">
                <SplineColorKeyFrame KeyTime="0" Value="Red"/>
                <SplineColorKeyFrame KeyTime="0:0:0.3" Value="#FF644B4B" KeySpline="0.4,0.7,1,0"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse2">
                <SplineColorKeyFrame KeyTime="0" Value="Red"/>
                <SplineColorKeyFrame KeyTime="0:0:0.3" Value="#FF644B4B" KeySpline="0.4,0.7,1,0"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </ControlTemplate.Resources>
    <Grid>
        <Grid.Effect>
            <DropShadowEffect BlurRadius="5" ShadowDepth="0" Direction="270" Opacity="0.5"/>
        </Grid.Effect>
        <Ellipse x:Name="ellipse" Fill="#FF644B4B" HorizontalAlignment="Stretch" Height="Auto" Stroke="#FF644B4B" StrokeThickness="2" VerticalAlignment="Stretch" Width="Auto" Margin="2"/>
        <Ellipse x:Name="ellipse2" Fill="#FF644B4B" HorizontalAlignment="Center" Height="2" Stroke="#FF644B4B" StrokeThickness="2" VerticalAlignment="Center" Width="2" Margin="2"/>
    </Grid>
    <ControlTemplate.Triggers>
        <EventTrigger RoutedEvent="UIElement.MouseEnter">
            <BeginStoryboard x:Name="MEnter_BeginStoryboard1" Storyboard="{StaticResource MEnter}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.MouseLeave">
            <BeginStoryboard x:Name="MEnter_BeginStoryboard" Storyboard="{StaticResource MLeave}"/>
        </EventTrigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Margin" TargetName="ellipse" Value="5"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
READ ALSO
Визуализация графа с помощью Graphviz

Визуализация графа с помощью Graphviz

Как отобразить на форме граф с помощью данной библиотеки?

216
Как конвертировать строку в один из типов OleDbType на C# ADO.NET?

Как конвертировать строку в один из типов OleDbType на C# ADO.NET?

Создаю таблицу dbf, часть данных вытягивается из других таблиц, а часть нужно ввести вручнуюСтолкнулся с проблемой, что при считывании данных...

201
Не удается получить атрибут value

Не удается получить атрибут value

Есть html страница и от туда нужно получить значение атрибута value из inputДля этого я использую cefSharp

215