Windows Phone 8.1 Path按钮制作分享

前言

  经常在博客园看大家的文章,由于本人文笔太烂,没写过博客和小伙伴们分享过,昨天看到安卓同事做的那个按钮比较不错,就想着也做个。现在把过程写出来,请大家不吝赐教(第一次发博客不会排版。。。)大家凑合看吧

开始

  一般要做动画之前,习惯用blend先做个动画,因为blend做动画很快,可以方便的看到动画的效果,待动画调试差不多的时,用vs打开 (一个展开的动画和一个收回的动画,其实设置下Storyboard的AutoReverse属性可以自动执行收回的动画但是过程没办法控制,只能写两个动画分开)     

     Windows Phone 8.1 Path按钮制作分享                 

     根据需求,如有动画比较灵活,那就要把生成的xaml代码转化为C#代码了。(用blend的好处就是调试动画很方便转化为C#代码的时候也比较很简单),其中用到了四个动画X轴的平移,Y轴的平移,中心点的旋转,属性值的改变。

     代码用到了关键帧动画,所以看起来比较长,其实可以不用关键帧动画,直接DoubleAnimation就行

     这个动画主要控制五个按钮的旋转,从-360到0之间的旋转动画

        Storyboard expand = new Storyboard();
            for (int i = 0; i < 5; i++)
            {
                //旋转动画
                DoubleAnimationUsingKeyFrames rotation = new DoubleAnimationUsingKeyFrames();
                Storyboard.SetTargetProperty(rotation, "(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(500));
                rotation.KeyFrames.Add(endAngle);
                expand.Children.Add(rotation);
            }

 

  rotation.BeginTime = TimeSpan.FromMilliseconds(50);

这个是控制按钮出来时候的顺序,上面的按钮先执行动画。

 Y轴平移的动画,每个按钮平移的距离不同所以只能用if else判断了。注意

//只有动画在xaml中才可以使用这个方法 

// Storyboard.SetTargetName(rotation, "image" + i);

 Storyboard.SetTarget(rotation, this.FindName("image"+i) as Image);//代码生成的动画用这个方法

   for (int i = 1; i < 5; i++)
            {
                //Y轴平移 
                DoubleAnimationUsingKeyFrames ytransalte = new DoubleAnimationUsingKeyFrames();
                Storyboard.SetTargetProperty(ytransalte, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
                Storyboard.SetTarget(ytransalte, this.FindName("image" + i) as Image);
                //起始点
                EasingDoubleKeyFrame ystartPoint = new EasingDoubleKeyFrame();
                ystartPoint.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(0));
                if (i == 1)
                {
                    ystartPoint.Value = 180;
                }
                else if (i == 2)
                {
                    ytransalte.BeginTime = TimeSpan.FromMilliseconds(50);
                    ystartPoint.Value = 140;
                }
                else if (i == 3)
                {
                    ytransalte.BeginTime = TimeSpan.FromMilliseconds(100);
                    ystartPoint.Value = 82;
                }
                else if (i == 4)
                {
                    ytransalte.BeginTime = TimeSpan.FromMilliseconds(150);
                    ystartPoint.Value = 10;
                }
                ystartPoint.EasingFunction = new PowerEase() { EasingMode = 0 };
               //终点
                EasingDoubleKeyFrame yendPoint = new EasingDoubleKeyFrame();
                yendPoint.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(500));
                yendPoint.Value = 0;
                yendPoint.EasingFunction = new PowerEase() { EasingMode = 0 };

 

 X轴的动画大同小异,就不写了,下面是Image,是否显示属性值的改变(按钮还未出来的时候,是在页面隐藏的,收回按钮后,又隐藏)

 

    //改变属性值的动画
                ObjectAnimationUsingKeyFrames visi = new ObjectAnimationUsingKeyFrames();
                Storyboard.SetTargetProperty(visi, "(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(500));
                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);

 

上面是按钮展开的动画,还要写收回的动画,改下展开动画的代码就好了。

效果

Windows Phone 8.1 Path按钮制作分享

前端代码

<Grid>
        <Canvas HorizontalAlignment="Left" Height="228" Margin="0,402,0,0" VerticalAlignment="Top"  Width="234">
            <Image x:Name="image0" Height="50" Width="50" Canvas.Top="180"  RenderTransformOrigin="0.5,0.5" Source="ms-appx:///Assets/Image/button1.png" Tapped="image0_Tapped">
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Collapsed" x:Name="image1" Height="50" Width="50" Canvas.Left="45" Source="ms-appx:///Assets/Image/button2.png" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Collapsed" x:Name="image2" Height="50"  Width="50" Canvas.Top="40" Canvas.Left="110" Source="ms-appx:///Assets/Image/button3.png" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Collapsed" x:Name="image3" Height="50"  Width="50" Canvas.Top="98" Canvas.Left="150" Source="ms-appx:///Assets/Image/button4.png" RenderTransformOrigin="0.5,0.5">
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
            <Image Visibility="Collapsed" x:Name="image4" Height="50"  Width="50" Canvas.Top="170" Canvas.Left="175" Source="ms-appx:///Assets/Image/button5.png" RenderTransformOrigin="0.5,0.5" >
                <Image.RenderTransform>
                    <CompositeTransform/>
                </Image.RenderTransform>
            </Image>
        </Canvas>

    </Grid>

 

 

Windows Phone 8.1 Path按钮制作分享

上一篇:windows2003通过iis配置ftp服务器


下一篇:win2008server 使用nslookup后得到server unknown