Question

我正在努力改善我的照片翻转（旋转），就像硬币翻转一样。这已经实现了，但是一帧画面中的画面总是在一帧中停止，然后再次继续翻转。你们知道它如何顺利运作吗？

<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>

感谢您的答案或建议

Answer 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步动画中加入一个缓动函数来模拟实际旋转的物体中感知的变化率缩放。旋转物体的可见“宽度”（从观察者的角度来看）实际上是作为旋转角度/速度的正弦函数而不是像上面的例子那样的线性函数而变化。

XAML DoubleAnimation如何使圆形图像平滑翻转而不用圆滑的重复

1 个答案: