0

我正在为 Windows 8 实现一个模拟时钟。但是我正在努力获得完美的分针动画。

当秒针到达 12 时，分针应该“滑”6 度到下一个数字，而不是突然出现在下一个数字上。这是正在使用的代码

XAML 中的动画

<converter:ThemeTimeConverter
    x:Key="minuteHandTransform"
    Component="MinuteHandFromAngle" />

<converter:ThemeTimeConverter
    x:Key="minuteHandToTransform"
    Component="MinuteHandToAngle" />


<!-- Minute Hand -->
                <Image
                    Source="{Binding Time, Converter={StaticResource MinHandBackground}}"
                    HorizontalAlignment="Left"                        
                    VerticalAlignment="Top"                        
                    Canvas.Left="118"
                    Canvas.Top="118">
                    <Image.RenderTransform>
                        <TransformGroup>
                            <TranslateTransform
                                X="-11"
                                Y="-90" />

                            <RotateTransform
                                x:Name="minHandTransform" />
                        </TransformGroup>
                    </Image.RenderTransform>
                    <Image.Triggers>
                        <EventTrigger
                            RoutedEvent="Image.Loaded">
                            <BeginStoryboard>
                                <Storyboard
                                    x:Name="myStoryboard2">
                                    <DoubleAnimation
                                        x:Name="minuteAnimation"
                                        Storyboard.TargetName="minHandTransform"
                                        Storyboard.TargetProperty="Angle"
                                        Duration="0:0:1"
                                        From="{Binding Time, Converter={StaticResource minuteHandTransform}}"
                                        To="{Binding Time, Converter={StaticResource minuteHandToTransform}}"
                                        RepeatBehavior="forever">
                                        <DoubleAnimation.EasingFunction>
                                            <SineEase
                                                EasingMode="EaseOut" />
                                        </DoubleAnimation.EasingFunction>
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Image.Triggers>
                </Image>

这些是转换器用于确定动画的起点和终点

case ThemeComponents.MinuteHandFromAngle:
                {
                    double minangle = (((float)dt.Minute) / 60) * 360;
                    _RotateTransform.Angle = minangle;

                    return _RotateTransform.Angle;
                }
            case ThemeComponents.MinuteHandToAngle:
                {
                    double minangle = (((float)dt.Minute) / 60) * 360;

                    if (((float)dt.Second) == 59)
                    {
                        _RotateTransform.Angle = minangle + 6;
                    }
                    else
                    {
                        _RotateTransform.Angle = minangle;
                    }

                    return _RotateTransform.Angle;
                }

使用此代码，分针滑动到下一个数字，然后弹回前一个数字，然后再次弹回下一个数字。我只想让它滑到下一个数字。

如果您有任何想法或建议，请告诉我。

谢谢

4

1 回答 1

0

我不确定我是否理解为什么您的动画将 RepeatBehavior 设置为 Forever。那只会在两个值之间保持动画。在大多数情况下，您也不应该需要 From 值，除非您的最后一个动画在 360 度处停止并且您想再次从 0 动画到 6。时间线的默认FillBehavior是在动画超过其持续时间时保持 To 值。在某些情况下，最好处理 Storyboard 的Completed事件，并将动画目标的属性显式设置为其 To 值，以避免这些抖动。您也可以这样做并在该点设置下一个动画。

顺便说一句，我还会检查 BounceEase 而不是 SineEase 的缓动功能。

于 2012-12-31T16:06:18.130 回答