WPF touch Program Development (iii) -- similar to the bounce Effect of IPhone album

All IPhone users know that, in an IPhone album, when an image is zoomed in to a certain extent, the finger is automatically scaled back when the image is moved beyond the border, images will also be automatically scaled back. The entire process is harmonious, natural, and accurate. Then, is the answer true for WPF.

If there are no ready-made controls, you only need to do it by yourself. You must think of animation. The WPF touch screen development provides the corresponding functions to get some changes to touch points, the best consumer of these changes is the Matrix. Let's look back at how to make an animation. For example, to create an animation with a width increase of 5 for a button, we generally define a DoubleAnimation and then define a Sotryboard, then, use the static method SetTargetProperty of Sotryboard to set the dependency attribute of the UI object and animation. Following these steps, we made an animation for the UI Matrix and found that such an animation class similar to DoubleAnimation could not be found. The Matrix does not have any dependency attributes such as Button. WidthProperty. Maybe you will say that the attribute OffsetX and M11 of Matrix are double type, and you can set an animation for them. However, the object of the Storyboard application must be inherited from DependencyProperty, therefore, it is impossible to set an animation on the attributes of Matrix. The only solution is to create a thing similar to MatrixAnimation. Someone has written such an animated category on the Internet, as follows:

    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); }        }    }

With this class, we can use:

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

With the animation, you only need to use the UI's MatrixTransform to start the animation. Suppose that the MatrixTransform of a UI is matrixTransform, we can start it:

matrixTransform.BeginAnimation(MatrixTransform.MatrixProperty, animation);

It works, but it seems that it can only be executed once. After the execution, no matter how it is done, it does not respond. This is because the attributes are locked after the animation is executed, and some people have solved the problem on the Internet, the method is to do some processing after the animation is executed:

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) =>{// animation for removing attributes is bound to matrixTransform. beginAnimation (MatrixTransform. matrixProperty, null); // retain the expected result value matrixTransform. matrix = newMatrix;}; // start the animation matrixTransform. beginAnimation (MatrixTransform. matrixProperty, animation, HandoffBehavior. snapshotAndReplace );}

In this way, the IPhone-like Bounce effect is almost the same. In fact, the UI MatrixTransform is used for animation. Some people say that there is not a MatrixAnimationUsingKeyFrames animation class. If you are interested, you can continue to explore it.