WPF and Expression Blend development examples: loading animations

Today, a little practical, the project can be used in real, a loading animation, and finally encapsulated into a control, can be used directly in the project, first:

The whole design is simple, it is to draw 18 path on the interface, then change the value of OpacityMask by animation to achieve a dynamic effect.

Because the whole process is relatively simple, so there is no use of blend, the only thing to be aware of is path value is to be generated from PS, the path is as follows:

<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, and each path rotates at a specific angle around a circle

<Pathx:name= "Block0"Style="{StaticResource Pathstyle}"Data="{StaticResource Block}"OpacityMask= "#00000000" >     <Path.rendertransform>           <RotateTransformAngle= " the"/>      </Path.rendertransform></Path>

<Stylex: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= "+"></Setter></Style>

Animation of a single path:

<ColorAnimationUsingKeyFramesDuration= "00:00:03.6"Storyboard.TargetName= "Block0"Storyboard.TargetProperty= "(Uielement.opacitymask). (Solidcolorbrush.color) ">                <LinearColorKeyFrameKeyTime= "00:00:00.0"Value= "#FF000000"/>                <LinearColorKeyFrameKeyTime= "00:00:00.2"Value= "#EF000000"/>                <LinearColorKeyFrameKeyTime= "00:00:00.4"Value= "#E2000000"/>                <LinearColorKeyFrameKeyTime= "00:00:00.6"Value= "#D3000000"/>                <LinearColorKeyFrameKeyTime= "00:00:00.8"Value= "#C6000000"/>                <LinearColorKeyFrameKeyTime= "00:00:01.0"Value= "#B7000000"/>                <LinearColorKeyFrameKeyTime= "00:00:01.2"Value= "#AA000000"/>                <LinearColorKeyFrameKeyTime= "00:00:01.4"Value= "#9B000000"/>                <LinearColorKeyFrameKeyTime= "00:00:01.6"Value= "#8E000000"/>                <LinearColorKeyFrameKeyTime= "00:00:01.8"Value= "#7F000000"/>                <LinearColorKeyFrameKeyTime= "00:00:02.0"Value= "#72000000"/>                <LinearColorKeyFrameKeyTime= "00:00:02.2"Value= "#63000000"/>                <LinearColorKeyFrameKeyTime= "00:00:02.4"Value= "#56000000"/>                <LinearColorKeyFrameKeyTime= "00:00:02.6"Value= "#3D000000"/>                <LinearColorKeyFrameKeyTime= "00:00:02.8"Value= "#26000000"/>                <LinearColorKeyFrameKeyTime= "00:00:03.0"Value= "#19000000"/>                <LinearColorKeyFrameKeyTime= "00:00:03.2"Value= "#0C000000"/>                <LinearColorKeyFrameKeyTime= "00:00:03.4"Value= "#00000000"/>                <LinearColorKeyFrameKeyTime= "00:00:03.6"Value= "#FF000000"/>            </ColorAnimationUsingKeyFrames>

Source code Download:

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

WPF and Expression Blend development examples: loading animations