windows8 WinRT PointAnimationUsingPath（WPF 路径动画 PathAnimation 的移植）

      在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