Blend學習之Loading加載動畫

  介紹：

 Blend for visual studio 與 visual studio 是有區別的 二者雖然是IDEA 可是專一的方向是不一樣的，前者是專一UI後者專一業務邏輯，固然你要用blend for visual studio 去開發也行，不過blend for visual studio在UI上面是能體現出強大的優點，尤爲是在WPF的動畫上，你能夠不用寫代碼就能作出動畫來 就如製做Flash動畫同樣 你能夠對動畫的每一幀都能進行精確的控制，好了廢話很少說 咱們來實操

使用方法：

打開blend for visual studio（就以2019爲例子）

建立新項目

 給項目命名（咱們就以加載動畫爲例子進行學習使用）

 建立完成後的主界面是這個樣子的：

 咱們這時看到的主要五個板塊就如我圖上框出來的：

1：解決方案是當前的項目

2：資產爲當前項目之默認提供給你的一下能是用的基礎控件

3：狀態（本人沒試用過，能夠本身嘗試摸索）

4：觸發器，就是幫你完成一系列動做的事件（本人是這麼理解的）。下圖右上角即爲建立觸發器的按鈕

 5：數據（暫時咱們用不到）

實現Loading動畫：

1：給Window個背景色 #7F1F1F1F

2：給Grid中加入一個圓 大小爲10 圓角爲5的Border，Grid大小給100，讓Border以Grid的中心點進行旋轉位移快捷鍵爲Ctrl+鼠標左鍵（點擊圓點進行拖動，拖到Grid的中心上，如紅色的框框中），此時你對Border進行旋轉即爲以Grid的中心點進行旋轉

3：建立觸發器，點擊觸發器進行添加，因爲咱們這時初始化加載動畫那麼咱們對於的屬性爲Loaded

 

 4：因爲我是做用在Window頁面那麼咱們設置Window的Loaded屬性讓其加載就進行動畫

5：上圖爲有三個框框從左往右依次對於的東西爲 Window（當前控件）、屬性（當前控件的屬性）、建立關鍵幀按鈕（即爲你看到的添加新操做）

6：點擊建立關鍵幀（添加新操做）按鈕，此時系統提示你沒有要開始或控制的情節提要，將建立一個。此時咱們點擊肯定按鈕便可

7：此時系統界面會出現一個面板如圖，一個是對象個時間線一個是時間線錄製已打開

 8：咱們開始拖動對象個事件線中的黃線（0~1~2~3~指的是以秒爲單位的關鍵幀時間線，咱們將其拖到2的位置，同時設置當前的Border圓的旋轉角度爲360度

 9：因爲咱們須要當前的圓持續旋轉咱們須要將Storyboard的RepeatBehavior屬性設置爲Forever，表明是無限制旋轉

10：啓動當前項目你會發現你的圓已經在無限制的旋轉（此時你離你的加載動畫還差點善後，咱們要讓你的動畫更加順滑有動畫的感受咱們須要多加幾個圓）

11：再加上四個圓（爲了偷懶 我將其命名爲border——border4，你們不要學我，好好命名）

12：咱們Copy DoubleAnimationUsingKeyFrames 這一塊代碼 跟別對應於每一個控件（border——border4），對於的屬性爲 Storyboard.TargetName，他的值爲（border——border4）

13：爲了讓咱們的圓不一塊兒旋轉，咱們給個時間差，每一個間隔一毫秒，在DoubleAnimationUsingKeyFrames中設置BeginTime="0:0:0.1"  每一個DoubleAnimationUsingKeyFrames依次累加如border2對應的爲BeginTime="0:0:0.2"

 14：啓動項目集合看到好看的加載動畫啦

源代碼爲：

    <Window.Resources>
        <Storyboard x:Key="OnLoaded1" RepeatBehavior="Forever" >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border">
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.1"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border1">
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border2">
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border3">
                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="0:0:0.4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border4">
                <EasingDoubleKeyFrame KeyTime="0:0:1.5"  Value="360">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <SineEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard x:Name="OnLoaded1_BeginStoryboard" Storyboard="{StaticResource OnLoaded1}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid Width="100" Height="100">
        <Border x:Name="border" Width="10" Height="10" CornerRadius="5" Background="#ccc" VerticalAlignment="Top" RenderTransformOrigin="0.5,5">
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Border.RenderTransform>
        </Border>
        <Border x:Name="border1" Width="10" Height="10" CornerRadius="5" Background="#ccc" VerticalAlignment="Top" RenderTransformOrigin="0.5,5">
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Border.RenderTransform>
        </Border>
        <Border x:Name="border2" Width="10" Height="10" CornerRadius="5" Background="#ccc" VerticalAlignment="Top" RenderTransformOrigin="0.5,5">
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Border.RenderTransform>
        </Border>
        <Border x:Name="border3" Width="10" Height="10" CornerRadius="5" Background="#ccc" VerticalAlignment="Top" RenderTransformOrigin="0.5,5">
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Border.RenderTransform>
        </Border>
        <Border x:Name="border4" Width="10" Height="10" CornerRadius="5" Background="#ccc" VerticalAlignment="Top" RenderTransformOrigin="0.5,5">
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Border.RenderTransform>
        </Border>
    </Grid>

備註：代碼和教材提供學習，不容許拿去CSDN混分，本人最討厭這種人 盜竊別人的勞動成功，鄙視 (#‵′)凸