搜尋此網誌

2010年4月14日 星期三

Silverlight : Point Animation of Storyboard

運用Path元件中 LineSegment來製造3D的假像,以下紀錄對於LineSegment中 Point動畫的設定:


<Storyboard x:Name="BoxSide_LeftSide_Back" Duration="0:0:1" >
 <PointAnimation x:Name="PointMove_Left_TL"
  Storyboard.TargetName="BoxSide_LeftSide_TL"
  Storyboard.TargetProperty="(LineSegment.StartPoint)"
  From="0,0" To="0,0"/>
 <PointAnimation x:Name="PointMove_Left_TR"
  Storyboard.TargetName="BoxSide_LeftSide_TR"
  Storyboard.TargetProperty="(LineSegment.Point)"
  From="0,0" To="0,0"/>

 <PointAnimation x:Name="PointMove_Left_BL"
  Storyboard.TargetName="BoxSide_LeftSide_BL"
  Storyboard.TargetProperty="(LineSegment.Point)"
  From="0,0" To="0,0"/>
 <PointAnimation x:Name="PointMove_Left_BR"
  Storyboard.TargetName="BoxSide_LeftSide_BR"
  Storyboard.TargetProperty="(LineSegment.Point)"
  From="0,0" To="0,0"/>
</Storyboard>

其中一個Path元件的內容如下:

<Path  x:Name="BoxSide_BackSide" Stroke="Gold">
 <Path.RenderTransform>
  <TranslateTransform X="200" Y="0"/>
 </Path.RenderTransform>
 <Path.Fill>
  <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
   <GradientStop Color="#FF770000" Offset="0.0"/>
   <GradientStop Color="Black" Offset="1.0"/>
  </LinearGradientBrush>
 </Path.Fill>
 <Path.Data>
  <PathGeometry >
   <PathFigure StartPoint="90,100" IsClosed="True"   
    x:Name="BoxSide_BackSide_TL">
    <LineSegment Point="310,100" x:Name="BoxSide_BackSide_TR"/>
    <LineSegment Point="300,150" x:Name="BoxSide_BackSide_BR"/>
    <LineSegment Point="100,150" x:Name="BoxSide_BackSide_BL"/>
   </PathFigure>
  </PathGeometry>
 </Path.Data>
</Path>



假若Target直接指定Path元件,則TargetProperty設定值為:

Storyboard.TargetProperty=
 "(Path.Data).(PathGeometry.Figures)[0].
 (PathFigure.Segments)[0].(LineSegment.Point)"

可做到的效果(按下box前端及右端做上下拖拽):Box