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