Question

我正在尝试顺时针旋转一条线，以模拟我们通常可以在互联网上找到的加载动画，但我想自己做。

我想模拟类似的东西：

enter image description here

但我甚至无法移动一条简单的线......这是我的代码试图旋转一条线：

<Canvas>
    <Line 
        Name="LineTransformation"
        X1="50" Y1="50"
          X2="50" Y2="0"
          Stroke="Red"
          StrokeThickness="2">
        <Line.RenderTransform>
            <RotateTransform Angle="0" CenterX="{Binding ElementName=LineTransformation.X2}" CenterY="{Binding ElementName=LineTransformation.Y2}"></RotateTransform>
        </Line.RenderTransform>
    </Line>
</Canvas>

我怎样才能做出类似的东西？我甚至不知道如何旋转那条线！：_（

Answer 1

该行不正在旋转。您的图像甚至无法正常工作。通过绘制所有 12行来实现此效果。然后，不是为线条的位置设置动画，而是以12个步骤为Opacity到1.0的每一行的0.0设置动画，然后直接跳回1.0。< / p>

这个动画应该依次在每一行上运行，稍微在前一行之后运行，这样就会产生这种延迟效果，使得它看起来像是在移动线条。您可以使用DoubleAnimationUsingKeyFrames和12个DiscreteDoubleKeyFrame元素以等间距KeyTime值来制作此动画。

为了准确再现您的图像正在做什么，您只需要两个不同的不透明度级别，但它仍然可以以相同的方式实现。

Answer 2

尝试将此代码弹出窗口并查看我所做的工作以演示如何实现这一目标......

<Window.Resources>
        <Storyboard x:Key="SpinStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="LineTransformation">
                <EasingDoubleKeyFrame KeyTime="0" Value="-180"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="180"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource SpinStoryboard}"/>
        </EventTrigger>
    </Window.Triggers>

    <Grid>
        <Canvas Width="50" Height="50">
            <Line 
                Name="LineTransformation"
                X1="25" Y1="50"
                    X2="25" Y2="0"
                    Stroke="Red"
                    StrokeThickness="2" RenderTransformOrigin="1,0.5">
                <Line.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Line.RenderTransform>
            </Line>
        </Canvas>
    </Grid>

基本上使用RotateTransform和一个故事板来旋转线条，跳跃就是为了演示而启动动画！

动画线在WPF中顺时针旋转

2 个答案: