c# – 摇动画(3d版)

我想在错误上使用这个动画,如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),但是我需要动画说“你错了”而不是那个说“让我跳舞”的动画.

解决方法:

这是您描述的动画.我使用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>

标签：c,animation,wpf,xaml,shake
来源： https://codeday.me/bug/20190519/1136911.html