Question

嗨我想从中心开始动画，然后像跷跷板一样摆动。基本上，这是我在XAML中发布的内容，但我无法使其正常工作。

   <Storyboard  x:Name="wiggleAnimation" >
        <DoubleAnimation Storyboard.TargetName="rotateSlider" 
                         Duration="0:0:1" To="20" 
                         Storyboard.TargetProperty="Angle">
        </DoubleAnimation>
        <DoubleAnimation Storyboard.TargetName="rotateSlider" 
                         Duration="0:0:1" To="-20" 
                         RepeatBehavior="Forever"
                         AutoReverse="True"
                         Storyboard.TargetProperty="Angle">
        </DoubleAnimation>
    </Storyboard>

我应该使用关键帧吗？动画开始后如何改变它的持续时间？也许我应该使用其他方法？

Answer 1

你可以做的是从-20到+20创建一个动画，但是在中间开始动画。

<Storyboard  x:Name="wiggleAnimation" >
    <DoubleAnimation Storyboard.TargetName="rotateSlider"
                    Duration="0:0:2" From="-20" To="20"
                    RepeatBehavior="Forever"
                    AutoReverse="True"
                    Storyboard.TargetProperty="Angle">
    </DoubleAnimation>
</Storyboard>

启动动画的代码：

wiggleAnimation.Begin();
wiggleAnimation.Seek(TimeSpan.FromSeconds(1));

编辑：或者，您可以创建两个动画，定位两个不同的变换：

<Button Content="Click" Click="button_Click" RenderTransformOrigin="0.5 0.5" >
    <Button.RenderTransform>
        <TransformGroup>
            <RotateTransform x:Name="rotateSlider"  />
            <RotateTransform x:Name="rotateSlider2"  />
        </TransformGroup>
    </Button.RenderTransform>
</Button>

现在，您可以同时为两个RotateTransforms设置动画：

<Storyboard x:Name="wiggleAnimation" 
            RepeatBehavior="Forever"
            AutoReverse="True"
            Duration="0:0:3" >
    <DoubleAnimation Storyboard.TargetName="rotateSlider"
                     Duration="0:0:1" From="0" To="20"
                     Storyboard.TargetProperty="Angle">
    </DoubleAnimation>
    <DoubleAnimation Storyboard.TargetName="rotateSlider2"
                     Duration="0:0:2" From="0" To="-40"
                     BeginTime="0:0:1"
                     Storyboard.TargetProperty="Angle">
    </DoubleAnimation>
</Storyboard>

使用这种方法，您无需在启动之前向中间寻找故事板。这些方法中的任何一种都可以使您实现您想要的目标。

此外，为了使动画看起来更自然，您可能希望对其应用EasingFunction。

Silverlight中的钟摆式动画

1 个答案: