c# - 摇动动画(3d版)

Question

我想在出现错误时使用此动画，如显示的那样 here :

如何在 wpf 中实现？我觉得这应该是多个转换的组合(组合？)，但具体是哪些转换以及如何转换？

这是一个开胃菜(mcve 或称它为“我的尝试”)，它很丑，甚至离我想要的还差得很远:

<Grid>
    <Border x:Name="border"
            Width="200"
            Height="200"
            BorderBrush="Black"
            BorderThickness="1"
            CornerRadius="4"
            Background="LightBlue"
            RenderTransformOrigin="0.5,0">
        <Border.RenderTransform>
            <TransformGroup>
                <ScaleTransform />
                <SkewTransform />
                <RotateTransform />
                <TranslateTransform />
            </TransformGroup>
        </Border.RenderTransform>
        <Border.Effect>
            <DropShadowEffect BlurRadius="20" />
        </Border.Effect>
        <Button VerticalAlignment="Bottom"
                HorizontalAlignment="Center"
                Margin="0,0,0,10"
                Padding="5"
                Content="Click">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard FillBehavior="Stop">
                            <DoubleAnimation Storyboard.TargetName="border"
                                             Storyboard.TargetProperty="RenderTransform.Children[1].(SkewTransform.AngleX)"
                                             To="5" Duration="0:0:0.1"/>
                            <DoubleAnimation Storyboard.TargetName="border"
                                             Storyboard.TargetProperty="RenderTransform.Children[1].(SkewTransform.AngleX)"
                                             To="-5"
                                             BeginTime="0:0:0.1"
                                             Duration="0:0:0.2" />
                            <DoubleAnimation Storyboard.TargetName="border"
                                             Storyboard.TargetProperty="RenderTransform.Children[1].(SkewTransform.AngleX)"
                                             To="5"
                                             BeginTime="0:0:0.3"
                                             Duration="0:0:0.2" />
                            <DoubleAnimation Storyboard.TargetName="border"
                                             Storyboard.TargetProperty="RenderTransform.Children[1].(SkewTransform.AngleX)"
                                             BeginTime="0:0:0.5"
                                             Duration="0:0:0.1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Border>
</Grid>

周围有很多 2d shake 帖子(click、click)，但我需要告诉“你错了” 的动画，而不是说“让我们跳舞”的动画。

Answer 1

目前为止最好的效果可以这样实现:

<Grid>
    <Border Width="200"
            Height="200"
            BorderBrush="Black"
            BorderThickness="1"
            CornerRadius="4"
            Background="LightBlue"
            RenderTransformOrigin="0.5,0">
        <Border.RenderTransform>
            <RotateTransform x:Name="transform" />
        </Border.RenderTransform>
        <Border.Effect>
            <DropShadowEffect BlurRadius="20" />
        </Border.Effect>
        <Button VerticalAlignment="Bottom"
                HorizontalAlignment="Center"
                Margin="0,0,0,10"
                Padding="5"
                Content="Click">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard FillBehavior="Stop">
                            <DoubleAnimation Storyboard.TargetName="transform"
                                             Storyboard.TargetProperty="Angle"
                                             From="5"
                                             Duration="0:0:0.5">
                                <DoubleAnimation.EasingFunction>
                                    <ElasticEase EasingMode="EaseOut"
                                                 Oscillations="2"
                                                 Springiness="1" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Border>
</Grid>

这给人一种身临其境的感觉“出了点问题”。在出现更好的答案之前，我很满意。