C#——WPF后台動畫DoubleAnimation講解

WPF后台動畫，使用DoubleAnimation做的。

1.移動動畫

需要參數（目標點離最上邊的位置，目標點離最左邊的位置，元素名稱）

Image mImage = new Image();

FloatInElement(100,100,mImage);

        /// <summary>
        /// 移動動畫 
        /// </summary>
        /// <param name="top">目標點相對於上端的位置</param>
        /// <param name="left">目標點相對於左端的位置</param>
        /// <param name="elem">移動元素</param>
        public static void FloatInElement(double top, double left, UIElement elem)
        {
            try
            {
                DoubleAnimation floatY = new DoubleAnimation()
                {
                    To = TransValueFromHeight(top),
                    Duration = new TimeSpan(0, 0, 0, 1, 0),
                };
                DoubleAnimation floatX = new DoubleAnimation()
                {
                    To = TransValueFromWidth(left),
                    Duration = new TimeSpan(0, 0, 0, 1, 0),
                };
                
                elem.BeginAnimation(Canvas.TopProperty, floatY);
                elem.BeginAnimation(Canvas.LeftProperty, floatX);
            }
            catch (Exception)
            {

                throw;
            }
        }        

2.透明度動畫

需要參數（元素名稱,需要到達的透明度）

Image mImage = new Image();

FloatInElement(mImage,0);

        /// <summary>
        /// 透明度動畫 
        /// </summary>
        /// <param name="elem"></param>
        /// <param name="to"></param>
        public static void FloatElement(UIElement elem, double to)
        {
            lock (elem)
            {
                if (to == 1)
                {
                    elem.Visibility = Visibility.Visible;
                }
                DoubleAnimation opacity = new DoubleAnimation()
                {
                    To = to,
                    Duration = new TimeSpan(0, 0, 0, 1, 0)
                };
                EventHandler handler = null;
                opacity.Completed += handler = (s, e) =>
                {
                    opacity.Completed -= handler;
                    if (to == 0)
                    {
                        elem.Visibility = Visibility.Collapsed;
                    }
                    opacity = null;
                };
                elem.BeginAnimation(UIElement.OpacityProperty, opacity);
            }
        }

3.緩動動畫-縮放動畫

需要參數（控件名稱,元素開始的位置，開始大小，目標大小）

Image mImage = new Image();

ScaleEasingAnimationShow(mImage,new Point(0.5,0.5),1,0);

元素開始的位置是從new Point（0，0）到new Point（1，1），左上角為（0，0）、右下角為（1，1），控件大小范圍為（1，0） 1為控件本身大小，0 為控件縮放完，不顯示。

如果要改動畫類型，則改EasingMode = EasingMode.EaseOut

        /// <summary>
        /// 用戶控件是的動畫
        /// </summary>
        /// <param name="element">控件名</param>
        /// <param name="point">元素開始動畫的位置</param>
        /// <param name="from">元素開始的大小</param>
        /// <param name="from">元素到達的大小</param>
        public static void ScaleEasingAnimationShow(FrameworkElement element, Point point, double from, double to)
        {
            lock (element)
            {
                ScaleTransform scale = new ScaleTransform();
                element.RenderTransform = scale;
                element.RenderTransformOrigin = point;//定義圓心位置        
                EasingFunctionBase easeFunction = new PowerEase()
                {
                    EasingMode = EasingMode.EaseOut,
                    Power = 5
                };
                DoubleAnimation scaleAnimation = new DoubleAnimation()
                {
                    From = from,                                   //起始值
                    To = to,                                     //結束值
                    EasingFunction = easeFunction,                    //緩動函數
                    Duration = new TimeSpan(0, 0, 0, 1, 0)  //動畫播放時間
                };
                AnimationClock clock = scaleAnimation.CreateClock();
                scale.ApplyAnimationClock(ScaleTransform.ScaleXProperty, clock);
                scale.ApplyAnimationClock(ScaleTransform.ScaleYProperty, clock);
            }
        }