XAML DoubleAnimation如何使圆形图片平滑翻转而无需重复答案

【问题标题】：XAML DoubleAnimation how to make circle picture to flip smoothly without tact repeatXAML DoubleAnimation如何使圆形图片平滑翻转而无需重复
【发布时间】：2018-06-27 21:28:53
【问题描述】：

我正在尝试改进我的图片翻转（旋转），就像掷硬币一样。这已经实现了，但是一帧中的图片总是在一帧中停止，然后再次继续翻转。你们知道它是如何顺利运行的吗？

<DoubleAnimation From="0" 
    To="-1"
    BeginTime="00:00:01"
    Duration="00:00:00.350"
    Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleX)"/>
<DoubleAnimation From="-1" To="0"
    BeginTime="00:00:01"
    Duration="00:00:00.350"
    Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleX)"/>

这是图片：

<Border x:Name="Logo" BorderBrush="White"
                    BorderThickness="4"
                    Width="100"
                    Height="100"
                    CornerRadius="50"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Top"
                    RenderTransformOrigin="0.5,0.5">
                <Image    Source="pack://application:,,,/Application.Platform.Views;component/Resources/Applicationlogo.png"
                    Width="80" Height="80" />
                <Border.RenderTransform>
                    <ScaleTransform ScaleX="1"/>
                </Border.RenderTransform>

感谢您的回答或建议

【问题讨论】：

标签： wpf xaml user-interface animation

【解决方案1】：

由于无法访问您的图像，我创建了一个简单的边框对象来执行您想要的操作。对于这种类型的动画，您需要非常精确地处理您的 BeginTime 和 Duration 值。

<Border Width="50" Height="50" Background="Blue" VerticalAlignment="Top"
        RenderTransformOrigin="0.5,0.5">
  <Border.RenderTransform>
    <ScaleTransform x:Name="st" ScaleX="1"/>
  </Border.RenderTransform>
  <Border.Triggers>
    <EventTrigger RoutedEvent="Border.Loaded">
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever">

          <DoubleAnimation From="1" To="0"
                           Duration="0:0:0.333"
                           Storyboard.TargetName="st"
                           Storyboard.TargetProperty="ScaleX"/>
          <DoubleAnimation From="0" To="-1"
                           BeginTime="0:0:0.333"
                           Duration="0:0:0.333"
                           Storyboard.TargetName="st"
                           Storyboard.TargetProperty="ScaleX"/>
          <DoubleAnimation From="-1" To="0"
                           BeginTime="0:0:0.666"
                           Duration="0:0:0.333"
                           Storyboard.TargetName="st"
                           Storyboard.TargetProperty="ScaleX"/>
          <DoubleAnimation From="0" To="1"
                           BeginTime="0:0:0.999"
                           Duration="0:0:0.333"
                           Storyboard.TargetName="st"
                           Storyboard.TargetProperty="ScaleX"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Border.Triggers>
</Border>

此外，您必须为图像“旋转”的每个部分包含DoubleAnimation 块；全前到边，边到边后卫，边后卫到边，然后边到全前。这会将您的动画带回起点并使其顺利重复。

你也许可以用 2 个动画块来做到这一点；全前到全后，然后从全后到全前（1 到 -1，-1 到 1），但我还没有测试过。

编辑：

它只适用于两个 DoubleAnimation 块：

          <DoubleAnimation From="1" To="-1"
                           Duration="0:0:0.666"
                           Storyboard.TargetName="st"
                           Storyboard.TargetProperty="ScaleX"/>
          <DoubleAnimation From="-1" To="1"
                           BeginTime="0:0:0.666"
                           Duration="0:0:0.666"
                           Storyboard.TargetName="st"
                           Storyboard.TargetProperty="ScaleX"/>

如果您想让它更逼真，您可以在 4 步动画中包含一个缓动函数，以模拟实际旋转的对象中感知到的变化率缩放。旋转物体的可见“宽度”（从观察者的角度来看）实际上是随旋转角度/速度的正弦函数变化的，而不是像上面例子那样的线性函数。

【讨论】：