Animations

An animation is a modification of a dependency property over time using a storyboard. you can only animate four types of values:

• DoubleAnimation class
• ColorAnimation class
• PointAnimation class
• ObjectAnimation 

we need to specify at least four attributes for our Storyboard

• StoryBoard.TargetName: the object we'll be changing
• StoryBoard.TragetProperty: what about the object we'll be changing 
• To: the value to change to
• Duration: how long for the change to complete

now these aren't the only attributes needed but they are the most essential. Lets take a look at an example

<Page

    x:Class="pc.Animation.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:pc.Animation"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

    <Page.Resources>

        <Storyboard x:Name="SimpleStoryboard">

            <DoubleAnimation

                Storyboard.TargetName="BlinkingRectangle"

                Storyboard.TargetProperty="Opacity"

                To="0.0"

                Duration="0:0:2"

                RepeatBehavior="Forever"/>

            <ColorAnimation

                Storyboard.TargetName="BlinkingRectangle"

                Storyboard.TargetProperty="(Shape.Fill).(SolidBrushColor.Color)"

                To="Purple"

                Duration="0:0:5" />

            <DoubleAnimation

                Storyboard.TargetName="BlinkingRectangle"

                Storyboard.TargetProperty="(Canvas.Left)"

                To="100"

                Duration="0:0:5" />

        </Storyboard>

    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Canvas  Margin="100">

            <Rectangle x:Name="BlinkingRectangle"

                       Opacity="1.0"

                       Width="100"

                       Height="100"

                       Fill="Orange"  >

            </Rectangle>

        </Canvas>

    </Grid>

</Page>

with that complete notice that for the color animation and the second double animation our TargetProperty attributes are a bit peculiar. This is because we're not just modifying a simple dependency property, in the color animation we are changeing a brush, so what we use is something called "Property path syntax", we're saying of the base type Shape set the fill properties solidBrushColor's Color property to our new value.
and as for the second DoubleAnimation, we are changing the Attached Property.

with all this done if we run our demo nothing will happen, this is because we still have to begin the Storyboard.

public sealed partial class MainPage : Page

{

    public MainPage()

    {

        this.InitializeComponent();

        this.SimpleStoryboard.Begin();

    }

}

ok and that's it, our animation flashes in 2s intervals, changes color to purple in 5s and moves 100px to the right in 5s.

Independent vs Dependent animations, independent animations run independently of the UI thread and are handled by the GPU, this makes applications more responsive. where as Dependent animations are dependent on the UI thread, they're handled by the CPU. dependent Animations change things like width an hight basically things that modify other UI elements, now for them to work you have to Enable Dependent Animations on the storyboard.