Маятниковая анимация в серебряном свете

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 .