WPF and Expression Blend development instances: Loading animation, wpfblend

WPF and Expression Blend development instances: Loading animation, wpfblend

Today, let's take a look at the reality. A Loading animation can be used in a project and encapsulated as a control. It can be directly used in the project. First:

The whole design is relatively simple. It is to draw 18 paths on the interface, and then use an animation to change the value of OpacityMask to achieve a dynamic effect.

 

Because the entire process is relatively simple, Blend is not actually used. The only thing you need to note is that the Path value of Path is generated by the artist from PS. The Path is as follows:

<Geometry x:Key="Block">            M291.15499,85.897525             C291.15499,85.897525              301.88917,85.87921              301.88917,85.87921              301.88917,85.87921              300.38339,94.355061              300.38339,94.355061              300.38339,94.355061              292.85366,94.355042              292.85366,94.355042              292.85366,94.355042              291.15499,85.897525              291.15499,85.897525Z</Geometry>

The code for Path is as follows. Each Path rotates a circle at a specific angle.

<Path x:Name="block0" Style="{StaticResource PathStyle}" Data="{StaticResource Block}"  OpacityMask="#00000000" >     <Path.RenderTransform>           <RotateTransform Angle="180"/>      </Path.RenderTransform></Path>

<Style x:Key="PathStyle" TargetType="Path">            <Setter Property="Fill" Value="#FF0092FF"></Setter>            <Setter Property="Stretch" Value="Fill"></Setter>            <Setter Property="RenderTransformOrigin" Value="0.5,5"></Setter>            <Setter Property="VerticalAlignment" Value="Top"></Setter>            <Setter Property="Height" Value="30"></Setter></Style>

Animation of a single Path:

<ColorAnimationUsingKeyFrames Duration="00:00:03.6" Storyboard.TargetName="block0" Storyboard.TargetProperty="(UIElement.OpacityMask).(SolidColorBrush.Color)">                <LinearColorKeyFrame KeyTime="00:00:00.0" Value="#FF000000"/>                <LinearColorKeyFrame KeyTime="00:00:00.2" Value="#EF000000"/>                <LinearColorKeyFrame KeyTime="00:00:00.4" Value="#E2000000"/>                <LinearColorKeyFrame KeyTime="00:00:00.6" Value="#D3000000"/>                <LinearColorKeyFrame KeyTime="00:00:00.8" Value="#C6000000"/>                <LinearColorKeyFrame KeyTime="00:00:01.0" Value="#B7000000"/>                <LinearColorKeyFrame KeyTime="00:00:01.2" Value="#AA000000"/>                <LinearColorKeyFrame KeyTime="00:00:01.4" Value="#9B000000"/>                <LinearColorKeyFrame KeyTime="00:00:01.6" Value="#8E000000"/>                <LinearColorKeyFrame KeyTime="00:00:01.8" Value="#7F000000"/>                <LinearColorKeyFrame KeyTime="00:00:02.0" Value="#72000000"/>                <LinearColorKeyFrame KeyTime="00:00:02.2" Value="#63000000"/>                <LinearColorKeyFrame KeyTime="00:00:02.4" Value="#56000000"/>                <LinearColorKeyFrame KeyTime="00:00:02.6" Value="#3D000000"/>                <LinearColorKeyFrame KeyTime="00:00:02.8" Value="#26000000"/>                <LinearColorKeyFrame KeyTime="00:00:03.0" Value="#19000000"/>                <LinearColorKeyFrame KeyTime="00:00:03.2" Value="#0C000000"/>                <LinearColorKeyFrame KeyTime="00:00:03.4" Value="#00000000"/>                <LinearColorKeyFrame KeyTime="00:00:03.6" Value="#FF000000"/>            </ColorAnimationUsingKeyFrames>

Source code download:

Http://files.cnblogs.com/youngytj/LoadingAnimations.rar