Silverlight 做的海浪效果_开发工具

您所在的位置：程序员俱乐部 > 编程开发 > 开发工具 > Silverlight 做的海浪效果

Silverlight 做的海浪效果

2010/11/1 11:20:30 程序员俱乐部我要评论(0)

摘要：效果如下：代码简单说明：海面是通过一个Path来实现的，我们通过故事板来修改Path的贝塞尔曲线的点就可以实现这个效果。当然这个东西如果用代码实现，非常麻烦，好在我们可以用Blend方便的设计出这个特效。完整代码：UserControlx:Class="SilverlightApp_Surf.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas
标签：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,0.265,0.991"/>
                            <SplinePointKeyFrame KeyTime="00:00:01" Value="472.99841325265,33.7398233257606" KeySpline="0.641,0,0.094,0.999"/>
                            <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="482.133751598516,55.9324453754571" KeySpline="0.5,0,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,0.094,0.999"/>
                            <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="499.186383177463,42.3922334944287" KeySpline="0.5,0,0.188,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,0.265,0.991"/>
                            <SplinePointKeyFrame KeyTime="00:00:01" Value="564.908523302214,63.5639248274273" KeySpline="0.641,0,0.094,0.999"/>
                            <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="525.339507767719,21.6260047359191" KeySpline="0.5,0,0.188,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,0.265,0.991"/>
                            <SplinePointKeyFrame KeyTime="00:00:01" Value="248.899873242055,57.1432452148108" KeySpline="0.641,0,0.094,0.999"/>
                            <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="233.195785457065,-22.4606421224457" KeySpline="0.5,0,0.188,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,0.094,0.999"/>
                            <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="298.817962124832,21.7698995286644" KeySpline="0.5,0,0.188,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,0.265,0.991"/>
                            <SplinePointKeyFrame KeyTime="00:00:01" Value="341.253288742281,-7.85397009161106" KeySpline="0.641,0,0.094,0.999"/>
                            <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="364.440138792599,66.0004411797744" KeySpline="0.5,0,0.188,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,0.265,0.991"/>
                            <SplinePointKeyFrame KeyTime="00:00:01" Value="119.007495207789,17.6773995669566" KeySpline="0.641,0,0.094,0.999"/>
                            <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="143.912099951412,61.4751946548156" KeySpline="0.5,0,0.188,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,0.094,0.999"/>
                            <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="160.569841824079,45.703395381752" KeySpline="0.5,0,0.188,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,0.265,0.991"/>
                            <SplinePointKeyFrame KeyTime="00:00:01" Value="202.132188440369,73.7293911965473" KeySpline="0.641,0,0.094,0.999"/>
                            <SplinePointKeyFrame KeyTime="00:00:01.7000000" Value="177.227583696746,29.9315961086885" KeySpline="0.5,0,0.188,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"/>
                        <BezierSegment Point1="2.27346024513245,34.0420770757097" Point2="512.674710245132,34.0420770757097" Point3="512.674710245132,34.0420770757097"/>
                        <BezierSegment Point1="2.27346024513245,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,1" StartPoint="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>