{ Learn Code. Share Code. Teach Code. Love Code. }

  • Window/Box opening animation

  • Tutorials on how to use html, xaml and css with your UWP apps.
Tutorials on how to use html, xaml and css with your UWP apps.
 #77993  by CodenStuff
 Wed Sep 18, 2013 1:51 pm
Open the window


This is a nice little storyboard animation you can add to your app elements that will create an animation that looks like an opening window or box.

Image

First you will need 2 controls (1 for each side) lets use rectangles and give them the "PlaneProjection" property and name a rectangle "d1" and the other "d2":
Code: Select all
                <Rectangle x:Name="d1" Fill="#FF3434E6" HorizontalAlignment="Left" Height="250" Margin="0" Stroke="Black" VerticalAlignment="Top" Width="140">
                    <Rectangle.Projection>
                        <PlaneProjection  />
                    </Rectangle.Projection>
                </Rectangle>
                <Rectangle x:Name="d2" Fill="#FF1D1DEE" HorizontalAlignment="Left" Height="250" Margin="140,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="140">
                    <Rectangle.Projection>
                        <PlaneProjection  />
                    </Rectangle.Projection>
                </Rectangle>
Edit margins etc as needed.

Then add the animation storyboard (I called it Windows):
Code: Select all
        <Storyboard x:Name="Windows">
            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="d1" d:IsOptimized="True"/>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="d1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="d1">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="140"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="d2" d:IsOptimized="True"/>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="d2">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="d2">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-140"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
Now to run the animation via code either automatically or in a tapped event or something just add this:
Code: Select all
Windows.Begin()
And the animation will play.

Not sure what you could use this animation for but I'm sure someone will find it useful cooll;
 #78015  by Codex
 Fri Sep 20, 2013 6:17 pm
I think one is able to replicate this effect for any WPF project