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混分，本人最讨厌这种人 盗窃别人的劳动成功，鄙视 (#‵′)凸