WPF：Animation动画--KeySplineAnimation关键帧进度控制动画（1）

最新推荐文章于 2023-04-19 21:54:43 发布
最新推荐文章于 2023-04-19 21:54:43 发布
阅读量619 收藏 1
点赞数 1
原文链接：https://segmentfault.com/a/1190000013313013
版权

KeySplineAnimations关键帧进度控制动画

clipboard.png

实现效果：

  1. 创建三维立方体及贴图模型
  2. 通过KeySpline的两个进度控制点来设置3D模型的水平进度移动动画

具体实现：
一、三维立方体的创建

  1. 在Viewport3D中设置Camera及content实例。使用透视投影摄像机PerspectiveCanmera，设置投影摄像机属性ProjectionCanmera的五大属性，及水平视角属性PerspectiveCamera.FieldOfView值。
  2. 内容ModeVisual3D使用静态资源，此处同时设置3D模型的变换方式组合Transform3DGroup，包含绕轴X/Y旋转及平移动画。
  3. 设置好旋转实例名，作为动画触发参数。在Viewport3D的加载事件触发动画（只有x/y轴转动角度动画）
<StackPanel>
    <Border >
      <Viewbox Stretch="Uniform">

        <!-- An animated cube. -->
        <Viewport3D ClipToBounds="True" Width="700" Height="180">
          <Viewport3D.Camera>
            <PerspectiveCamera x:Name="myPerspectiveCamera"
              FarPlaneDistance="15" LookDirection="0,0,-1" UpDirection="0,1,0" NearPlaneDistance="1" Position="0,0,6" FieldOfView="60" />
          </Viewport3D.Camera>
          <ModelVisual3D>
            <ModelVisual3D.Children>
              <StaticResource ResourceKey="PictureCubeModelVisual3DResource" />
            </ModelVisual3D.Children>
            <ModelVisual3D.Transform>
              <Transform3DGroup >
                <Transform3DGroup.Children>
                  <RotateTransform3D>
                    <RotateTransform3D.Rotation>
                      <AxisAngleRotation3D x:Name="myHorizontalRotation" Angle="0" Axis="0 1 0" />
                    </RotateTransform3D.Rotation>
                  </RotateTransform3D>
                  <RotateTransform3D>
                    <RotateTransform3D.Rotation>
                      <AxisAngleRotation3D x:Name="myVerticalRotation" Angle="0" Axis="1 0 0" />
                    </RotateTransform3D.Rotation>
                  </RotateTransform3D>
                  <TranslateTransform3D x:Name="myTranslateTransform3D" 
                    OffsetX="-2.5" OffsetY="0" OffsetZ="0" />
                </Transform3DGroup.Children>
              </Transform3DGroup>
            </ModelVisual3D.Transform>
          </ModelVisual3D>
          <Viewport3D.Triggers>
            <EventTrigger RoutedEvent="Viewport3D.Loaded">
              <BeginStoryboard>
                <Storyboard>

                  <!-- Rotates the cube. -->
                  <DoubleAnimation 
                    Storyboard.TargetName="myHorizontalRotation"
                    Storyboard.TargetProperty="Angle"
                    From="0" To="360" 
                    Duration="0:0:10" RepeatBehavior="Forever"/>
                  <DoubleAnimation 
                    Storyboard.TargetName="myVerticalRotation"
                    Storyboard.TargetProperty="Angle"
                    From="0" To="360" 
                    Duration="0:0:10" RepeatBehavior="Forever"/>
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Viewport3D.Triggers>
        </Viewport3D>
      </Viewbox>
    </Border>
  </StackPanel>
</DockPanel>
  </StackPanel>

二、立方体3dModel模型创建

  1. 在3D中设置立方体的6个面模型

    1. 三角形基元的三角形索引集合TriangleIndices、法向量集合Normals、纹理坐标TextureCoordinates、顶点位置集合Positions(必需)

  2. 设置3D立方体6个面的材质

    1. 材质组合MaterialGroup中设置漫射材质类DiffuseMaterial,其属性Brush赋值为包含图像的ImageBrush。
    2. 同时设置高光材质SpecularMaterial，设置其反光角度SpecularPower值，在SpecularMaterial.Brush应用纯白色画刷上。
<!-- 3D Models -->
    <MeshGeometry3D 
  presentationOptions:Freeze="True"
  x:Key="CubeSide01"
  TriangleIndices="0,1,2 3,4,5 "
  Normals="-1,0,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0 "
  TextureCoordinates="0,1 0,0 1,0 1,0 1,1 0,1 "
  Positions="-0.5,0.5,-0.5 -0.5,-0.5,-0.5 -0.5,-0.5,0.5 -0.5,-0.5,0.5 -0.5,0.5,0.5 -0.5,0.5,-0.5 " />

    <MeshGeometry3D 
  presentationOptions:Freeze="True"
  x:Key="CubeSide02"
  TriangleIndices="0,1,2 3,4,5 "
  Normals="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 "
  TextureCoordinates="0,0 1,0 1,1 1,1 0,1 0,0 "
  Positions="-0.5,-0.5,0.5 0.5,-0.5,0.5 0.5,0.5,0.5 0.5,0.5,0.5 -0.5,0.5,0.5 -0.5,-0.5,0.5 " />

    <MeshGeometry3D 
  presentationOptions:Freeze="True"
  x:Key="CubeSide03"
  TriangleIndices="0,1,2 3,4,5 "
  Normals="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 "
  TextureCoordinates="1,0 1,1 0,1 0,1 0,0 1,0 "
  Positions="0.5,-0.5,-0.5 0.5,0.5,-0.5 0.5,0.5,0.5 0.5,0.5,0.5 0.5,-0.5,0.5 0.5,-0.5,-0.5 " />

    <MeshGeometry3D 
  presentationOptions:Freeze="True"
  x:Key="CubeSide04"
  TriangleIndices="0,1,2 3,4,5 "
  Normals="1,0,0 1,0,0 1,0,0 1,0,0 1,0,0 1,0,0 "
  TextureCoordinates="1,0 1,1 0,1 0,1 0,0 1,0 "
  Positions="-0.5,-0.5,-0.5 -0.5,0.5,-0.5 0.5,0.5,-0.5 0.5,0.5,-0.5 0.5,-0.5,-0.5 -0.5,-0.5,-0.5 " />

    <MeshGeometry3D 
  presentationOptions:Freeze="True"
  x:Key="CubeSide05"
  TriangleIndices="0,1,2 3,4,5 6,7,8 9,10,11 "
  Normals="0,-1,0 0,-1,0 0,-1,0 0,-1,0 0,-1,0 0,-1,0 0,1,0 0,1,0 0,1,0 0,1,0 0,1,0 0,1,0 "
  TextureCoordinates="0,0 1,0 1,1 1,1 0,1 0,0 1,1 0,1 0,0 0,0 1,0 1,1 "
  Positions="-0.5,-0.5,-0.5 -0.5,0.5,0.5 -0.5,-0.5,0.5   0.5,-0.5,0.5 -0.5,-0.5,-0.5 -0.5,0.5,-0.5   
                      0.5,0.5,-0.5 -0.5,0.5,-0.5 -0.5,0.5,0.5  -0.5,0.5,0.5 0.5,0.5,0.5 0.5,0.5,-0.5 " />

    <MeshGeometry3D 
  presentationOptions:Freeze="True"
  x:Key="CubeSide06"
  TriangleIndices="0,1,2 3,4,5 6,7,8 9,10,11 "
  Normals="-1,0,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0 -1,0,0 "
  TextureCoordinates="1,0 1,1 0,1 0,1 0,0 1,0 "
  Positions="-0.5,-0.5,0.5 -0.5,-0.5,-0.5 0.5,-0.5,-0.5   0.5,-0.5,-0.5 0.5,-0.5,0.5 -0.5,-0.5,0.5" />

    <!-- 3D Materials -->
    <MaterialGroup x:Key="LeavesMaterial1"
  presentationOptions:Freeze="True">
        <DiffuseMaterial>
            <DiffuseMaterial.Brush>
                <ImageBrush Stretch="UniformToFill" ImageSource="sample_images\leaves_closeup.png" TileMode="None" ViewportUnits="Absolute" Viewport="0 0 1 1" AlignmentX="Left" AlignmentY="Top" Opacity="1.000000" />
            </DiffuseMaterial.Brush>
        </DiffuseMaterial>
        <SpecularMaterial SpecularPower="85.3333">
            <SpecularMaterial.Brush>
                <SolidColorBrush Color="#FFFFFF" Opacity="1.000000"/>
            </SpecularMaterial.Brush>
        </SpecularMaterial>
    </MaterialGroup>

    <MaterialGroup x:Key="RocksMaterial"
  presentationOptions:Freeze="True">
        <DiffuseMaterial>
            <DiffuseMaterial.Brush>
                <ImageBrush Stretch="UniformToFill" ImageSource="sample_images\rocks.png" TileMode="None" ViewportUnits="Absolute" Viewport="0 0 1 1" AlignmentX="Left" AlignmentY="Top" Opacity="1.000000" />
            </DiffuseMaterial.Brush>
        </DiffuseMaterial>
        <SpecularMaterial SpecularPower="85.3333">
            <SpecularMaterial.Brush>
                <SolidColorBrush Color="#FFFFFF" Opacity="1.000000"/>
            </SpecularMaterial.Brush>
        </SpecularMaterial>
    </MaterialGroup>

    <MaterialGroup x:Key="BranchesMaterial"
  presentationOptions:Freeze="True">
        <DiffuseMaterial>
            <DiffuseMaterial.Brush>
                <ImageBrush Stretch="UniformToFill" ImageSource="sample_images\branches.png" TileMode="None" ViewportUnits="Absolute" Viewport="0 0 1 1" AlignmentX="Left" AlignmentY="Top" Opacity="1.000000" />
            </DiffuseMaterial.Brush>
        </DiffuseMaterial>
        <SpecularMaterial SpecularPower="85.3333">
            <SpecularMaterial.Brush>
                <SolidColorBrush Color="#FFFFFF" Opacity="1.000000"/>
            </SpecularMaterial.Brush>
        </SpecularMaterial>
    </MaterialGroup>
    <MaterialGroup x:Key="BerriesMaterial"
  presentationOptions:Freeze="True">
        <DiffuseMaterial>
            <DiffuseMaterial.Brush>
                <ImageBrush Stretch="UniformToFill" ImageSource="sample_images\berries.jpg" TileMode="None" ViewportUnits="Absolute" Viewport="0 0 1 1" AlignmentX="Left" AlignmentY="Top" Opacity="1.000000" />
            </DiffuseMaterial.Brush>
        </DiffuseMaterial>
        <SpecularMaterial SpecularPower="85.3333">
            <SpecularMaterial.Brush>
                <SolidColorBrush Color="#FFFFFF" Opacity="1.000000"/>
            </SpecularMaterial.Brush>
        </SpecularMaterial>
    </MaterialGroup>
    <MaterialGroup x:Key="FlowersMaterial"
  presentationOptions:Freeze="True">
        <DiffuseMaterial>
            <DiffuseMaterial.Brush>
                <ImageBrush Stretch="UniformToFill" ImageSource="sample_images\Waterlilies.png" ViewportUnits="Absolute" 
        Viewport="0 0 1 1" AlignmentX="Left" AlignmentY="Top" Opacity="1.000000" />
            </DiffuseMaterial.Brush>
        </DiffuseMaterial>
        <SpecularMaterial SpecularPower="85.3333">
            <SpecularMaterial.Brush>
                <SolidColorBrush Color="#FFFFFF" Opacity="1.000000"/>
            </SpecularMaterial.Brush>
        </SpecularMaterial>
    </MaterialGroup>
    <MaterialGroup x:Key="SunsetMaterial"
  presentationOptions:Freeze="True">
        <DiffuseMaterial>
            <DiffuseMaterial.Brush>
                <ImageBrush Stretch="UniformToFill" ImageSource="sample_images\Sunset.jpg" ViewportUnits="Absolute" 
        Viewport="0 0 1 1" AlignmentX="Left" AlignmentY="Top" Opacity="1.000000" />
            </DiffuseMaterial.Brush>
        </DiffuseMaterial>
        <SpecularMaterial SpecularPower="85.3333">
            <SpecularMaterial.Brush>
                <SolidColorBrush Color="#FFFFFF" Opacity="1.000000"/>
            </SpecularMaterial.Brush>
        </SpecularMaterial>
    </MaterialGroup>
    <MaterialGroup x:Key="SolidColorMaterial"
  presentationOptions:Freeze="True">
        <DiffuseMaterial>
            <DiffuseMaterial.Brush>
                <SolidColorBrush Color="Orange" Opacity="1.000000"/>
            </DiffuseMaterial.Brush>
        </DiffuseMaterial>
        <SpecularMaterial SpecularPower="85.3333">
            <SpecularMaterial.Brush>
                <SolidColorBrush Color="#FFFFFF" Opacity="1.000000"/>
            </SpecularMaterial.Brush>
        </SpecularMaterial>
    </MaterialGroup>

三、组合成呈现 Model3D 对象的 Visual3D：ModelVisual3D

  1. ModelVisual3D只设置其子项Children包含的以上各面几何模型Model3D，以及2个包含2种光源的Model3D组合成立方体
  2. 以上作为静态资源赋值到Viewport3D的children上
 <!-- Model3DVisuals -->
<ModelVisual3D x:Key="PictureCubeModelVisual3DResource">
    <ModelVisual3D.Children>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <AmbientLight Color="#333333" />
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <DirectionalLight Color="#FFFFFF" Direction="-0.612372,-0.5,-0.612372" />
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <DirectionalLight Color="#FFFFFF" Direction="0.612372,-0.5,-0.612372" />
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <GeometryModel3D Geometry="{StaticResource CubeSide01}" Material="{StaticResource BranchesMaterial}"/>
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <GeometryModel3D Geometry="{StaticResource CubeSide02}" Material="{StaticResource FlowersMaterial}"/>
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <GeometryModel3D Geometry="{StaticResource CubeSide03}" Material="{StaticResource BerriesMaterial}"/>
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <GeometryModel3D Geometry="{StaticResource CubeSide04}" Material="{StaticResource LeavesMaterial1}"/>
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <GeometryModel3D Geometry="{StaticResource CubeSide05}" Material="{StaticResource RocksMaterial}"/>
            </ModelVisual3D.Content>
        </ModelVisual3D>
        <ModelVisual3D>
            <ModelVisual3D.Content>
                <GeometryModel3D Geometry="{StaticResource CubeSide06}" Material="{StaticResource SunsetMaterial}"/>
            </ModelVisual3D.Content>
        </ModelVisual3D>
    </ModelVisual3D.Children>
</ModelVisual3D>

四、设置KeySpline参数控制图表

  1. 图表中线点元素是作为一个绘图集合DrawingGroup赋值到绘制图形DrawingImage.Drawing属性上。DrawingImage作为一个图像源来在Image元素上显示。
  2. 背景GeometryDrawing：方格背景，使用静态资源画刷，一个输出区域矩形。
  3. 曲线GeometryDrawing:设置贝塞尔曲线BezierSegment（需两个控制点）的路径Path的几何绘图GeometryDrawing,加上一个画笔属性。
  4. 设置GeometryDrawing:端点处2g黑色几个何圆点
  5. 2个X/Y轴上红、蓝色控制圆点

的GeometryDrawing。

  1. 2个X、Y轴红色线条的GeometryDrwing，设置TranslateTransform实例，后台进行移动控制。
<!-- Provides an animated illustration of the spline. -->
<Image Width="200" Height="200">
  <Image.Source>
    <DrawingImage>
      <DrawingImage.Drawing>
        <DrawingGroup>

          <GeometryDrawing presentationOptions:Freeze="True"
            Brush="{StaticResource MyPartiallyTransparentGridBrushResource}">
            <GeometryDrawing.Geometry>
              <RectangleGeometry Rect="0,0,101,101" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing>
            <GeometryDrawing.Geometry>
              <PathGeometry>
                <PathFigure StartPoint="0,100">
                  <BezierSegment x:Name="SplineIllustrationSegment"
                    Point1="0,100" Point2="0,100" Point3="100,0" />
                </PathFigure>
              </PathGeometry>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Pen>
              <Pen Thickness="1" Brush="Black" />
            </GeometryDrawing.Pen>
          </GeometryDrawing>
          <GeometryDrawing Brush="Gray" presentationOptions:Freeze="True">
            <GeometryDrawing.Geometry>
              <GeometryGroup>
                <EllipseGeometry
                  Center="0,100"
                  RadiusX="2" RadiusY="2" />
                <EllipseGeometry
                  Center="100,0"
                  RadiusX="2" RadiusY="2" />
              </GeometryGroup>
            </GeometryDrawing.Geometry>
            <GeometryDrawing.Pen>
              <Pen Thickness="1" Brush="Black" />
            </GeometryDrawing.Pen>
          </GeometryDrawing>
          <GeometryDrawing Brush="Red">
            <GeometryDrawing.Geometry>
              <EllipseGeometry
                x:Name="SplineControlPoint1Marker"
                Center="0,100"
                RadiusX="2" RadiusY="2" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing Brush="RoyalBlue">
            <GeometryDrawing.Geometry>
              <EllipseGeometry
                x:Name="SplineControlPoint2Marker"
                Center="0,100"
                RadiusX="2" RadiusY="2" />
            </GeometryDrawing.Geometry>
          </GeometryDrawing>
          <GeometryDrawing Brush="Orange">
            <GeometryDrawing.Pen>
              <Pen Thickness="1" Brush="Red" />
            </GeometryDrawing.Pen>
            <GeometryDrawing.Geometry>
              <GeometryGroup>
                <GeometryGroup>
                  <EllipseGeometry
                    Center="0,0" RadiusX="2" RadiusY="2" />
                  <LineGeometry StartPoint="2,0" EndPoint="102,0" />
                    <GeometryGroup.Transform>
                    <TranslateTransform Y="100" x:Name="SplineProgressTransform" />
                  </GeometryGroup.Transform>
                </GeometryGroup>
                <LineGeometry StartPoint="0,0" EndPoint="0,100">
                  <LineGeometry.Transform>
                    <TranslateTransform X="100" x:Name="TimeProgressTransform" />
                  </LineGeometry.Transform>
                </LineGeometry>
              </GeometryGroup>
            </GeometryDrawing.Geometry>
          </GeometryDrawing>

        </DrawingGroup>
      </DrawingImage.Drawing>
    </DrawingImage>
  </Image.Source>
</Image>

五、图表及立方体的动画触发

  1. 对KeySpline控制线的Y轴KeySpline帧动画
  2. 对时间线的X轴均匀动画
  3. 对立方体的X轴KeySpline帧动画
<EventTrigger RoutedEvent="Page.Loaded">
  <BeginStoryboard Name="ExampleBeginStoryboard">

    <!-- Although the animations is this storyboard are databound, 
         their clocks won't be automatically regenerated as
         their databound properties change. -->
    <Storyboard x:Name="ExampleStoryboard">

      <!-- Animates the spline progress illustration. -->
      <DoubleAnimationUsingKeyFrames 
        Storyboard.TargetName="SplineProgressTransform" 
        Storyboard.TargetProperty="Y" 
        Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever">
        <DiscreteDoubleKeyFrame Value="100" KeyTime="0%" />
        <SplineDoubleKeyFrame x:Name="mySplineKeyFrame" 
          Value="0" KeySpline="0.0,0.0 0.0,0.0" KeyTime="100%"/>
      </DoubleAnimationUsingKeyFrames>

      <DoubleAnimation 
        Storyboard.TargetName="TimeProgressTransform" 
        Storyboard.TargetProperty="X"
        From="0" To="100" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />

       <!--Animates the 3-D picture cube using
           splined interpolation.--> 
      <DoubleAnimationUsingKeyFrames 
        Storyboard.TargetName="myTranslateTransform3D"
        Storyboard.TargetProperty="OffsetX"
        AutoReverse="True" Duration="0:0:5" RepeatBehavior="Forever">
        <DiscreteDoubleKeyFrame Value="-2.5" KeyTime="0%" />
        <SplineDoubleKeyFrame x:Name="myVector3DSplineKeyFrame" 
          Value="2.5" KeySpline="0.0,0.0 0.0,0.0" KeyTime="100%"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>
  </Page.Triggers>

六、滑块移动事件驱动画面更新

  1. 在每次有滑值变动时找到对应的变动控制点
  2. 重新设置图标中曲线对应控制点的坐标
  3. 重新设置立方体平移帧动画的2个控制点
  4. 设置图标中控制点及移动轴线的坐标
  5. 针对页面触发的演示版动画更新，重定位
public partial class SplineExample : Page
{
    private Point _controlPoint1 = new Point(0, 100);
    private Point _controlPoint2 = new Point(0, 100);

    private void OnSliderChanged(object sender, RoutedEventArgs e)
    {
        // Retrieve the name of slider.
        var name = ((Slider) sender).Name;

        var args = e as RoutedPropertyChangedEventArgs<double>;

        switch (name)
        {
            case "SliderControlPoint1X":
                mySplineKeyFrame.KeySpline.ControlPoint1 = new Point(args.NewValue,
                    mySplineKeyFrame.KeySpline.ControlPoint1.Y);
                _controlPoint1.X = 100*args.NewValue;
                break;
            case "SliderControlPoint1Y":
                mySplineKeyFrame.KeySpline.ControlPoint1 = new Point(mySplineKeyFrame.KeySpline.ControlPoint1.X,
                    args.NewValue);
                _controlPoint1.Y = 100 - (100*args.NewValue);
                break;
            case "SliderControlPoint2X":
                mySplineKeyFrame.KeySpline.ControlPoint2 = new Point(args.NewValue,
                    mySplineKeyFrame.KeySpline.ControlPoint2.Y);
                _controlPoint2.X = 100*args.NewValue;
                break;
            case "SliderControlPoint2Y":
                mySplineKeyFrame.KeySpline.ControlPoint2 = new Point(mySplineKeyFrame.KeySpline.ControlPoint2.X,
                    args.NewValue);
                _controlPoint2.Y = 100 - (100*args.NewValue);
                break;
        }


        // Update the animations and illustrations.
        myVector3DSplineKeyFrame.KeySpline.ControlPoint1 = mySplineKeyFrame.KeySpline.ControlPoint1;
        myVector3DSplineKeyFrame.KeySpline.ControlPoint2 = mySplineKeyFrame.KeySpline.ControlPoint2;


        SplineIllustrationSegment.Point1 = _controlPoint1;
        SplineIllustrationSegment.Point2 = _controlPoint2;
        SplineControlPoint1Marker.Center = _controlPoint1;
        SplineControlPoint2Marker.Center = _controlPoint2;

        keySplineText.Text =
            "KeySpline=\"" + mySplineKeyFrame.KeySpline.ControlPoint1.X.ToString("N") + "," +
            mySplineKeyFrame.KeySpline.ControlPoint1.Y.ToString("N") + " " +
            mySplineKeyFrame.KeySpline.ControlPoint2.X.ToString("N") + "," +
            mySplineKeyFrame.KeySpline.ControlPoint2.Y.ToString("N") + "\"";


        // Determine the storyboard's current time.
        TimeSpan? oldTime = (TimeSpan) ExampleStoryboard.GetCurrentTime(this);

        // Generate new clocks for the animations by calling 
        // the Begin method.
        ExampleStoryboard.Begin(this, true);

        // Because the storyboard was reset, advance it to its previous
        // position using the Seek method.
        ExampleStoryboard.Seek(this, (TimeSpan) oldTime, TimeSeekOrigin.BeginTime);

        //以下为单独在Viewport3D容器下更新其演示版动画
        //TimeSpan? oldTime1 = (TimeSpan)my3DModelStoryboard.GetCurrentTime(myViewport3D);
        //my3DModelStoryboard.Begin(myViewport3D, true);
        //my3DModelStoryboard.Seek(myViewport3D, (TimeSpan)oldTime1, TimeSeekOrigin.BeginTime);
        
    }
}

其他具体关注知识点见下一章

weixin_34236497
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF 基础视频教程（共50集）-48.关键帧动画
04-16
在本节WPF基础视频教程中，我们聚焦于"关键帧动画"这一核心概念，它在Windows Presentation Foundation (WPF)的动态效果呈现方面扮演着重要角色。关键帧动画允许开发者创建复杂、平滑且精确控制的时间序列动画，极大...
WPF 基本动画、关键帧动画和路径动画示例
12-14
WPF动画的使用，包括DoubleAnimation、ColorAnimation、PointAnimation、ColorAnimationUsingKeyFrames、DoubleAnimationUsingKeyFrames、PointAnimationUsingKeyFrames、StringAnimationUsingKeyFrames、...
WPF 3D 贴图： 为你的二次元老婆们做个3D画廊
微小冷的学习笔记
04-17 1853
接下来想做一个图廊，所以并没有必要用立方体，只需做一些“墙壁”就行了。所以本文的新内容实质上就是如何使用贴图。
WPF中如何解决3d模型与贴图不能完全匹配的问题
起飞 踏上.NET Framework 3.5开发之旅
12-04 7588
       大家可能有所解了WPF具有处理3D图形的能力，它可以导入第三方三维软件（3dsmax等）的三维模型文件obj格式文件，而且可以给模型对象添加材质、灯光和摄像机等来实现三维场景效果。有时我们也会碰到材质贴图无法正确贴到模型上的问题。举个简单的例子来说，vista操作系统任务栏中有个三维快速切换动画效果（用过vista系统的人应该体验过了吧），如果我们要使用wpf来实现这效果也很容易，首
WPF动画案例
qq_37343780的博客
03-17 478
WPF动画案例/图表动画 前台代码 <Page x:Class="AnimationExamples.SplineExample" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" > <Page.Triggers> <EventTrigger RoutedEve
WPF：Animation动画--KeySplineAnimation关键帧进度控制动画（2）
weixin_33963189的博客
02-21 221
关注知识点： 一、剪切ClipToBounds="True"的改动实现效果以上设置不剪切边界，并设置镜头位置Position="1,0.5,6"右移，则视野里3D模型会偏左移出边界。二、ViewBox包含Viewport3D布局 内容装饰器ViewBox包含唯一Child的UIElement元素，而Viewport3D继承Framewo...
WPF-Animation.rar_WPF_WPF 动画_WPF 视频_wpf Animation_wpf animation
09-19
标题"**WPF-Animation.rar**"明确指出我们的焦点在于WPF的动画特性，这允许开发者创建流畅的过渡、动态效果和复杂的交互性。这个压缩包包含了相关的视频教程，可以帮助学习者逐步理解并掌握WPF动画的制作技巧。 ...
WPF通过代码编写关键帧动画
12-05
关键帧动画（KeyFrame Animation）属于故事板（Storyboard）的一部分，通过多个关键帧定义动画的过程。每个关键帧代表动画的一个时间点，定义了该时间点上属性的值。通过连接这些关键帧，我们可以创建出平滑过渡的...
WPF图项目 - 不同的连接线类型，连接动画
最新发布
03-20
**WPF 图形项目：连接线类型与动画详解** 在Windows Presentation Foundation (WPF)中，开发者可以利用其丰富的图形和动画功能创建出各种复杂的用户界面。本项目聚焦于一个特定的领域——在画布上建立不同类型的...
C#_CAD二次开发_批量将样条曲线Spline转化为多段线Plyline（代码）
06-27
C#_CAD二次开发_批量将样条曲线Spline转化为多段线Plyline（代码）
WPF 切换图片动画效果Demo
09-28
WPF 切换图片动画效果 Demo 在同一个Image控件中，改变Source属性时动画实现
Wpf 图片加载动画
12-07
WPF加载图片，图片加载完成之前显示正在加载中。
WPF编程，通过Path类型制作沿路径运动的动画一种方法。
weixin_30611509的博客
04-18 247
WPF编程，通过Path类型制作沿路径运动的动画一种方法。 原文:WPF编程，通过Path类型制作沿路径运动的动画一种方法。 版权声明：我不生产代码，我只是代码的搬运工。 https://blog.csdn.net/qq_43307934/article/...
wpf 设置x轴于Y轴动画
zhangj391的专栏
11-04 928
Point curPoint = new Point();             curPoint.X = Canvas.GetLeft(ell);             curPoint.Y = Canvas.GetTop(ell);             double _s = System.Math.Sqrt(Math.Pow((deskPoint.X - curPoin
【WPF学习】第五十四章 关键帧动画
深蓝旭的博客
04-12 712
　　到目前为止，看到的所有动画都使用线性插值从起点到终点。但如果需要创建具有多个分段的动画和不规则移动的动画。例如，可能希望创建一个动画，快速地将一个元素滑入到视图中，然后慢慢地将它移到正确位置。可通过创建两个连续的动画，并使用BeginTime属性在第一个动画之后开始第二个动画来实现这种效果。然而，还有更简单的方法——可使用关键帧动画。 　　关键帧动画是由许多较短的段构成的动画。每段表示动画中的初始值，最终值或中间值当运行动画时，它平滑地从一个值移到另一个值。 　　例如，分析下面的将RadialGrad.
【朝夕教育】2023年04月 WPF运动控制平台-004.运动控制平台轴卡通用类的封装
热门推荐
微软MVP Eleven
04-19 1万+
【代码】【朝夕教育】2023年04月 WPF运动控制平台-004.运动控制平台轴卡通用类的封装。
WPF：Animation动画--AnimationExample综合动画实例（3）
weixin_34239169的博客
02-23 319
TextAnimationExamaple字体动画效果 应用文本TextEffect: 对文本每个文字应用旋转变换， 针对变换的属性角度Angle、中心点Center、文字；文本效果TextEffect的属性PositionStart <!-- The TextEffect to animate. --> <T...
《15天玩转WPF》—— 优美的动画详解（完结篇）
浪子花梦
04-05 2631
时间来到了 4月5日，清明已过，吾辈继续努力 . . . 这一篇写完之后，以后就用WPF写一些小程序了，之后开始算法的学习 . . . 那时少年，万花皆有逐梦时 . . . 文章目录 何为动画？ 简单独立动画 2.1 简单线性动画 2.2 高级动画控制 2.3 关键帧动画 2.4 特殊的关键帧 2.5 路径动画 场景 我们可以看出来，独立动画分为很多种，如果我们可以灵活的使...
WPF：数据绑定--PriorityBinding优先级绑定
05-27
PriorityBinding 是 WPF 中的一个数据绑定方式，它可以用于在多个绑定源之间进行优先级绑定。具体来说，PriorityBinding 将多个 Binding 对象按照优先级顺序进行排列，并将数据绑定到第一个能够提供有效值的 Binding...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值