天天看點

WPF與緩動(四) 弧形緩動

原文:

WPF與緩動(四) 弧形緩動

                                                   WPF與緩動(四)  弧形緩動

                                                                        周銀輝

弧形緩動就是其緩動曲線為一段圓弧, 如何我們假設圓弧上的點的斜率為速度的話,那麼可以想像其速度的變化多麼具有戲劇性, 其加速或減速來得很突然, 與5次緩動差不多.

參考以下代碼:

WPF與緩動(四) 弧形緩動

 //圓形緩動

WPF與緩動(四) 弧形緩動

        protected override double GetCurrentValueCore(double defaultOriginValue, double defaultDestinationValue, AnimationClock animationClock)

WPF與緩動(四) 弧形緩動
WPF與緩動(四) 弧形緩動
WPF與緩動(四) 弧形緩動

{

WPF與緩動(四) 弧形緩動

            double from = (this.From==null?defaultDestinationValue:(double)this.From);

WPF與緩動(四) 弧形緩動

            double to = (this.To==null?defaultOriginValue:(double)this.To);

WPF與緩動(四) 弧形緩動

            double delta = to - from;

WPF與緩動(四) 弧形緩動

            double value = animationClock.CurrentProgress.Value;

WPF與緩動(四) 弧形緩動
WPF與緩動(四) 弧形緩動

            double t = value * this.Duration.TimeSpan.Ticks;

WPF與緩動(四) 弧形緩動

            double d = this.Duration.TimeSpan.Ticks;

WPF與緩動(四) 弧形緩動
WPF與緩動(四) 弧形緩動

            //加速

WPF與緩動(四) 弧形緩動

            //return delta * (1-Math.Sqrt(1-(t/=d)*t)) + from;

WPF與緩動(四) 弧形緩動
WPF與緩動(四) 弧形緩動

            //減速

WPF與緩動(四) 弧形緩動

            //return delta * Math.Sqrt(1 - (t = t / d - 1) * t) + from;

WPF與緩動(四) 弧形緩動
WPF與緩動(四) 弧形緩動

            //先加速,後減速

WPF與緩動(四) 弧形緩動

            if ((t /= (d / 2)) < 1)

WPF與緩動(四) 弧形緩動
WPF與緩動(四) 弧形緩動
WPF與緩動(四) 弧形緩動
WPF與緩動(四) 弧形緩動

                return delta / 2 * (1 - Math.Sqrt(1 - t * t)) + from;

WPF與緩動(四) 弧形緩動

            }

WPF與緩動(四) 弧形緩動

            return delta / 2 * (Math.Sqrt(1 - (t -= 2) * t) + 1) + from;

WPF與緩動(四) 弧形緩動
WPF與緩動(四) 弧形緩動

        }

下載下傳Demo