摇动动画(3d版)
Shake animation (3d version)
我想在出现错误时使用此动画,如显示的那样 here:
如何在 wpf 中实现?我觉得这应该是多个转换的组合(组合?),但是哪些转换以及如何转换?
这是一个启动器(mcve 或称之为 "my attempt"),它很丑,甚至与我想要的都不接近:
<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>
(click, click) 周围有很多 2d 抖动帖子,但我需要的动画是告诉 "you are wrong" 而不是说 [=28 的动画=].
这是您描述的动画。我使用 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>
目前为止最好的效果可以这样实现:
<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>
这给人一种身临其境的感觉"something is wrong"。我很满意,直到出现更好的答案。
我想在出现错误时使用此动画,如显示的那样 here:
如何在 wpf 中实现?我觉得这应该是多个转换的组合(组合?),但是哪些转换以及如何转换?
这是一个启动器(mcve 或称之为 "my attempt"),它很丑,甚至与我想要的都不接近:
<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>
(click, click) 周围有很多 2d 抖动帖子,但我需要的动画是告诉 "you are wrong" 而不是说 [=28 的动画=].
这是您描述的动画。我使用 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>
目前为止最好的效果可以这样实现:
<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>
这给人一种身临其境的感觉"something is wrong"。我很满意,直到出现更好的答案。