Silverlight 做的海浪效果_app

概述效果如下：代码简单说明：海面是通过一个Path来实现的，我们通过故事板来修改Path的贝塞尔曲线的点就可以实现这个效果。当然这个东西如果用代码实现，非常麻烦，好在我们可以用Blend方便的设计出这个特效。完整代码： <UserControl x:Class="SilverlightApp_Surf.MainPage" xmlns="http://schemas.microsoft. 效果如下：代码简单说明：

海面是通过一个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>