• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2026 Replies
  • 331 Replies
    1928 Replies

Window/Box opening animation

User avatar
CodenStuff
Site Admin
Posts: 4386

Window/Box opening animation

Wed Sep 18, 2013 2: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;
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.

User avatar
Dummy1912
VIP - Donator
Posts: 1998

Re: Window/Box opening animation

Wed Sep 18, 2013 3:37 pm

cryer; cryer; can't use it
no win8 :lol:

but nice share loove;

User avatar
Codex
Coding God
Posts: 2026

Re: Window/Box opening animation

Fri Sep 20, 2013 7:17 pm

I think one is able to replicate this effect for any WPF project
We shall let the revolution begin.. the revolution for freedom, freedom against censorship. We shall fight in the fields and in the streets, we shall fight in the hills; we shall never surrender

Post Reply

Return to “html / xaml / css”