在WPF 中路径动画 是一个相当好用的功能,能使物体 沿着 Geometry 中的Path 行动。
但是在windows8 中这个功能省去了, 本文将主要介绍 如何在WinRT 中实现 PathAnimation
虽然在windows8中不支持 路径动画,但是有对关键帧动画的支持。
那么我们利用这个关键帧动画 来说下实现大体实现思路。
<Path Fill="Transparent" Stroke="Red">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="272.846160888672,110.038459777832" IsClosed="False">
<BezierSegment Point1="272.846160888672,110.038459777832" Point2="272.846160888672,110.038459777832" Point3="272.846160888672,110.038459777832"/>
<BezierSegment Point1="284.923065185547,108.5" Point2="296.769226074219,106.884613037109" Point3="308.961547851563,106.115386962891"/>
<BezierSegment Point1="350.807678222656,103.461540222168" Point2="393.038452148438,105.038459777832" Point3="434.961547851563,105.038459777832"/>
<BezierSegment Point1="498.807678222656,105.038459777832" Point2="562.230773925781,110.730766296387" Point3="626,112.961540222168"/>
<BezierSegment Point1="630.653869628906,113.115386962891" Point2="635.346130371094,112.884613037109" Point3="640,112.961540222168"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
我们先看下上面这段 BezierPath
每个BezierSegment 里面存在多个point 来描述一个线段。
将BezierPath中的每个点抽离出来 组成一个完整的 点路径,
将点 和总动画时间 来生成每一帧的LinearPointKeyFrame
(每帧动画时长 keyFrame.KeyTime = new TimeSpan(0, 0, 0, 0, (int)(Duration.TimeSpan.TotalMilliseconds * fractionOfOverAllLength)); )
最终将多个PointAnimation 组成一个Storyboard 来执行,最终就实现了pathAnimation。
当然这样的做法有一定弊端,当 线条过长时生成时间较长,
那么一个在不需要精细路径动画的情况下 我们需要一个描述精细度的 依赖项 来控制这些帧数。
#region Tolerance DP
public double Tolerance
{
get { return (double)GetValue(ToleranceProperty); }
set { SetValue(ToleranceProperty, value); }
}
public static readonly DependencyProperty ToleranceProperty =
DependencyProperty.Register("Tolerance", typeof(double), typeof(BaseAnimationUsingPath),
new PropertyMetadata((double)10.0,
new PropertyChangedCallback(OnTolerancePropertyChanged)));
static void OnTolerancePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
BaseAnimationUsingPath anim = d as BaseAnimationUsingPath;
if (anim == null)
return;
if (e.NewValue == e.OldValue)
return;
double value = (double)e.NewValue;
if (value <= 0.0)
anim.Tolerance = 10.0;
anim.IsStoryDirty = true;
}
#endregion
这个Tolerance 将控制线条精细度 来控制动画执行效率,
当然如果你将他设置为0的话 线条将会变的非常粗糙。
demo地址:http://download.csdn.net/detail/wangrenzhu2011/5291728