शेक एनीमेशन (3 डी संस्करण)

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> 

कई 2 डी शेक पदों के आसपास रहे हैं (click, click), लेकिन मुझे एनीमेशन की आवश्यकता है जो बताता है "आप गलत हैं" और वह नहीं जो "चलो नृत्य" कहता है।

Answer 1

यहाँ एनीमेशन आप का वर्णन है। नियंत्रणों की मेजबानी के लिए मैंने Viewport2DVisual3D के साथ Viewport3D का उपयोग किया है।

आप इस का उपयोग आप पुन: प्रयोज्य कस्टम शेक नियंत्रण ही निर्माण करने के लिए कर सकता है।

सरल 2 डी 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

अब तक सबसे अच्छा प्रभाव इस तरह प्राप्त किया जा सकता:

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

इस दे कि लग रहा है "कुछ गलत है" विसर्जित। एक बेहतर उत्तर प्रकट होने तक मैं संतुष्ट हूं।