-
- schragnasher
- Posts: 33
- Joined:
Screen GUI Shake
Im working on an animation to act as a screenshake, like when hit by a weapon, a sort of violent shaking of the GUI. Iv got the animation working, but my storyboard sucks :p does anyone have a good setup for this? This is my gui root im working on. The animation is bad, just something to work from. I thought an elastic ease was the closest thing to start with.
Code: Select all
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" >
<Grid x:Name="RootContainer">
<Grid.Resources>
<Storyboard x:Key="ShakeRootGUIStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Duration="00:00:0.5">
<EasingDoubleKeyFrame Value="10" KeyTime="25%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame Value="-10" KeyTime="75%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame Value="0" KeyTime="100%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Duration="00:00:0.5">
<EasingDoubleKeyFrame Value="10" KeyTime="25%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame Value="-10" KeyTime="75%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame Value="0" KeyTime="100%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.RenderTransform>
<TranslateTransform />
</Grid.RenderTransform>
</Grid>
</Page>
-
-
sfernandez
Site Admin
- Posts: 3154
- Joined:
Re: Screen GUI Shake
I'm not an expert on animation, but I think that adding some asymmetry to the animations will improve the effect:
Code: Select all
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" >
<Grid x:Name="RootContainer">
<Grid.Resources>
<Storyboard x:Key="ShakeRootGUIStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Duration="00:00:0.5">
<EasingDoubleKeyFrame Value="10" KeyTime="25%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame Value="-8" KeyTime="75%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame Value="0" KeyTime="100%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" Duration="00:00:0.5">
<EasingDoubleKeyFrame Value="8" KeyTime="25%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="4" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame Value="-10" KeyTime="70%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame Value="0" KeyTime="100%">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase Oscillations="3" Springiness="0.1" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.RenderTransform>
<TranslateTransform />
</Grid.RenderTransform>
</Grid>
</Page>Who is online
Users browsing this forum: No registered users and 9 guests