schragnasher
Topic Author
Posts: 33
Joined: 07 Mar 2015, 01:58

Screen GUI Shake

19 Jun 2015, 02:17

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.
<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>
 
 
User avatar
sfernandez
Site Admin
Posts: 1911
Joined: 22 Dec 2011, 19:20

Re: Screen GUI Shake

03 Jul 2015, 20:38

I'm not an expert on animation, but I think that adding some asymmetry to the animations will improve the effect:
<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: Google [Bot] and 0 guests