? WPF與緩動(dòng)(一)? N次緩動(dòng)
??????????????????????????????????????????????????????????????????????????????? ?????? 周銀輝

如果我們希望制作的動(dòng)畫(huà)效果像現(xiàn)實(shí)生活中的運(yùn)動(dòng)一樣平滑, 比如汽車(chē)的啟動(dòng)與停止總有一個(gè)加速或減速的過(guò)程, 那么我們有必要研究一下"緩動(dòng)"

緩入: 速度逐漸增加的過(guò)程,比如汽車(chē)的啟動(dòng)
如果我們用曲線上的點(diǎn)的斜率表示速度,那么在數(shù)學(xué)上它對(duì)應(yīng)了下面這樣的曲線:

緩出:速度逐漸減小的過(guò)程,比如汽車(chē)的停止
在數(shù)學(xué)上它對(duì)應(yīng)了下面的曲線

就加速運(yùn)動(dòng)而言,? 根據(jù)以下位置與加速度等公式

我們可以得到,任意時(shí)刻的速度等于總的路程乘以當(dāng)前時(shí)間與總時(shí)間的比值的平方, 而總的路程實(shí)際將相當(dāng)與WPF中Animation的To與From的差值, 當(dāng)前時(shí)間與總時(shí)間的比值實(shí)際上相當(dāng)與WPF中animationClock.CurrentProgress.Value值.
除此之外,我們發(fā)現(xiàn),曲線的指數(shù)越大,點(diǎn)的斜率變化越快,那么加速度也就越大.
有了這些知識(shí),我們可以很好的模擬加速運(yùn)動(dòng)了
參考以下代碼

using?System;
using?System.Collections.Generic;
using?System.Text;
using?System.Windows.Media.Animation;
using?System.Windows;

namespace?EaseMoveDemo
{
????public?class?EaseMoveAnimation?:?DoubleAnimationBase
????{

????????public?static?readonly?DependencyProperty?FromProperty?=?DependencyProperty.Register(
????????????"From",?typeof(double?),?typeof(EaseMoveAnimation),?new?PropertyMetadata(null));

????????public?static?readonly?DependencyProperty?ToProperty?=?DependencyProperty.Register(
????????????"To",?typeof(double?),?typeof(EaseMoveAnimation),?new?PropertyMetadata(null));

????????public?static?readonly?DependencyProperty?PowerProperty?=?DependencyProperty.Register(
????????????"Power",?typeof(double?),?typeof(EaseMoveAnimation),?new?PropertyMetadata(null));

????????public?double??From
????????{
????????????get
????????????{
????????????????return?(double?)this.GetValue(EaseMoveAnimation.FromProperty);
????????????}
????????????set
????????????{
????????????????this.SetValue(EaseMoveAnimation.FromProperty,?value);
????????????}
????????}

????????public?double??To
????????{
????????????get
????????????{
????????????????return?(double?)this.GetValue(EaseMoveAnimation.ToProperty);
????????????}
????????????set
????????????{
????????????????this.SetValue(EaseMoveAnimation.ToProperty,?value);
????????????}
????????}

????????/**////?<summary>
????????///?冪指數(shù),值越大,曲線上點(diǎn)的斜率越大,加速度越大,設(shè)置為5時(shí)效果較好
????????///?</summary>
????????public?double??Power
????????{
????????????get
????????????{
????????????????return?(double?)this.GetValue(EaseMoveAnimation.PowerProperty);
????????????}
????????????set
????????????{
????????????????this.SetValue(EaseMoveAnimation.PowerProperty,?value);
????????????}
????????}

????????protected?override?double?GetCurrentValueCore(double?defaultOriginValue,?double?defaultDestinationValue,?AnimationClock?animationClock)
????????{
????????????double?from?=?(this.From==null?defaultDestinationValue:(double)this.From);
????????????double?to?=?(this.To==null?defaultOriginValue:(double)this.To);
????????????double?delta?=?to?-?from;
????????????double?power?=?this.Power?==?null???2?:?(double)this.Power;

????????????//加速
????????????return?delta?*?Math.Pow(animationClock.CurrentProgress.Value,?power)?+?from;
????????????//return?delta?*?Math.Pow(animationClock.CurrentProgress.Value,?1/power)?+?from;

????????????//先加速后減速
????????????//if?(animationClock.CurrentProgress.Value?<?0.5)
????????????//{
????????????//????return?delta?/?2?*?Math.Pow(animationClock.CurrentProgress.Value?*?2,?power)?+?from;
????????????//}
????????????//return?delta?/?2?*?Math.Pow((animationClock.CurrentProgress.Value?-?0.5)?*?2,?1/power)?+?delta?/?2?+?from;
????????}


????????protected?override?System.Windows.Freezable?CreateInstanceCore()
????????{
????????????return?new?EaseMoveAnimation();
????????}
????}
}

下載源代碼

總結(jié)

以上是生活随笔為你收集整理的WPF与缓动(一) N次缓动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。