轨道动画 - 编程之家

如何解决轨道动画

| 首先，我将尝试解释我要做什么。乍一看，该任务看起来很简单，但是花了一些时间才意识到它非常复杂。我想做的是在开始和结束时使用缓动的简单动画-我知道如何使用缓动，最困难的部分是我正在尝试做类似Orbit的操作-椭圆形动圈可以说5附加到它的矩形。我想沿椭圆轨道（椭圆路径）移动矩形，而无需更改每个矩形的旋转角度。我尝试使用Path动画，但是运动路径动画似乎不支持缓动？我错了吗？第二种解决方案是对路径和矩形进行分组，然后旋转整个组，但这也改变了矩形的旋转角度。有没有简单的方法可以做到这一点？请给我指出文章或其他内容，或者，如果您遇到类似情况，请分享解决方案。谢谢。

解决方法

这是另一种方法... 您要做的实际上不是旋转，而是沿着椭圆路径的平移。麻烦的是，ѭ0是由X和Y定义的，而不是角度和半径。。。但是更容易设置角度的动画，因此必须将极坐标转换为笛卡尔坐标。为此，我们定义两个转换器：SinConverter和CosConverter：

public class SinConverter : IValueConverter
{
    #region Implementation of IValueConverter

    public object Convert(object value,Type targetType,object parameter,CultureInfo culture)
    {
        try
        {
            double angle = System.Convert.ToDouble(value);
            double angleRad = Math.PI * angle / 180;
            double radius = System.Convert.ToDouble(parameter);
            return radius * Math.Sin(angleRad);
        }
        catch
        {
            return Binding.DoNothing;
        }
    }

    public object ConvertBack(object value,CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

public class CosConverter : IValueConverter
{
    #region Implementation of IValueConverter

    public object Convert(object value,CultureInfo culture)
    {
        try
        {
            double angle = System.Convert.ToDouble(value);
            double angleRad = Math.PI * angle / 180;
            double radius = System.Convert.ToDouble(parameter);
            return radius * Math.Cos(angleRad);
        }
        catch
        {
            return Binding.DoNothing;
        }
    }

    public object ConvertBack(object value,CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

现在，我们需要一个angle属性进行动画处理：因此我们在资源中定义了一个虚拟RotateTransform，它将作为动画的目标。接下来，我们在\“ satellite \”上加上TranslateTransform，然后使用转换器将X和Y绑定到角度。最终，我们只需要创建将对角度进行动画处理的动画本身即可。这是完整的XAML：

<Window x:Class=\"WpfCS.Orbit\"
        xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"
        xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"
        xmlns:my=\"clr-namespace:WpfCS\"
        Title=\"Orbit\"
        Height=\"300\" Width=\"300\">
    <Window.Resources>
        <my:SinConverter x:Key=\"sinConverter\" />
        <my:CosConverter x:Key=\"cosConverter\" />
        <RotateTransform x:Key=\"rotate\" Angle=\"0\" />
    </Window.Resources>
    <Grid>
        <Rectangle Width=\"30\" Height=\"30\" Fill=\"Blue\">
            <Rectangle.RenderTransform>
                <TranslateTransform X=\"{Binding Path=Angle,Source={StaticResource rotate},Converter={StaticResource cosConverter},ConverterParameter=100}\"
                                    Y=\"{Binding Path=Angle,Converter={StaticResource sinConverter},ConverterParameter=60}\"/>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Ellipse Width=\"5\" Height=\"5\" Fill=\"White\" Stroke=\"Black\" StrokeThickness=\"1\" />
    </Grid>
    <Window.Style>
        <Style TargetType=\"Window\">
            <Style.Triggers>
                <EventTrigger RoutedEvent=\"Loaded\">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.Target=\"{StaticResource rotate}\"
                                         Storyboard.TargetProperty=\"Angle\"
                                         From=\"0\" To=\"360\" Duration=\"0:0:5\"
                                         RepeatBehavior=\"Forever\" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Window.Style>
</Window>

,试试看，这很有趣：

<Canvas Height=\"100\" Width=\"100\" RenderTransformOrigin=\"0.5,0.5\">
    <Canvas.Triggers>
        <EventTrigger RoutedEvent=\"Canvas.Loaded\">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation From=\"0\" To=\"360\"
                                     RepeatBehavior=\"Forever\"
                                     Duration=\"0:0:1\"
                                     Storyboard.TargetProperty=\"RenderTransform.Angle\">
                        <DoubleAnimation.EasingFunction>
                            <CubicEase EasingMode=\"EaseInOut\"/>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
    <Canvas.RenderTransform>
        <RotateTransform />
    </Canvas.RenderTransform>
    <Canvas.Resources>
        <Style TargetType=\"{x:Type Rectangle}\">
            <Setter Property=\"RenderTransformOrigin\" Value=\"0.5,0.5\"/>
            <Setter Property=\"RenderTransform\" Value=\"{Binding RenderTransform.Inverse,RelativeSource={RelativeSource AncestorType=Canvas}}\"/>
        </Style>
    </Canvas.Resources>
    <Rectangle Fill=\"Red\" Height=\"20\" Width=\"20\" Canvas.Left=\"40\" Canvas.Top=\"0\"/>
    <Rectangle Fill=\"Green\" Height=\"20\" Width=\"20\" Canvas.Left=\"40\" Canvas.Top=\"80\"/>
</Canvas>

关键点：将“ 4”作为“ 9”在“ Canvas”上进行动画处理。通过“ 10”的隐式样式将“ 9”的矩形绑定到父画布的逆RotateTransform。 ??? 利润！