具有未知起始位置的动画（Silverlight）。 [英] Animations with unknown starting position (Silverlight).

问题描述

在我的应用程序中，我需要能够让用户在控件的固定数量的布局之间进行选择。如果用户更改布局，则应该动画移动控件。

问题是，这意味着动画需要从不同的位置开始。例如：当应用程序启动时，将加载默认布局。然后，用户更改布局，从而生成转换和缩放其中一个控件的动画。下次用户更改布局时，动画需要从当前位置开始而不是从默认位置开始。这有可能吗？

感谢您的帮助！

In my application I need to have the ability for the user to choose between a fixed number of layouts of the controls. If a user changes the layout an animation should occur moving the controls around.

The problem is that it means that animations need to start from different positions. For example: When the application starts the default layout is loaded. Then the user changes the layout which results in an animation that translates and scales one of the controls. The next time the user changes the layout the animation needs to start from the current position and not from the default position. Is this possible somehow?

Thanks for help!

推荐答案

视觉状态管理器和状态面板将为您完成此操作。请注意，应在UserControls上使用状态。

以下是一些示例代码，您可以尝试演示以下概念：

XAML：

Visual state manager and the states panel will do this for you.  Note that states should be used on UserControls. 

Here is some sample code you can try that demonstrates the concept:

XAML:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Class="SilverlightPrototype3Screens.Screen_3"
	Width="500" Height="500">

	<Grid x:Name="LayoutRoot" Background="White">
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="ButtonPositions">
				<VisualStateGroup.Transitions>
					<VisualTransition GeneratedDuration="00:00:00.5000000"/>
				</VisualStateGroup.Transitions>
				<VisualState x:Name="Left"/>
				<VisualState x:Name="Right">
					<Storyboard>
						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="389"/>
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="34"/>
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="Bottom">
					<Storyboard>
						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="223"/>
						</DoubleAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
							<EasingDoubleKeyFrame KeyTime="00:00:00" Value="399"/>
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
		<Button x:Name="button" Height="48" Margin="8,8,0,0" VerticalAlignment="Top" Content="Button" HorizontalAlignment="Left" Width="79" RenderTransformOrigin="0.5,0.5">
			<Button.RenderTransform>
				<TransformGroup>
					<ScaleTransform/>
					<SkewTransform/>
					<RotateTransform/>
					<TranslateTransform/>
				</TransformGroup>
			</Button.RenderTransform>
		</Button>
		<Button HorizontalAlignment="Left" Margin="25,0,0,137" Width="103" Content="GoLeft" Click="GoLeft" Height="55" VerticalAlignment="Bottom"/>
		<Button HorizontalAlignment="Left" Margin="25,0,0,78" Width="103" Content="GoRight" Height="55" VerticalAlignment="Bottom" Click="GoRight"/>
		<Button HorizontalAlignment="Left" Margin="25,0,0,19" Width="103" Content="GoBottom" Height="55" VerticalAlignment="Bottom" Click="GoBottom"/>
	</Grid>
</UserControl>

CS：

CS:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightPrototype3Screens
{
	public partial class Screen_3 : UserControl
	{
		public Screen_3()
		{
			// Required to initialize variables
			InitializeComponent();
		}
		
		private void GoLeft(object sender, RoutedEventArgs e)
		{
			VisualStateManager.GoToState(this, "Left", true);

		}

		private void GoRight(object sender, RoutedEventArgs e)
		{
			VisualStateManager.GoToState(this, "Right", true);
		}

		private void GoBottom(object sender, RoutedEventArgs e)
		{
			VisualStateManager.GoToState(this, "Bottom", true);
		}
	}
}

这篇关于具有未知起始位置的动画（Silverlight）。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！