Window/Box opening animation

Tutorials on how to use html, xaml and css with your UWP apps.
3 posts Page 1 of 1
Contributors
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

Window/Box opening animation
CodenStuff
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
VIP - Donator
Posts: 1969
Joined: Sat Aug 21, 2010 2:17 pm

Re: Window/Box opening animation
Dummy1912
cryer; cryer; can't use it
no win8 :lol:

but nice share loove;
visit us on:


http://www.softpedia.com/get/System/Lau ... -Run.shtml
Check it out ! http://www.softpedia.com/publisher/I-A- ... 90017.html
Check it out ! http://www.softpedia.com/get/Desktop-En ... lock.shtml
User avatar
Codex
Coding God
Coding God
Posts: 2028
Joined: Wed Mar 31, 2010 5:50 pm

Re: Window/Box opening animation
Codex
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
3 posts Page 1 of 1
Return to “html / xaml / css”