WPF觸控程序開發(三)——相似IPhone相冊的反彈效果

     用過IPhone的都知道，IPhone相冊裏，當圖片放大到必定程度後，手指一放，會自動縮回，移動圖片超出邊框後手指一放，圖片也會自動縮回，整個過程很是和諧、天然、精確，那麼WPF可否作到呢，答案是確定的。

     在沒有現成的控件的狀況下，只有本身作，你確定想到作動畫，WPF觸屏開發提供了相應的功能來獲取觸控點的一些變化，這些變化的最佳消費者我的認爲是Matrix。咱們回想下作動畫通常怎麼作，好比給一個button作個寬度增5的動畫，咱們通常是定義一個DoubleAnimation，而後定義一個Sotryboard，而後用Sotryboard的靜態方法SetTargetProperty設置UI對象和動畫做用的依賴屬性。按照這樣的步驟，咱們給UI的Matrix作動畫，發現，找不到這樣的一個相似DoubleAnimation的動畫類，Matrix也沒有相似Button.WidthProperty這樣的依賴屬性。也許你會說Matrix的屬性OffsetX,M11什麼的都是double類型，能夠對其設置動畫，可是Storyboard應用的對象必須是繼承自DependencyProperty的，因此是不可能在Matrix的屬性上設置動畫的，惟一的解決方案是本身作一個相似於MatrixAnimation的東西。網上有人寫過這樣的動畫類，以下：

    public class LinearMatrixAnimation : AnimationTimeline { public Matrix? From { set { SetValue(FromProperty, value); } get { return (Matrix)GetValue(FromProperty); } } public static DependencyProperty FromProperty = DependencyProperty.Register("From", typeof(Matrix?), typeof(LinearMatrixAnimation), new PropertyMetadata(null)); public Matrix? To { set { SetValue(ToProperty, value); } get { return (Matrix)GetValue(ToProperty); } } public static DependencyProperty ToProperty = DependencyProperty.Register("To", typeof(Matrix?), typeof(LinearMatrixAnimation), new PropertyMetadata(null)); public LinearMatrixAnimation() { } public LinearMatrixAnimation(Matrix from, Matrix to, Duration duration) { Duration = duration; From = from; To = to; } public override object GetCurrentValue(object defaultOriginValue, object defaultDestinationValue, AnimationClock animationClock) { if (animationClock.CurrentProgress == null) { return null; } double progress = animationClock.CurrentProgress.Value; Matrix from = From ?? (Matrix)defaultOriginValue; if (To.HasValue) { Matrix to = To.Value; Matrix newMatrix = new Matrix(((to.M11 - from.M11) * progress) + from.M11, 0, 0, ((to.M22 - from.M22) * progress) + from.M22, ((to.OffsetX - from.OffsetX) * progress) + from.OffsetX, ((to.OffsetY - from.OffsetY) * progress) + from.OffsetY); return newMatrix; } return Matrix.Identity; } protected override System.Windows.Freezable CreateInstanceCore() { return new LinearMatrixAnimation(); } public override System.Type TargetPropertyType { get { return typeof(Matrix); } } }

　　有了這個類，咱們就可使用了：

var animation = new LinearMatrixAnimation(oldMatrix, newMatrix, TimeSpan.FromSeconds(0.5)); animation.AccelerationRatio = 0.3; animation.DecelerationRatio = 0.3;

　　有了動畫，只須要用UI的MatrixTransform啓動動畫便可，假設某個UI的MatrixTransform爲matrixTransform，咱們就能夠啓動了：

matrixTransform.BeginAnimation(MatrixTransform.MatrixProperty, animation);

　　有效果，可是貌似只能執行一次，執行完以後，後來不管怎樣弄都沒反應了，這是因爲動畫執行完後鎖定了屬性，網上也有人解決了，辦法是在執行完動畫以後作了點處理：

public static void PlayMatrixTransformAnimation(MatrixTransform matrixTransform, Matrix newMatrix, TimeSpan timeSpan) { 　　var animation = new LinearMatrixAnimation(matrixTransform.Matrix, newMatrix, TimeSpan.FromSeconds(0.5)); 　　animation.AccelerationRatio = 0.3; 　　animation.DecelerationRatio = 0.3; 　　animation.FillBehavior = FillBehavior.HoldEnd; 　　animation.Completed += (sender, e) => 　　{ 　　　　//去除屬性的動畫綁定 
　　　　matrixTransform.BeginAnimation(MatrixTransform.MatrixProperty, null); 　　　　//將指望結果值保留 
　　　　matrixTransform.Matrix = newMatrix; 　　}; 　　　　//啓動動畫 
　　　　matrixTransform.BeginAnimation(MatrixTransform.MatrixProperty, animation, HandoffBehavior.SnapshotAndReplace); }

　　這樣一來，仿IPhone的反彈效果就已經差很少了。其實這裏是利用了UI的MatrixTransform作了動畫，有人說不是有個MatrixAnimationUsingKeyFrames動畫類嗎，有興趣的人能夠繼續探索下。

　　鑑於你們的熱情，我會把所有代碼整理出來放到羣文件共享裏，敬請關注。