C# WPF 动画在错误的地方跳跃和结束
C# WPF animation jumping and ending in wrong place
我的一些函数有问题...
下面的代码获取一个对象并简单地将其沿 x 轴移动指定数量的像素。 (我在 y 轴上有另一个)
private void AnimObject_Horizontal( FrameworkElement p_Object, double p_X, int p_Millisec ) {
// Find out the actual position on the screen
Point l_Start = p_Object.TransformToAncestor( m_Canvas ).Transform( new Point( 0, 0 ) );
// Adjust the position, subtracting the Margins, that are set at initialization, because the margin is automaticly added to the PathPoints by C#
l_Start.X -= p_Object.Margin.Left;
l_Start.Y -= p_Object.Margin.Top;
// Create the path for the object to follow. Moving horizontally is just a straight line, so I just need to set the StartPoint and add a single point, which will be the end
PathGeometry l_PathGeo = new PathGeometry();
PathFigure l_PathFigure = new PathFigure();
l_PathFigure.StartPoint = new Point(l_Start.X, l_Start.Y);
LineSegment l_LineSegment = new LineSegment( new Point(l_Start.X + p_X, l_Start.Y ), false);
l_PathFigure.Segments.Add( l_LineSegment );
l_PathGeo.Figures.Add( l_PathFigure );
l_PathGeo.Freeze();
// Create both DoubleAnimations that animate the X and Y value of the given Object
Transform l_Transform_ = new TranslateTransform();
DoubleAnimationUsingPath translateXAnimation_ = new DoubleAnimationUsingPath();
translateXAnimation_.PathGeometry = l_PathGeo;
translateXAnimation_.Duration = TimeSpan.FromMilliSeconds( p_Millisec );
translateXAnimation_.Source = PathAnimationSource.X;
DoubleAnimationUsingPath translateYAnimation_ = new DoubleAnimationUsingPath();
translateYAnimation_.PathGeometry = l_PathGeo;
translateYAnimation_.Duration = TimeSpan.FromMilliSeconds( p_Millisec );
translateYAnimation_.Source = PathAnimationSource.Y;
// Set the object as animationtarget and add Eventhandler (One is enough, because they will both end at the same time (Almost atleast)
p_Object.RenderTransform = l_Transform_;
Storyboard.SetTarget( translateXAnimation_, p_Object );
translateXAnimation_.Completed += AnimationHorizontalComplete;
// Start both animations
l_Transform_.BeginAnimation( TranslateTransform.XProperty, translateXAnimation_ );
l_Transform_.BeginAnimation( TranslateTransform.YProperty, translateYAnimation_ );
}
虽然此对象将对象移动四分之一圆:
private void AnimObject_LeftToBottom( FrameworkElement p_Object, double p_Radius, int p_Millisec ) {
Point l_Start = p_Object.TransformToAncestor( m_Canvas ).Transform( new Point( 0, 0 ) );
l_Start.X -= p_Object.Margin.Left;
l_Start.Y -= p_Object.Margin.Top;
// Convert 15 degrees to radians
double l_Angle_15 = 15 * Math.PI / 180;
PathGeometry l_Path = new PathGeometry();
PathFigure l_Figure = new PathFigure();
l_Figure.StartPoint = l_Start;
PolyBezierSegment l_BezierSegment = new PolyBezierSegment();
// Create a quarter-circle-path with beziersegmens. There will be the Startpoint and another point each 15 degrees to form a quarter-circle.
for ( int i = 1 ; i < 7 ; i++ ) {
l_BezierSegment.Points.Add( new Point( l_Start.X + p_Radius * Math.Sin( l_Angle_15 * i ), l_Start.Y + p_Radius - p_Radius * Math.Cos( l_Angle_15 * i ) ) );
}
l_Figure.Segments.Add( l_BezierSegment );
l_Path.Figures.Add( l_Figure );
l_Path.Freeze();
Transform l_Transform_ = new TranslateTransform();
DoubleAnimationUsingPath translateXAnimation_ = new DoubleAnimationUsingPath();
translateXAnimation_.PathGeometry = l_Path;
translateXAnimation_.Duration = TimeSpan.FromMilliSeconds( p_Millisec );
translateXAnimation_.Source = PathAnimationSource.X;
DoubleAnimationUsingPath translateYAnimation_ = new DoubleAnimationUsingPath();
translateYAnimation_.PathGeometry = l_Path;
translateYAnimation_.Duration = TimeSpan.FromMilliSeconds( p_Millisec );
translateYAnimation_.Source = PathAnimationSource.Y;
p_Object.RenderTransform = l_Transform_;
Storyboard.SetTarget( translateXAnimation_, p_Object );
translateXAnimation_.Completed += AnimationLeftBotComplete;
l_Transform_.BeginAnimation( TranslateTransform.XProperty, translateXAnimation_ );
l_Transform_.BeginAnimation( TranslateTransform.YProperty, translateYAnimation_ );
}
如您所见,我向这些函数添加了 "Completed"-Events 并将它们链接起来。我在我的 canvas 中添加了一个图像,当我按下一个按钮时,图像首先沿着 x 轴移动,然后在底部画一个四分之一圆,然后沿着 y 轴移动。
我的问题是:
图像从 100,100 开始,应该移动到 200,100,一旦到达这个位置,它应该向下移动一个圆圈。
然而,在达到 200,100 之前不久,它跳转到第二个动画起点。 (或者它只是没有在应该结束的地方结束)
看看图片,它可能有助于理解我用我有点蹩脚的英语想说的话 ;)
AnimationProblem on tinypic
有人知道这种行为的原因吗?
提前问候和感谢,
雪拉
我自己修好了。
对于分享此问题的人:
以下代码行有点令人困惑,因为它没有按预期工作(至少在我看来是这样)。
Point l_Start = p_Object.TransformToAncestor( m_Canvas ).Transform( new Point( 0, 0 ) );
即使我在 (100, 100) 处创建一个对象,上面代码的结果也将是 (108.3, 100)。起初我认为原因可能是 window 的边界(即使我将 Canvas 的 0,0 设置为参考点),但这不是问题。如果我进入全屏模式,它仍然是一样的,所以这不是原因。
我不知道 8.3 是从哪里来的,我不知道这个问题是否只存在于我身上,或者它是否在每台计算机上都有不同的值。
我的一些函数有问题...
下面的代码获取一个对象并简单地将其沿 x 轴移动指定数量的像素。 (我在 y 轴上有另一个)
private void AnimObject_Horizontal( FrameworkElement p_Object, double p_X, int p_Millisec ) {
// Find out the actual position on the screen
Point l_Start = p_Object.TransformToAncestor( m_Canvas ).Transform( new Point( 0, 0 ) );
// Adjust the position, subtracting the Margins, that are set at initialization, because the margin is automaticly added to the PathPoints by C#
l_Start.X -= p_Object.Margin.Left;
l_Start.Y -= p_Object.Margin.Top;
// Create the path for the object to follow. Moving horizontally is just a straight line, so I just need to set the StartPoint and add a single point, which will be the end
PathGeometry l_PathGeo = new PathGeometry();
PathFigure l_PathFigure = new PathFigure();
l_PathFigure.StartPoint = new Point(l_Start.X, l_Start.Y);
LineSegment l_LineSegment = new LineSegment( new Point(l_Start.X + p_X, l_Start.Y ), false);
l_PathFigure.Segments.Add( l_LineSegment );
l_PathGeo.Figures.Add( l_PathFigure );
l_PathGeo.Freeze();
// Create both DoubleAnimations that animate the X and Y value of the given Object
Transform l_Transform_ = new TranslateTransform();
DoubleAnimationUsingPath translateXAnimation_ = new DoubleAnimationUsingPath();
translateXAnimation_.PathGeometry = l_PathGeo;
translateXAnimation_.Duration = TimeSpan.FromMilliSeconds( p_Millisec );
translateXAnimation_.Source = PathAnimationSource.X;
DoubleAnimationUsingPath translateYAnimation_ = new DoubleAnimationUsingPath();
translateYAnimation_.PathGeometry = l_PathGeo;
translateYAnimation_.Duration = TimeSpan.FromMilliSeconds( p_Millisec );
translateYAnimation_.Source = PathAnimationSource.Y;
// Set the object as animationtarget and add Eventhandler (One is enough, because they will both end at the same time (Almost atleast)
p_Object.RenderTransform = l_Transform_;
Storyboard.SetTarget( translateXAnimation_, p_Object );
translateXAnimation_.Completed += AnimationHorizontalComplete;
// Start both animations
l_Transform_.BeginAnimation( TranslateTransform.XProperty, translateXAnimation_ );
l_Transform_.BeginAnimation( TranslateTransform.YProperty, translateYAnimation_ );
}
虽然此对象将对象移动四分之一圆:
private void AnimObject_LeftToBottom( FrameworkElement p_Object, double p_Radius, int p_Millisec ) {
Point l_Start = p_Object.TransformToAncestor( m_Canvas ).Transform( new Point( 0, 0 ) );
l_Start.X -= p_Object.Margin.Left;
l_Start.Y -= p_Object.Margin.Top;
// Convert 15 degrees to radians
double l_Angle_15 = 15 * Math.PI / 180;
PathGeometry l_Path = new PathGeometry();
PathFigure l_Figure = new PathFigure();
l_Figure.StartPoint = l_Start;
PolyBezierSegment l_BezierSegment = new PolyBezierSegment();
// Create a quarter-circle-path with beziersegmens. There will be the Startpoint and another point each 15 degrees to form a quarter-circle.
for ( int i = 1 ; i < 7 ; i++ ) {
l_BezierSegment.Points.Add( new Point( l_Start.X + p_Radius * Math.Sin( l_Angle_15 * i ), l_Start.Y + p_Radius - p_Radius * Math.Cos( l_Angle_15 * i ) ) );
}
l_Figure.Segments.Add( l_BezierSegment );
l_Path.Figures.Add( l_Figure );
l_Path.Freeze();
Transform l_Transform_ = new TranslateTransform();
DoubleAnimationUsingPath translateXAnimation_ = new DoubleAnimationUsingPath();
translateXAnimation_.PathGeometry = l_Path;
translateXAnimation_.Duration = TimeSpan.FromMilliSeconds( p_Millisec );
translateXAnimation_.Source = PathAnimationSource.X;
DoubleAnimationUsingPath translateYAnimation_ = new DoubleAnimationUsingPath();
translateYAnimation_.PathGeometry = l_Path;
translateYAnimation_.Duration = TimeSpan.FromMilliSeconds( p_Millisec );
translateYAnimation_.Source = PathAnimationSource.Y;
p_Object.RenderTransform = l_Transform_;
Storyboard.SetTarget( translateXAnimation_, p_Object );
translateXAnimation_.Completed += AnimationLeftBotComplete;
l_Transform_.BeginAnimation( TranslateTransform.XProperty, translateXAnimation_ );
l_Transform_.BeginAnimation( TranslateTransform.YProperty, translateYAnimation_ );
}
如您所见,我向这些函数添加了 "Completed"-Events 并将它们链接起来。我在我的 canvas 中添加了一个图像,当我按下一个按钮时,图像首先沿着 x 轴移动,然后在底部画一个四分之一圆,然后沿着 y 轴移动。
我的问题是:
图像从 100,100 开始,应该移动到 200,100,一旦到达这个位置,它应该向下移动一个圆圈。
然而,在达到 200,100 之前不久,它跳转到第二个动画起点。 (或者它只是没有在应该结束的地方结束)
看看图片,它可能有助于理解我用我有点蹩脚的英语想说的话 ;)
AnimationProblem on tinypic
有人知道这种行为的原因吗?
提前问候和感谢, 雪拉
我自己修好了。 对于分享此问题的人:
以下代码行有点令人困惑,因为它没有按预期工作(至少在我看来是这样)。
Point l_Start = p_Object.TransformToAncestor( m_Canvas ).Transform( new Point( 0, 0 ) );
即使我在 (100, 100) 处创建一个对象,上面代码的结果也将是 (108.3, 100)。起初我认为原因可能是 window 的边界(即使我将 Canvas 的 0,0 设置为参考点),但这不是问题。如果我进入全屏模式,它仍然是一样的,所以这不是原因。 我不知道 8.3 是从哪里来的,我不知道这个问题是否只存在于我身上,或者它是否在每台计算机上都有不同的值。