轨道动画

Question

首先,我将尝试解释我正在尝试做什么.初看起来这个任务看起来很简单,但我花了一些时间才意识到它非常复杂.我想要做的是简单的动画,在开始和结束时放松 - 我知道如何使用缓动,困难的部分是我正在尝试做像Orbit这样的椭圆轨道,让我们说5个矩形附加它.我想沿着椭圆轨道(椭圆路径)移动矩形而不改变每个矩形的旋转角度.

我尝试过使用Path动画,但似乎运动路径动画不支持缓动？我错了吗 ？第二种解决方案是对路径和矩形进行分组并旋转整个组,但这也会改变矩形旋转角度.有一个简单的方法吗？请指出我的文章或其他内容,或者如果您有类似的情况,请分享解决方案.谢谢.

Answer 1

试试这个,非常有趣:

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

关键点:

1. RotateTransform就像RenderTransform动画的画布一样.
2. 隐式样式通过Canvas.Resources将RenderTransform矩形绑定到父画布的反向RotateTransform.
3. ???
4. 利润!

Answer 2

这是另一种方法......

你想要做的实际上并不是旋转，而是沿着椭圆路径的平移。问题是，aTranslateTransform是由 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, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

public class CosConverter : 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.Cos(angleRad);
        }
        catch
        {
            return Binding.DoNothing;
        }
    }

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

    #endregion
}

现在，我们需要一个角度属性来进行动画处理：因此我们RotateTransform在资源中定义一个虚拟对象，它将作为动画的目标。

接下来，我们在“卫星”上应用 a 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,
                                                Source={StaticResource rotate},
                                                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>