Windows Phone 8.1 Path按鈕製作分享

標籤：style   blog   http   io   ar   color   os   使用   sp   

前言

　　經常在部落格園看大家的文章，由於本人文筆太爛，沒寫過部落格和小夥伴們分享過，昨天看到安卓同事做的那個按鈕比較不錯，就想著也做個。現在把過程寫出來，請大家不吝賜教（第一次發部落格不會排版。。。）大家湊合看吧

開始

　　一般要做動畫之前，習慣用blend先做個動畫，因為blend做動畫很快，可以方便的看到動畫的效果，待動畫調試差不多的時，用vs開啟 （一個展開的動畫和一個收回的動畫，其實設定下Storyboard的AutoReverse屬性可以自動執行收回的動畫但是過程沒辦法控制，只能寫兩個動畫分開）     

                      

     根據需求，如有動畫比較靈活，那就要把產生的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);

 

上面是按鈕展開的動畫，還要寫收回的動畫，改下展開動畫的代碼就好了。

效果

前端代碼

<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按鈕製作分享