Window/Box opening animation
Tutorials on how to use html, xaml and css with your UWP apps.
3 posts
Page 1 of 1
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.
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":
Then add the animation storyboard (I called it Windows):
Not sure what you could use this animation for but I'm sure someone will find it useful cooll;
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](http://i44.tinypic.com/fdhow7.png)
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
Edit margins etc as needed. <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>
Then add the animation storyboard (I called it Windows):
Code: Select all
Now to run the animation via code either automatically or in a tapped event or something just add this: <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>
Code: Select all
And the animation will play.Windows.Begin()
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.
cryer; cryer; can't use it
no win8 :lol:
but nice share loove;
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
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
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
Copyright Information
Copyright © Codenstuff.com 2020 - 2023