WPF按钮点击实现双夹爪同步旋转动画问题求助

原代码核心问题 #

• 未定义Storyboard静态资源，Button触发器引用无效
• 夹爪初始旋转角度设置错误（ClampR初始为-45°、ClampL初始为45°），不符合需求的初始0°状态
• 动画目标属性路径错误：TransformGroup中的RotateTransform是集合元素，直接使用LayoutTransform.(RotateTransform.Angle)无法正确定位到目标旋转角度
• 事件触发逻辑分散：在Path上监听Button.Click事件不合理，应统一在触发按钮中管理动画
• 两个夹爪混用RenderTransform和LayoutTransform，建议统一用RenderTransform（避免影响布局计算，性能更优）

修复后的完整代码 #

<UserControl x:Class="WPF_AnimatedLift.View.Prozess"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WPF_AnimatedLift.View" 
             xmlns:viewmodel="clr-namespace:WPF_AnimatedLift.ViewModel"
             mc:Ignorable="d" 
             d:DesignHeight="600" d:DesignWidth="1000">
    <UserControl.Resources>
        <!-- 定义同步旋转的故事板 -->
        <Storyboard x:Key="ClampCloseStoryboard">
            <!-- 左夹爪：0° → 45° -->
            <DoubleAnimation
                Storyboard.TargetName="ClampLRotate"
                Storyboard.TargetProperty="Angle"
                From="0"
                To="45"
                Duration="0:0:0.5"
                FillBehavior="HoldEnd"/>
            <!-- 右夹爪：0° → -45° -->
            <DoubleAnimation
                Storyboard.TargetName="ClampRRotate"
                Storyboard.TargetProperty="Angle"
                From="0"
                To="-45"
                Duration="0:0:0.5"
                FillBehavior="HoldEnd"/>
        </Storyboard>
    </UserControl.Resources>

    <Canvas x:Name="canvas" Margin="0,0,-163,-83">
        <!-- 右夹爪 -->
        <Path x:Name="ClampR" Fill="#FF000000" StrokeThickness="2.12787" 
              Data="M 524.2207 473.57227 L 524.2207 563.57227 L 137.14258 563.57227 L 137.14258 652.14258 L 571.42773 652.14258 L 571.42773 563.57227 L 571.36328 563.57227 L 571.36328 473.57227 L 524.2207 473.57227 z " 
              Height="68.668" Stretch="Fill" Width="80.734" Canvas.Left="411.375" Canvas.Top="339.125">
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.265" ScaleX="0.265"/>
                    <SkewTransform/>
                    <!-- 命名旋转变换，方便动画绑定 -->
                    <RotateTransform x:Name="ClampRRotate" CenterX="0.5" CenterY="0.5" Angle="0"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>

        <!-- 左夹爪 -->
        <Path x:Name="ClampL" Fill="#FF000000" StrokeThickness="2.12787" 
              Data="M 110 344.28516 L 110 434.28516 L 110 485.71484 L 110 522.85742 L 544.28516 522.85742 L 544.28516 434.28516 L 157.14258 434.28516 L 157.14258 344.28516 L 110 344.28516 z " 
              Height="68.668" Stretch="Fill" Width="80.734" Canvas.Left="384.508" Canvas.Top="339.166">
            <Path.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="0.265" ScaleX="0.265"/>
                    <SkewTransform/>
                    <!-- 命名旋转变换，方便动画绑定 -->
                    <RotateTransform x:Name="ClampLRotate" Angle="0"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Path.RenderTransform>
        </Path>

        <!-- 触发按钮 -->
        <Button Content="START" Canvas.Left="84" Canvas.Top="403" Width="106" Height="48" 
                FontSize="30" FontWeight="Bold" Name="BtnStart" 
                Command="{Binding ClickCommand, UpdateSourceTrigger=PropertyChanged}">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource ClampCloseStoryboard}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Canvas>
    <UserControl.DataContext>
        <viewmodel:ProzessViewModel/>
    </UserControl.DataContext>
</UserControl>

关键修改说明 #

1. 统一Transform类型：两个夹爪都改用RenderTransform，避免不必要的布局重排
2. 命名RotateTransform：给每个夹爪的旋转变换设置x:Name，让动画可以直接定位到Angle属性
3. 定义全局Storyboard：在UserControl资源中定义包含两个同步动画的故事板，保持时长一致实现同步旋转
4. 修正初始角度：将两个夹爪的初始旋转角度设为0°，符合需求的初始状态
5. 统一触发逻辑：在Button的Trigger中直接引用资源中的Storyboard，点击按钮即可触发同步动画

内容的提问来源于stack exchange，提问作者drntvc