wpf - 为 WPF 路径的单个点设置动画

Question

我有一条路径，基本上是一个三角形：

<Path Data="M0,0 15,0 15,25" Fill="{Binding Background}"/>

我想要一个数据触发器（绑定到一个布尔值），它将启动一个动画，当布尔值为真时将折叠这个三角形，并在它为假时恢复它。我还没有弄清楚如何做到这一点。

具体来说，沿着这个方向折叠：0,0 15,0 15,25 5,0 15,0 15,25 10,0 15,0 15,25 15,0 15,0 15,25

谢谢你的帮助！

score 3 · Accepted Answer

好吧，我用一种叫做 Expression Blend 的小作弊方法做到了。但是你可以看到它是如何完成的。总是有选择的。

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
    <Storyboard x:Key="CollapseTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.748"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0.195"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-0.007"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20.25"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="64.75"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="81"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="ExpandTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path">
            <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0.195"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="0.748"/>
            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">
            <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="64.75"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="20.25"/>
            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="checkBox">
        <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="checkBox">
        <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/>
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
    <Path x:Name="path" Data="M159.5,239.5 L399.5,239.5 279.5,79.5 z" Fill="#FF0202FF" Margin="159.5,79.5,223.5,201.5" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/>
</Grid>
</Window>

当您有故事板时，您可以随时更改触发器。

如您所愿，基于布尔值。例如像这样：

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
    <Storyboard x:Key="CollapseTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.748"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0.195"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="-0.007"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="20.25"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="64.75"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="81"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="ExpandTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="path">
            <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="0.195"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="0.496"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="0.748"/>
            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="path">
            <SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="64.75"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1" Value="40.5"/>
            <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="20.25"/>
            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Control>
<Control.Template>
    <ControlTemplate>
            <Grid x:Name="LayoutRoot">
                <Path x:Name="path" Data="M159.5,239.5 L399.5,239.5 279.5,79.5 z" Fill="#FF0202FF" Margin="159.5,79.5,223.5,201.5" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/>
            </Grid>
        <ControlTemplate.Triggers>
            <Trigger SourceName="checkBox" Property="IsChecked" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Control.Template>
</Control>
</Window>

编辑

请记住一件事。如果您想将触发器直接应用于元素，则只能是EventTrigger. 如果你想使用 a TriggerorDataTrigger你必须把它放入Styleor ControlTemplate。这就是我添加Control到第二个示例的原因。

score 0 · Accepted Answer

这是我上面代码的简化版本。我取出了多余的不需要的关键帧，还取出了未使用的额外变换。最后，我取出了将其滑动到一侧的额外动画，而只是将 RenderTransformOrigin 设置为 1（最初为 0.5）。所有的功劳仍将归于 Viktor La Croix 的原始来源！

 <Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Width="640" Height="480">

<Window.Resources>
    <Storyboard x:Key="CollapseTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="path">
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="ExpandTriangel">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="path">
            <SplineDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
    <EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="checkBox">
        <BeginStoryboard x:Name="CollapseTriangel_BeginStoryboard" Storyboard="{StaticResource CollapseTriangel}"/>
    </EventTrigger>
    <EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="checkBox">
        <BeginStoryboard x:Name="ExpandTriangel_BeginStoryboard" Storyboard="{StaticResource ExpandTriangel}"/>
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
    <Path x:Name="path" Data="M0,0 15,0 15,25" Fill="#FF0202FF" HorizontalAlignment="right" Stretch="Fill" Stroke="Black" RenderTransformOrigin="1,0.5">
        <Path.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
    <CheckBox x:Name="checkBox" Content="CheckBox" HorizontalAlignment="Left" Margin="80,0,0,201.5" VerticalAlignment="Bottom"/>
</Grid>

wpf - 为 WPF 路径的单个点设置动画

2 回答 2

Related

Reference