Windows Phone中悬浮小助手的制作过程

前言

     看到过其他平台游戏中第三方sdk的一些悬浮的小助手，近来无聊，就做个玩儿，看着比较简单，做起来还是花费了不少力气。

开始

　　首先是页面的xaml代码，其实比较简单，就是一些Canvas里面装了些image和一个border（是作为按钮展开后的背景）。下面注释的那个canvas是为了看到悬浮窗在界面右边的时的效果，方便做动画添加的，读者不用在意

　　要求悬浮按钮可以拖动，拖动后靠在自动屏幕边上显示，拖动的时候超过屏幕的中轴就靠在右边，点击按钮向左边以此展开按钮，如果拖动后在屏幕中轴左边则靠左侧边上，点击屏幕向右依次展开，再次点击收回按钮。（展开按钮的时候我有添加了个选择动画，旋转了360度，）考虑到动画需要变化，以前悬浮窗的中的按钮位置也要根据拖放的位置动态变化，所以动画和布局都用代码控制。

 <phone:PhoneApplicationPage.Resources>
        <Style x:Key="imageS" TargetType="Image">
            <Setter Property="Width"  Value="50"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        </Style>
        <!--<Storyboard x:Name="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="border">
                <EasingDoubleKeyFrame KeyTime="0" Value="0.04"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1.003"/>
            </DoubleAnimationUsingKeyFrames>
       
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="border">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.4">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>-->
    </phone:PhoneApplicationPage.Resources>

<!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid>
        <Grid.Background>
            <ImageBrush Stretch="Fill" ImageSource="/Assets/Image/bg1.jpg"/>
        </Grid.Background>

        <Canvas x:Name="HoverContentner" HorizontalAlignment="Left" Height="50" Margin="0,0,0,0" VerticalAlignment="Top"  Width="300" >
            <Border Visibility="Collapsed" x:Name="border" Width="300" Height="47" HorizontalAlignment="Left" VerticalAlignment="Top" CornerRadius="12" Background="#B2D1DAC7" RenderTransformOrigin="0.0,0.0">
                <Border.RenderTransform>
                    <CompositeTransform/>
                </Border.RenderTransform>
            </Border>
            <Image x:Name="image0" Style="{StaticResource imageS}"  Source="/Assets/Image/button1.png" Tap="image0_Tap" ManipulationDelta="image0_ManipulationDelta" ManipulationCompleted="image0_ManipulationCompleted" >
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Collapsed" x:Name="image1" Style="{StaticResource imageS}" Canvas.Left="60" Source="/Assets/Image/button2.png" >
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Collapsed" x:Name="image2" Style="{StaticResource imageS}" Canvas.Left="120" Source="/Assets/Image/button3.png">
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Collapsed" x:Name="image3" Style="{StaticResource imageS}"  Canvas.Left="180" Source="/Assets/Image/button4.png">
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Collapsed" x:Name="image4" Style="{StaticResource imageS}" Canvas.Left="240" Source="/Assets/Image/button5.png" >
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
        </Canvas>


        <!--<Canvas x:Name="HoverContentnerRight" HorizontalAlignment="Left" Height="50" Margin="180,300,0,0" VerticalAlignment="Top"  Width="300">           
            <Image Visibility="Visible"  Style="{StaticResource imageS}" Canvas.Left="180" Source="/Assets/Image/button2.png" >
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Visible"  Style="{StaticResource imageS}"  Canvas.Left="120" Source="/Assets/Image/button3.png" >
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Visible"   Style="{StaticResource imageS}" Canvas.Left="60" Source="/Assets/Image/button4.png" >
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Visible"  Style="{StaticResource imageS}" Canvas.Left="0" Source="/Assets/Image/button5.png"  >
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image x:Name="image0left" Style="{StaticResource imageS}"  Canvas.Left="240" Source="/Assets/Image/button1.png" Tap="image0_Tap" ManipulationDelta="image0_ManipulationDelta" ManipulationCompleted="image0_ManipulationCompleted" >
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
        </Canvas>-->
    </Grid>

</phone:PhoneApplicationPage>

　　一些定义的变量

        private int trasnlateLength = 60;
        private bool left = true;
        private bool lastleft = true;//lastleft上次
        private Storyboard expandstory = null;
        private Storyboard hidestory = null;
        private bool isStoryBegin = true;

　　首先是处理拖动的代码

    private void image0_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
        {
            if (image1.Visibility == Visibility.Visible)
            {
            }
            else
            {
                double oldleft = HoverContentner.Margin.Left;
                double oldtop = HoverContentner.Margin.Top;
                //if (!left && e.DeltaManipulation.Translation.X<0)
                //{
                //    oldleft += -e.DeltaManipulation.Translation.X;
                //}
                //else
                //{
                //    oldleft += e.DeltaManipulation.Translation.X;
                //}
                oldleft += e.DeltaManipulation.Translation.X;
                oldtop += e.DeltaManipulation.Translation.Y;
               // Debug.WriteLine("左边距"+oldleft + "............... 右边距"+ oldtop);
                HoverContentner.Margin = new Thickness(oldleft, oldtop, 0, 0);
                this.UpdateLayout();
            }
        }

　　拖动完成后根据位置靠边显示

 private void image0_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
        {
            if (e.TotalManipulation.Translation.X==0.0f&&e.TotalManipulation.Translation.Y==0.0f)
            {
                return;
            }
           // Debug.WriteLine("  HoverContentner.Margin.left: " + HoverContentner.Margin.Left);
            if (left &&HoverContentner.Margin.Left < 220)
            {
                HoverContentner.Margin = new Thickness(0, HoverContentner.Margin.Top, 0, 0);
                updateCanvas(true);
            }
            else if (left &&HoverContentner.Margin.Left > 220)
            {
                HoverContentner.Margin = new Thickness(185, HoverContentner.Margin.Top, 0, 0);
                updateCanvas(false);
            }
            else if (!left&&HoverContentner.Margin.Left > 0)
            {
                HoverContentner.Margin = new Thickness(185, HoverContentner.Margin.Top, 0, 0);
                updateCanvas(false);
            }
            else
            {
                HoverContentner.Margin = new Thickness(0, HoverContentner.Margin.Top, 0, 0);
                updateCanvas(true);
            }
        }

　　然后更新布局

  private void updateCanvas( bool isleft)
        {
            left = isleft;
            if (isleft)
            {
             //   trasnlateLength = 60;
                Canvas.SetLeft(image0, 0);
                Canvas.SetLeft(image1, 60);
                Canvas.SetLeft(image2, 120);
                Canvas.SetLeft(image3, 185);
                Canvas.SetLeft(image4, 240);
                border.HorizontalAlignment = HorizontalAlignment.Left;
                border.RenderTransformOrigin = new Point(0, 0);
            }
            else
            {
              //  trasnlateLength = -60;
                Canvas.SetLeft(image0, 240);
                Canvas.SetLeft(image1, 185);
                Canvas.SetLeft(image2, 120);
                Canvas.SetLeft(image3, 60);
                Canvas.SetLeft(image4, 0);
                border.HorizontalAlignment = HorizontalAlignment.Right;
                border.RenderTransformOrigin = new Point(1, 1);
                HoverContentner.Width = 300;
                //image1.Visibility = Visibility.Visible;
                //image2.Visibility = Visibility.Visible;
                //image3.Visibility = Visibility.Visible;
                //image4.Visibility = Visibility.Visible;
                UpdateLayout();
            }
        }

 　　点击图片时开始执行动画，一个展开的和一个收回的动画，如果上次悬浮窗的位置和这次的位置不同（上次在左边，这次在右边，则更新动画）

       private void image0_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            if (lastleft != left)//如果方向改变则刷新动画
            {
                expandstory = CreateExpand();
                hidestory = HideExpand();
            }
            if (isStoryBegin)
            {
                expandstory.Begin();
                isStoryBegin = false;
            }
            else
            {
                hidestory.Begin();
                isStoryBegin = true;
            }
        }

　　展开的动画

       private Storyboard CreateExpand()
        {
            Storyboard expand = new Storyboard();
            #region 旋转动画
            for (int i = 0; i < 5; i++)
            {
                //旋转动画
                DoubleAnimationUsingKeyFrames rotation = new DoubleAnimationUsingKeyFrames();
                Storyboard.SetTargetProperty(rotation, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.Rotation)"));
                //只有动画在xaml中才可以使用这个方法
                // Storyboard.SetTargetName(rotation, "image" + i);

                Storyboard.SetTarget(rotation, this.FindName("image" + i) as Image);
                EasingDoubleKeyFrame startAngle = new EasingDoubleKeyFrame();
                startAngle.Value = -360;
                startAngle.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
                rotation.KeyFrames.Add(startAngle);
                if (i == 2)
                {
                    rotation.BeginTime = TimeSpan.FromMilliseconds(50);
                }
                else if (i == 3)
                {
                    rotation.BeginTime = TimeSpan.FromMilliseconds(100);
                }
                else if (i == 4)
                {
                    rotation.BeginTime = TimeSpan.FromMilliseconds(150);
                }
                EasingDoubleKeyFrame endAngle = new EasingDoubleKeyFrame();
                endAngle.Value = 0;
                endAngle.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
                rotation.KeyFrames.Add(endAngle);
                expand.Children.Add(rotation);
            }
            #endregion
            for (int i = 1; i < 5; i++)
            {
                #region 平移动画            
                //X轴平移 
                DoubleAnimationUsingKeyFrames xtranslate = new DoubleAnimationUsingKeyFrames();
                Storyboard.SetTargetProperty(xtranslate, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));
                Storyboard.SetTarget(xtranslate, this.FindName("image" + i) as Image);
                //起始点
                EasingDoubleKeyFrame xstartPoint = new EasingDoubleKeyFrame();
                xstartPoint.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
                if (i == 1)
                {
                    xstartPoint.Value = left ? -trasnlateLength : trasnlateLength;            
                }
                else if (i == 2)
                {
                    xtranslate.BeginTime = TimeSpan.FromMilliseconds(50);
                    xstartPoint.Value = left ? -trasnlateLength * 2 : trasnlateLength * 2;   
     
                }
                else if (i == 3)
                {
                    xtranslate.BeginTime = TimeSpan.FromMilliseconds(100);
                    xstartPoint.Value = left ? -trasnlateLength * 3 : trasnlateLength * 3;   
                }
                else if (i == 4)
                {
                    xtranslate.BeginTime = TimeSpan.FromMilliseconds(150);
                    xstartPoint.Value = left ? -trasnlateLength * 4 : trasnlateLength * 4; ; 
                }
                lastleft = left;
                xstartPoint.EasingFunction = new PowerEase() { EasingMode = 0 };
                //终点
                EasingDoubleKeyFrame xendPoint = new EasingDoubleKeyFrame();
                xendPoint.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
                xendPoint.Value = 0;
                  
                xendPoint.EasingFunction = new PowerEase() { EasingMode = 0 };

                xtranslate.KeyFrames.Add(xstartPoint);
                xtranslate.KeyFrames.Add(xendPoint);
                expand.Children.Add(xtranslate);
                #endregion

                #region 改变属性值的动画
                //改变属性值的动画
                ObjectAnimationUsingKeyFrames visi = new ObjectAnimationUsingKeyFrames();
                Storyboard.SetTargetProperty(visi, new PropertyPath("(UIElement.Visibility)"));
                Storyboard.SetTarget(visi, this.FindName("image" + i) as Image);

                DiscreteObjectKeyFrame startObj = new DiscreteObjectKeyFrame();
                startObj.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
                startObj.Value = Visibility.Visible;

                DiscreteObjectKeyFrame endObj = new DiscreteObjectKeyFrame();
                endObj.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
                endObj.Value = Visibility.Visible;

                if (i == 2)
                {
                    visi.BeginTime = TimeSpan.FromMilliseconds(50);

                }
                else if (i == 3)
                {
                    visi.BeginTime = TimeSpan.FromMilliseconds(100);
                }

                else if (i == 4)
                {
                    visi.BeginTime = TimeSpan.FromMilliseconds(150);

                }
                visi.KeyFrames.Add(startObj);
                visi.KeyFrames.Add(endObj);
                expand.Children.Add(visi);
                #endregion
            }

            #region 缩放动画
            //X轴平移 
            DoubleAnimationUsingKeyFrames xtranslateb = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTargetProperty(xtranslateb, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.ScaleX)"));
            Storyboard.SetTarget(xtranslateb, this.FindName("border" ) as Border);
            //起始点
            EasingDoubleKeyFrame xstartPointb = new EasingDoubleKeyFrame();
            xstartPointb.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
           
            
            xstartPointb.Value = 0.04f;
          
            xstartPointb.EasingFunction = new PowerEase() { EasingMode = 0 };
            //终点
            EasingDoubleKeyFrame xendPointb = new EasingDoubleKeyFrame();
            xendPointb.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
            xendPointb.Value = 1;

            xendPointb.EasingFunction = new PowerEase() { EasingMode = 0 };

            xtranslateb.KeyFrames.Add(xstartPointb);
            xtranslateb.KeyFrames.Add(xendPointb);
            expand.Children.Add(xtranslateb);
            #endregion

            #region 改变border属性值的动画
            //改变属性值的动画
            ObjectAnimationUsingKeyFrames visib = new ObjectAnimationUsingKeyFrames();
            Storyboard.SetTargetProperty(visib, new PropertyPath("(UIElement.Visibility)"));
            Storyboard.SetTarget(visib, this.FindName("border") as Border);

            DiscreteObjectKeyFrame startObjb = new DiscreteObjectKeyFrame();
            startObjb.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
            startObjb.Value = Visibility.Visible;

            DiscreteObjectKeyFrame endObjb = new DiscreteObjectKeyFrame();
            endObjb.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
            endObjb.Value = Visibility.Visible;

           
            visib.KeyFrames.Add(startObjb);
            visib.KeyFrames.Add(endObjb);
            expand.Children.Add(visib);
            #endregion
            return expand;
        }

　　还有个收缩的动画就不给大家贴出来了，留给大家一个自己动手的过程。哇咔咔，下面贴张动态图，吸引下诸位眼球。