wstrząsnąć animacja (wersja 3d)

Question

Chcę skorzystać z tej animacji na błędy, jak ten pokazany here:

Jak to osiągnąć w WPF? Mam wrażenie, że powinno to być połączenie (kompozycja?) Wielu transformacji, ale które i jak dokładnie?

Oto rozrusznik (mcve lub nazywają to „moja próba”), który jest brzydki i nie jest nawet blisko tego, co chcę:

<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> 

Istnieje wiele stanowisk 2d wytrząsania wokół (click, click), ale potrzebuję animacji, która mówi "jesteś w błędzie", a nie tej, która mówi "tańczmy".

Answer 1

Oto animacja, którą opisujesz. Użyłem Viewport3D z Viewport2DVisual3D do obsługi kontrolek.

Można to wykorzystać do budowania jesteś właścicielem wielokrotnego użytku kontrolę zwyczaj trząść.

Nie można odtworzyć tej dokładnej animacji za pomocą prostego 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> 

Answer 2

Dotychczas najlepszy efekt można osiągnąć tak:

<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> 

To dawanie że zanurzać uczucie "coś jest nie tak". Jestem zadowolony, dopóki nie pojawi się lepsza odpowiedź.