Silverlight 做的海浪效果

效果如下：

代码简单说明：

海面是通过一个Path来实现的，我们通过故事板来修改Path的贝塞尔曲线的点就可以实现这个效果。当然这个东西如果用代码实现，非常麻烦，好在我们可以用Blend方便的设计出这个特效。

完整代码：

<UserControl x:Class="SilverlightApp_Surf.MainPage"
    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"
    d:DesignHeight="200" d:DesignWidth="640">
    <Canvas RenderTransformOrigin="0.5,0.5" >
        <Canvas.RenderTransform>
            <TransformGroup>
                <ScaleTransform ScaleX="1.0" ScaleY="1" x:Name="Scale"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0" x:Name="Translation"/>
            
  
  TransformGroup>
         
   Canvas.RenderTransform> <Canvas.Triggers> <EventTrigger > <BeginStoryboard> <Storyboard RepeatBehavior="Forever" AutoReverse="True"> <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wave" Storyboard.TargetProperty="(Path.Data).(PathGeometry.figures)[0].(Pathfigure.Segments)[2].(BezierSegment.Point2)"> <SplinePointKeyFrame KeyTime="00:00:00" Value="484.749503478214,48.4614211008539" KeySpline="0.766,0.265,0.991"/> <SplinePointKeyFrame KeyTime="00:00:01" Value="472.99841325265,33.7398233257606" KeySpline="0.641,0.094,0.999"/> <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="482.133751598516,55.9324453754571" KeySpline="0.5,0.188,0.983"/>  
    PointAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wave" Storyboard.TargetProperty="(Path.Data).(PathGeometry.figures)[0].(Pathfigure.Segments)[2].(BezierSegment.Point3)"> <SplinePointKeyFrame KeyTime="00:00:01" Value="513.106656180137,46.7546299392857" KeySpline="0.641,0.999"/> <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="499.186383177463,42.3922334944287" KeySpline="0.5,0.983"/>  
     PointAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wave" Storyboard.TargetProperty="(Path.Data).(PathGeometry.figures)[0].(Pathfigure.Segments)[3].(BezierSegment.Point1)"> <SplinePointKeyFrame KeyTime="00:00:00" Value="540.59991701205,19.6227330505653" KeySpline="0.766,0.991"/> <SplinePointKeyFrame KeyTime="00:00:01" Value="564.908523302214,63.5639248274273" KeySpline="0.641,0.999"/> <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="525.339507767719,21.6260047359191" KeySpline="0.5,0.983"/>  
      PointAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wave" Storyboard.TargetProperty="(Path.Data).(PathGeometry.figures)[0].(Pathfigure.Segments)[1].(BezierSegment.Point2)"> <SplinePointKeyFrame KeyTime="00:00:00" Value="256.689637283039,7.23634631616016" KeySpline="0.766,0.991"/> <SplinePointKeyFrame KeyTime="00:00:01" Value="248.899873242055,57.1432452148108" KeySpline="0.641,0.999"/> <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="233.195785457065,-22.4606421224457" KeySpline="0.5,0.983"/>  
       PointAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wave" Storyboard.TargetProperty="(Path.Data).(PathGeometry.figures)[0].(Pathfigure.Segments)[1].(BezierSegment.Point3)"> <SplinePointKeyFrame KeyTime="00:00:01" Value="295.076580992168,24.6446375615999" KeySpline="0.641,0.999"/> <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="298.817962124832,21.7698995286644" KeySpline="0.5,0.983"/>  
        PointAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wave" Storyboard.TargetProperty="(Path.Data).(PathGeometry.figures)[0].(Pathfigure.Segments)[2].(BezierSegment.Point1)"> <SplinePointKeyFrame KeyTime="00:00:00" Value="350.699783207225,60.8478078352592" KeySpline="0.766,0.991"/> <SplinePointKeyFrame KeyTime="00:00:01" Value="341.253288742281,-7.85397009161106" KeySpline="0.641,0.999"/> <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="364.440138792599,66.0004411797744" KeySpline="0.5,0.983"/>  
         PointAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wave" Storyboard.TargetProperty="(Path.Data).(PathGeometry.figures)[0].(Pathfigure.Segments)[0].(BezierSegment.Point2)"> <SplinePointKeyFrame KeyTime="00:00:00" Value="111.373548722153,61.3389964335705" KeySpline="0.766,0.991"/> <SplinePointKeyFrame KeyTime="00:00:01" Value="119.007495207789,17.6773995669566" KeySpline="0.641,0.999"/> <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="143.912099951412,61.4751946548156" KeySpline="0.5,0.983"/>  
          PointAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wave" Storyboard.TargetProperty="(Path.Data).(PathGeometry.figures)[0].(Pathfigure.Segments)[0].(BezierSegment.Point3)"> <SplinePointKeyFrame KeyTime="00:00:01" Value="160.569841824079,45.703395381752" KeySpline="0.641,0.999"/> <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="160.569841824079,45.703395381752" KeySpline="0.5,0.983"/>  
           PointAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wave" Storyboard.TargetProperty="(Path.Data).(PathGeometry.figures)[0].(Pathfigure.Segments)[1].(BezierSegment.Point1)"> <SplinePointKeyFrame KeyTime="00:00:00" Value="199.555871768111,6.74515771784889" KeySpline="0.766,0.991"/> <SplinePointKeyFrame KeyTime="00:00:01" Value="202.132188440369,73.7293911965473" KeySpline="0.641,0.999"/> <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="177.227583696746,29.9315961086885" KeySpline="0.5,0.983"/>  
            PointAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Wave" Storyboard.TargetProperty="(Path.Data).(PathGeometry.figures)[0].(Pathfigure.Segments)[0].(BezierSegment.Point1)"> <SplinePointKeyFrame KeyTime="00:00:01" Value="2.27346024513245,34.0420770757097"/> <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="-16.7514460054151,67.9340629439986"/>  
             PointAnimationUsingKeyFrames>  
              Storyboard>  
               BeginStoryboard>  
                EventTrigger>  
                 Canvas.Triggers> <Canvas.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFFFFFFF" Offset="0"/> <GradientStop Color="#FF9A0000" Offset="1"/>  
                  LinearGradientBrush>  
                   Canvas.Background> <Path x:Name="Wave" Width="649.767" Height="103.169" Stretch="None" stroke="#FF000000" Canvas.Top="96.952" Canvas.Left="-9.767"> <Path.Data> <PathGeometry> <Pathfigure IsClosed="True" StartPoint="2.27346024513245,34.0420770757097"> <BezierSegment Point1="2.27346024513245,34.0420770757097" Point2="155.464710245132,34.0420770757097" Point3="155.464710245132,34.0420770757097"/> <BezierSegment Point1="2.27346024513245,34.0420770757097" Point2="303.694710245132,34.0420770757097" Point3="303.694710245132,34.0420770757097" Point2="512.674710245132,34.0420770757097" Point3="512.674710245132,34.0420770757097" Point2="649.260960245132,34.0420770757097" Point3="649.260960245132,34.0420770757097"/> <Linesegment Point="649.260960245132,102.669338474509"/> <Linesegment Point="2.27346024513245,102.669338474509"/>  
                    Pathfigure>  
                     PathGeometry>  
                      Path.Data> <Path.Fill> <LinearGradientBrush EndPoint="0.5,0"> <GradientStop Color="#FF406BF6" Offset="1"/> <GradientStop Color="#FF04123C" Offset="0.983"/> <GradientStop Color="#FFFF7100" Offset="0.353"/>  
                       LinearGradientBrush>  
                        Path.Fill>  
                         Path>  
                          Canvas>  
                           UserControl>