Post
Ask Question

Animation Through Coding in Expression Blend 4

Step 1

Open Expression blend 4 -> select WPF -> select WPF Application -> change the Name and Location according to your choice -> hit Ok and a blank window appears in the Artboard.

Step 2

Select ToolBox -> Canvas, draw Canvas, Manage the Width & Height, Background Color, Margin, Horizontal and Vertical Alignment, Opacity Mask and Render Transform as shown below:

Canvas1-in-Expression-Blend-4.png

Canvas3-in-Expression-Blend-4.png

<Grid x:Name="LayoutRoot">

    <Canvas x:Name="canvas" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.5,0.5" OpacityMask="Black" Background="Black">

        <Canvas.RenderTransform>

            <TransformGroup>

                <ScaleTransform/>

                <SkewTransform/>

                <RotateTransform/>

                <TranslateTransform/>

            </TransformGroup>

        </Canvas.RenderTransform>

        <TransformGroup>

            <ScaleTransform/>

            <SkewTransform/>

            <RotateTransform/>

            <TranslateTransform/>

        </TransformGroup>

    </Canvas>


 Note: Have a look at the Object and Timeline Window for a deeper understanding of Canvas and it's properties as shown below: 


Canvas2-in-Expression-Blend-4.png

Step 3

Select ToolBox -> select Border -> draw a Border, Manage the BorderBrush, BorderThickness, CornerRadius, Margin, RenderTransform and Translation as shown below:

Border1-in-Expression-Blend-4.png

Border3-in-Expression-Blend-4.png

<Border x:Name="border" BorderBrush="Black" BorderThickness="1" Height="100" Width="100" RenderTransformOrigin="0.5,0.5">

    <Border.RenderTransform>

        <TransformGroup>

            <ScaleTransform/>

            <SkewTransform/>

            <RotateTransform/>

            <TranslateTransform/>

        </TransformGroup>

    </Border.RenderTransform>

</Border>

Note: Have a look at the Object and Timeline Window for a deeper understanding of Border and it's properties as below:

Border2-in-Expression-Blend-4.png

Step 4

Copy & Paste the image in the WPF Application in the Project Window as shown below:

Message-Android-image1-in-Expression-Blend-4.png

Step 5

Insert the image in the Artboard, manage the Width & Height, Rotation, Translation as shown below:

Message-Android-image2 in Expression Blend 4.png

<Image x:Name="image1" HorizontalAlignment="Left" Height="128" Source="1339749138_Messages-Android-R.png" Stretch="Fill" VerticalAlignment="Top" Width="128" RenderTransformOrigin="0.5,0.5">

    <Image.RenderTransform>

        <TransformGroup>

            <ScaleTransform/>

            <SkewTransform/>

            <RotateTransform/>

            <TranslateTransform/>

        </TransformGroup>

    </Image.RenderTransform>

</Image>

Note: Have a look at the Object and Timeline Window for a deeper understanding of the properties of Image as shown below: 

Message-Android-image3 in Expression Blend 4.png

Step 6

Select Storyboard from the Object and Timeline Window and start Animation as shown below:

Storyboard-1 in Expression Blend 4.png

Storyboard2 in Expression Belnd 4.png

<Storyboard x:Key="Storyboard5">

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="canvas">

        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="252"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="canvas">

        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="161.5"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="canvas">

        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="6.04"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="canvas">

        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="4.29"/>

    </DoubleAnimationUsingKeyFrames>

    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.OpacityMask).(SolidColorBrush.Color)" Storyboard.TargetName="canvas">

        <EasingColorKeyFrame KeyTime="0:0:1" Value="Black"/>

    </ColorAnimationUsingKeyFrames>

    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas">

        <EasingColorKeyFrame KeyTime="0:0:2.3" Value="#FF79F9E5"/>

    </ColorAnimationUsingKeyFrames>

    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="canvas">

        <EasingThicknessKeyFrame KeyTime="0:0:1.7" Value="10"/>

    </ThicknessAnimationUsingKeyFrames>

    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">

        <EasingColorKeyFrame KeyTime="0:0:1.2" Value="Red"/>

    </ColorAnimationUsingKeyFrames>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.CornerRadius)" Storyboard.TargetName="border">

        <DiscreteObjectKeyFrame KeyTime="0:0:1.2">

            <DiscreteObjectKeyFrame.Value>

                <CornerRadius>1</CornerRadius>

            </DiscreteObjectKeyFrame.Value>

        </DiscreteObjectKeyFrame>

    </ObjectAnimationUsingKeyFrames>

    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="border">

        <EasingThicknessKeyFrame KeyTime="0:0:1.2" Value="5"/>

        <EasingThicknessKeyFrame KeyTime="0:0:5" Value="10"/>

    </ThicknessAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="border">

        <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-5"/>

        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="-9.924"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="border">

        <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="-5"/>

        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="-9.718"/>

    </DoubleAnimationUsingKeyFrames>

    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)" Storyboard.TargetName="border">

        <EasingThicknessKeyFrame KeyTime="0:0:1.2" Value="2"/>

        <EasingThicknessKeyFrame KeyTime="0:0:5" Value="1"/>

    </ThicknessAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="image1">

        <EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="31"/>

        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="407"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image1">

        <EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="25"/>

        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="276"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image1">

        <EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="194"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image1">

        <EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="150"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="image1">

        <EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="0"/>

        <EasingDoubleKeyFrame KeyTime="0:0:3.4" Value="359.657"/>

        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="border">

        <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1"/>

        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0.978"/>

    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="border">

        <EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="1"/>

        <EasingDoubleKeyFrame KeyTime="0:0:5" Value="0.974"/>

    </DoubleAnimationUsingKeyFrames>

</Storyboard>

Step 7

For playing the Animation, Trigger plays a vital role as shown below:

<Window.Triggers>

    <EventTrigger RoutedEvent="FrameworkElement.Loaded">

        <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>

        <BeginStoryboard Storyboard="{StaticResource Storyboard2}"/>

        <BeginStoryboard Storyboard="{StaticResource Storyboard3}"/>

        <BeginStoryboard Storyboard="{StaticResource Storyboard4}"/>

        <BeginStoryboard Storyboard="{StaticResource Storyboard5}"/>

    </EventTrigger>

</Window.Triggers>

Note: We can see the design along with XAML code or design only or XAML code only in the Artboard as shown below:

  • To the right side of the Artboard at the top see the Design Option, it shows the Design only as shown below:
Design-Option-in-Expression-Blend-4.png
  • To the right side of the Artboard at the top see the XAML Option, it shows the XAML code only as shown below:
XAML-Option-in-Expression-Belnd-4.png
  • To the right side of the Artboard at the top see the Split Option, it shows the Design along with XAML code as shown below:
Split-Option-in-Expression-Blend-4.png

Step 8:

  • At the Initial Stage of animation, the Canvas, Border and Image looks as shown below:
Initial-Stage-of-Animation-in-Expression-Blend-4.png
  • At the Middle Stage of animation, the Canvas and Border Size becomes enlarged as shown below:
Middle-Stage-of-Animation-in-Expression-Blend-4.png
  • At the Rotation Stage of animation the image rotates as shown below:
Rotational-Animation image1-in-Expression-Blend-4.png
  • In the Last Stage of animation the image looks as shown below:
Last-Stage-of-Animation-in-Expression-Blend-4.png

Note: Here, we can rotate the image according to our choice by using the Points.

Step 9

Hit Ctrl+Shift+B or Select Project -> Build Project, and build the project, then hit F5 or Ctrl+F5 or Select Project -> Run Project and run the project as shown below:

Run-Project-in-Expression-Blend-4.png

Step 10

Structure of XAML Code when we open the WPF Application as shown below:

<Window

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"

x:Class="WpfApplication1.MainWindow"

x:Name="Window"

Title="MainWindow"

Width="640" Height="480">

    <Window.Resources>

    </Window.Resources>
       <Grid x:Name="LayoutRoot"></Grid>
</Window>
Summary

In this article we have learned "How to Design Animation through Coding?".


Similar Articles