摇动动画（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 摇动帖子（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>

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

Answer 2

这是你描述的动画。我使用Viewport3D 和Viewport2DVisual3D 来托管控件。

您可以使用它来构建您自己的可重复使用的自定义抖动控件。

无法使用简单的 2D RenderTransforms 复制这个精确的动画。

<Grid>
    <Viewport3D>
        <Viewport3D.Camera>
            <PerspectiveCamera Position="0, 0, 4"/>
        </Viewport3D.Camera>
        <Viewport2DVisual3D x:Name="DVisual3D">
            <Viewport2DVisual3D.Transform>
                <RotateTransform3D>
                    <RotateTransform3D.Rotation>
                        <AxisAngleRotation3D Angle="0" Axis="0, 1, 0" />
                    </RotateTransform3D.Rotation>
                </RotateTransform3D>
            </Viewport2DVisual3D.Transform>
            <Viewport2DVisual3D.Geometry>
                <MeshGeometry3D Positions="-1,1,0 -1,-1,0 1,-1,0 1,1,0"
                        TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 3"/>
            </Viewport2DVisual3D.Geometry>
            <Viewport2DVisual3D.Visual>
                <Border x:Name="border"
                        Width="200"
                        Height="200"
                        BorderBrush="Black"
                        BorderThickness="1"
                        CornerRadius="4"
                        Background="LightBlue">
                    <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="DVisual3D"
                                        Storyboard.TargetProperty="Transform.(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"
                                        To="10" Duration="0:0:0.07"/>
                                        <DoubleAnimation Storyboard.TargetName="DVisual3D"
                                        Storyboard.TargetProperty="Transform.(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"
                                        To="-10"
                                        BeginTime="0:0:0.07"
                                        Duration="0:0:0.14" />
                                        <DoubleAnimation Storyboard.TargetName="DVisual3D"
                                        Storyboard.TargetProperty="Transform.(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"
                                        To="10"
                                        BeginTime="0:0:0.21"
                                        Duration="0:0:0.14" />
                                        <DoubleAnimation Storyboard.TargetName="DVisual3D"


                    Storyboard.TargetProperty="Transform.(RotateTransform3D.Rotation).(AxisAngleRotation3D.Angle)"
                                    BeginTime="0:0:0.35"
                                    Duration="0:0:0.07" />
                            </Storyboard>
                        </BeginStoryboard>
                        </EventTrigger>
                        </Button.Triggers>
                </Button>
            </Border>
        </Viewport2DVisual3D.Visual>
        <Viewport2DVisual3D.Material>
            <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/>
        </Viewport2DVisual3D.Material>
    </Viewport2DVisual3D>
    <ModelVisual3D>
        <ModelVisual3D.Content>
            <DirectionalLight Color="#FFFFFFFF" Direction="0,0,-1"/>
        </ModelVisual3D.Content>
    </ModelVisual3D>
</Viewport3D>