分钟动画

Question

我正在为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;
                }

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

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

由于

Answer 1

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

顺便说一下，我还会检查BounceEase而不是SineEase来获得缓动功能。