SilverLight 3.0学习笔记（创建3D动画）

   创建一个3D效果的立方体图形，旋转360度，这里的Border可以换成矩形或者其他形状的容器，但是这个动画我尝试了很多次不能放在已经定义好的Grid行、列里面，只能放在画布里面，然后指定位置，不然全散架了。

效果图：

 

xaml：

 

<UserControl.Resources>

 <Storyboard x:Name="cc" BeginTime="00:00:00" Duration="00:00:10" RepeatBehavior="Forever">
            <DoubleAnimation Storyboard.TargetName="front"
                                     Storyboard.TargetProperty="RotationY"
                                     By="360" Duration="0:0:10"
                                     RepeatBehavior="Forever" />

            <DoubleAnimation Storyboard.TargetName="top"
                                     Storyboard.TargetProperty="RotationY"
                                     By="360" Duration="0:0:10"
                                     RepeatBehavior="Forever" />

            <DoubleAnimation Storyboard.TargetName="bottom"
                                     Storyboard.TargetProperty="RotationY"
                                     By="360" Duration="0:0:10"
                                     RepeatBehavior="Forever" />

            <DoubleAnimation Storyboard.TargetName="back"
                                     Storyboard.TargetProperty="RotationY"
                                     By="360" Duration="0:0:10"
                                     RepeatBehavior="Forever" />
            <DoubleAnimation Storyboard.TargetName="center"
                                     Storyboard.TargetProperty="RotationY"
                                     By="360" Duration="0:0:10"
                                     RepeatBehavior="Forever" />
        </Storyboard>

 <Style TargetType="Border" x:Key="rectangleStyle">
            <Setter Property="Width" Value="100" />
            <Setter Property="Height" Value="100" />
            <Setter Property="Background">
                <Setter.Value>
                    <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5">
                        <GradientStop Color="#FFECFFBD" Offset="1.1"/>
                        <GradientStop Color="#FF252825" Offset="0"/>
                        <GradientStop Color="#FF4D6DFF" Offset="0.5"/>
                    </RadialGradientBrush>
                </Setter.Value>
            </Setter>

        </Style>
        <Style TargetType="Border" x:Key="rectangle1Style">
            <Setter Property="Width" Value="100" />
            <Setter Property="Height" Value="130" />
            <Setter Property="Background">
                <Setter.Value>
                    <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5">
                        <GradientStop Color="#FFECFFBD" Offset="1.1"/>
                        <GradientStop Color="#FF252825" Offset="0"/>
                        <GradientStop Color="#FF4D6DFF" Offset="0.5"/>
                    </RadialGradientBrush>
                </Setter.Value>
            </Setter>

        </Style>

</UserControl.Resources>

<Grid HorizontalAlignment="Right" 
         VerticalAlignment="Top" Canvas.Left="20" Canvas.Top="0"  >

                <Border Style="{StaticResource rectangleStyle}" Opacity="0.5" x:Name="Re1" HorizontalAlignment="Center" VerticalAlignment="Center"  >
                    <StackPanel  Orientation="Horizontal" Width="65" Height="35">
                        <StackPanel.Effect>
                            <DropShadowEffect BlurRadius="5" Direction="220" Color="White" Opacity="0.5" ShadowDepth="15">
                            </DropShadowEffect>
                        </StackPanel.Effect>
                        <StackPanel.Projection>
                            <PlaneProjection RotationZ="0" RotationX="-30" RotationY="-40">
                            </PlaneProjection>
                        </StackPanel.Projection>
                        <TextBlock Text="学  习" Opacity="1"    FontWeight="SemiBold"  Foreground="White" FontSize="24" RenderTransformOrigin="0.5,0.5" >
             <TextBlock.RenderTransform>
              <TransformGroup>
               <ScaleTransform  ScaleY="1" ScaleX="1.0" CenterX="0" />
               <SkewTransform/>
               <RotateTransform/>
               <TranslateTransform/>
              </TransformGroup>
             </TextBlock.RenderTransform>

                        </TextBlock>
                    </StackPanel>
                    <Border.Projection>
                        <PlaneProjection x:Name="top"               
            LocalOffsetZ="50" 
            RotationX="-60" />
                    </Border.Projection>
                </Border>
                <Border Style="{StaticResource rectangleStyle}" Opacity="0.5" x:Name="Re2" HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <StackPanel  Orientation="Horizontal" Width="65" Height="35">
                        <StackPanel.Effect>
                            <DropShadowEffect BlurRadius="5" Direction="220" Color="White" Opacity="0.5" ShadowDepth="15">
                            </DropShadowEffect>
                        </StackPanel.Effect>
                        <StackPanel.Projection>
                            <PlaneProjection RotationZ="0" RotationX="-30" RotationY="-40">
                            </PlaneProjection>
                        </StackPanel.Projection>
                        <TextBlock Text="笔  记" Opacity="1" Width="65" Height="35"   FontWeight="SemiBold"  Foreground="White" FontSize="24" RenderTransformOrigin="0.5,0.5" >
             <TextBlock.RenderTransform>
              <TransformGroup>
               <ScaleTransform  ScaleY="1" ScaleX="1.0" CenterX="0" />
               <SkewTransform/>
               <RotateTransform/>
               <TranslateTransform/>
              </TransformGroup>
             </TextBlock.RenderTransform></TextBlock>
                    </StackPanel>
                    <Border.Projection>
                        <PlaneProjection x:Name="front"
            LocalOffsetZ="50"
            RotationX="30" />
                    </Border.Projection>
                </Border>
                <Border Style="{StaticResource rectangleStyle}" Opacity="0.5" x:Name="Re3" HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <StackPanel  Orientation="Horizontal" Width="65" Height="35">
                        <StackPanel.Effect>
                            <DropShadowEffect BlurRadius="5" Direction="220" Color="White" Opacity="0.5" ShadowDepth="15">
                            </DropShadowEffect>
                        </StackPanel.Effect>
                        <StackPanel.Projection>
                            <PlaneProjection RotationZ="0" RotationX="-30" RotationY="-40">
                            </PlaneProjection>
                        </StackPanel.Projection>
                        <TextBlock Text="一   起" Opacity="1"  Width="65" Height="35"  FontWeight="SemiBold"  Foreground="White" FontSize="24" RenderTransformOrigin="0.5,0.5" >
             <TextBlock.RenderTransform>
              <TransformGroup>
               <ScaleTransform  ScaleY="1" ScaleX="1.0" CenterX="0" />
               <SkewTransform/>
               <RotateTransform/>
               <TranslateTransform/>
              </TransformGroup>
             </TextBlock.RenderTransform></TextBlock>
                    </StackPanel>
                    <Border.Projection>
                        <PlaneProjection x:Name="bottom"
            LocalOffsetZ="50" 
            RotationX="120" />
                    </Border.Projection>
                </Border>
                <Border Style="{StaticResource rectangleStyle}" Opacity="0.5" x:Name="Re4" HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <StackPanel  Orientation="Horizontal" Width="65" Height="35">
                        <StackPanel.Effect>
                            <DropShadowEffect BlurRadius="5" Direction="220" Color="White" Opacity="0.5" ShadowDepth="15">
                            </DropShadowEffect>
                        </StackPanel.Effect>
                        <StackPanel.Projection>
                            <PlaneProjection RotationZ="0" RotationX="-30" RotationY="-40">
                            </PlaneProjection>
                        </StackPanel.Projection>
                        <TextBlock Text="学  习" Opacity="1" Width="65" Height="35"  FontWeight="SemiBold"  Foreground="White" FontSize="24" RenderTransformOrigin="0.5,0.5" >
             <TextBlock.RenderTransform>
              <TransformGroup>
               <ScaleTransform  ScaleY="1" ScaleX="1.0" CenterX="0" />
               <SkewTransform/>
               <RotateTransform/>
               <TranslateTransform/>
              </TransformGroup>
             </TextBlock.RenderTransform></TextBlock>
                    </StackPanel>
                    <Border.Projection>
                        <PlaneProjection x:Name="back"
            LocalOffsetZ="-50"
            RotationX="30" />
                    </Border.Projection>
                </Border>
                <Border Style="{StaticResource rectangle1Style}" Opacity="0.5" x:Name="Rez" HorizontalAlignment="Center" VerticalAlignment="Center" >
                    <Image Source="G:/Sample/Sample/images/image04.png"  >

                    </Image>
                    <Border.Projection>
                        <PlaneProjection x:Name="center"
            LocalOffsetZ="0"
            RotationX="-15"
       />
                    </Border.Projection>
                </Border>
            </Grid>

 

 

public UC_MainContent()
        {
            InitializeComponent();
            cc.Begin();
        }