有没有办法动画在Metro风格应用的Margin属性 [英] Is there a way to animate the Margin property in metro style apps
问题描述
我试图做用故事板类从code一些动画。没有ThicknessAnimation类。而且我也试图建立使用混合故事板，它不那里工作。它只是直接跳转到新的价值，没有流畅的动画效果。
更新：我尝试使用设置translateX变换。但是，当我使用它的图像，图像会被切去。
我正在试图做的是一个动画大图小格子里面很慢，所以它有这种作用（类似于Zune的和Windows Phone库里面的一个）。一旦图像打开我启动动画，这是我的code：
私人无效Image_ImageOpened_1（对象发件人，RoutedEventArgs E）
{
VAR IMG =发件人为图像; 故事板SB =新的故事板（）;
VAR doubleAnimationx =新DoubleAnimation是（）{为了= -100，SpeedRatio = 0.1，从= 0};
Storyboard.SetTarget（doubleAnimationx，IMG）;
Storyboard.SetTargetProperty（doubleAnimationx（UIElement.RenderTransform）（CompositeTransform.TranslateX）。）;
sb.Children.Add（doubleAnimationx）;
sb.Begin（）;
}
XAML中：
＆LT;电网IsSwipeEnabled =真的ItemsSource ={绑定源= {StaticResource的CVS1}}项目单击=ItemsGridView_ItemClick_1
X：NAME =ItemsGridView保证金=50,20,116,46的SelectionMode =无IsItemClickEnabled =真
AutomationProperties.AutomationId =ItemsGridView
AutomationProperties.Name =分组的项目＆GT;
＆LT; Grid.ItemTemplate＆GT;
＆LT;＆DataTemplate的GT;
＆LT;电网HEIGHT =250VariableSizedWrapGrid.ColumnSpan ={结合ColumnSpan}保证金=2＆GT;
＆lt;图像ImageOpened =Image_ImageOpened_1拉伸=UniformToFill来源={结合ImageHQ}＆GT;
＆LT; Image.RenderTransform＆GT;
＆LT; CompositeTransform /＆GT;
＆LT; /Image.RenderTransform>
＆LT; /图像＆GT;
＆LT; StackPanel的VerticalAlignment =底背景=＃AA000000＆GT;
＆LT; TextBlock的保证金=5,5,5,0字号=26文本={绑定名称，模式=单向}的FontFamily =宋体黑/＆GT;
＆LT; TextBlock的保证金=5,0,5,5字号=24文本={结合科，模式=单向}前景={结合SectionColor，模式=单向}/＆GT;
＆LT; / StackPanel的＆GT;
＆LT; /网格和GT;
＆LT; / DataTemplate中＆GT;
＆LT; /Grid.ItemTemplate>
＆LT; /网格和GT;
首先，动画保证金是不是一个好主意（这将需要更新整个树）。你想要什么样的效果达到什么目的？你想移动的对象？如果是使用DoubleAnimation是改变TranslateTransform。
我没有在Windows 8中做到了这一点，但我敢打赌，几乎是一样的WPF。这是最好的XAML定义动画
＆LT; Window.Resources＆GT; ＆LT;情节提要X：键=mainInAnimation＆GT;
＆LT; DoubleAnimation是Storyboard.TargetName =panelTrans
Storyboard.TargetProperty =X的
的BeginTime =0：0：0.2
持续时间=0：0：0.3为=0＆GT;
＆LT; DoubleAnimation.EasingFunction＆GT;
＆LT; ExponentialEase EasingMode =EaseOut/＆GT;
＆LT; /DoubleAnimation.EasingFunction>
＆LT; / DoubleAnimation是＆GT;
＆LT; /故事板＆GT;
然后，你需要渲染变换面板
＆LT; StackPanel的名称=leftPanel...＆GT;
＆LT; StackPanel.RenderTransform＆GT;
＆LT; TranslateTransform X：NAME =panelTransX = - 10＆GT;＆LT; / TranslateTransform＆GT;
＆LT; /StackPanel.RenderTransform>
要启动code动画（I preFER这种方式）
故事板动画=（故事板）this.Resources [mainInAnimation];
anim.Begin（）;
I'm trying to do some animation from code using the Storyboard class. There is no ThicknessAnimation class. And I also tried to build the storyboard using Blend, it doesnt work there. it just jump directly to the new value, no smooth animation.
UPDATE: I tried using the TranslateX transform. But when I use it on an image, the images get clipped. What I'm trying to do is animate a big image very slow inside a small grid, so it has this effect (similar to the one inside the Zune and Windows Phone Gallery). Once the image opens I start the animation, this is my code:
private void Image_ImageOpened_1(object sender, RoutedEventArgs e)
{
var img = sender as Image;
Storyboard sb = new Storyboard();
var doubleAnimationx = new DoubleAnimation() { To = -100, SpeedRatio = 0.1, From = 0 };
Storyboard.SetTarget(doubleAnimationx, img);
Storyboard.SetTargetProperty(doubleAnimationx, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)");
sb.Children.Add(doubleAnimationx);
sb.Begin();
}
Xaml:
<Grid IsSwipeEnabled="True" ItemsSource="{Binding Source={StaticResource cvs1}}" ItemClick="ItemsGridView_ItemClick_1"
x:Name="ItemsGridView" Margin="50,20,116,46" SelectionMode="None" IsItemClickEnabled="True"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Grouped Items">
<Grid.ItemTemplate>
<DataTemplate>
<Grid Height="250" VariableSizedWrapGrid.ColumnSpan="{Binding ColumnSpan}" Margin="2">
<Image ImageOpened="Image_ImageOpened_1" Stretch="UniformToFill" Source="{Binding ImageHQ}" >
<Image.RenderTransform>
<CompositeTransform />
</Image.RenderTransform>
</Image>
<StackPanel VerticalAlignment="Bottom" Background="#AA000000">
<TextBlock Margin="5,5,5,0" FontSize="26" Text="{Binding Name,Mode=OneWay}" FontFamily="Arial Black" />
<TextBlock Margin="5,0,5,5" FontSize="24" Text="{Binding Section,Mode=OneWay}" Foreground="{Binding SectionColor,Mode=OneWay}" />
</StackPanel>
</Grid>
</DataTemplate>
</Grid.ItemTemplate>
</Grid>
First off, animating the margin is not a good idea (it will require updating whole tree). What kind of effect do you want to achieve? Do you want to move the object? If yes use DoubleAnimation to change TranslateTransform.
I haven't done this in Windows 8, but I bet is almost the same as in WPF. It's the best to define the animation in XAML
<Window.Resources>
<Storyboard x:Key="mainInAnimation">
<DoubleAnimation Storyboard.TargetName="panelTrans"
Storyboard.TargetProperty="X"
BeginTime="0:0:0.2"
Duration="0:0:0.3" To="0" >
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
Then you need render transform to the panel
<StackPanel Name="leftPanel" ... >
<StackPanel.RenderTransform>
<TranslateTransform x:Name="panelTrans" X="-10"></TranslateTransform>
</StackPanel.RenderTransform>
To start animation in code (I prefer this way)
Storyboard anim = (Storyboard)this.Resources["mainInAnimation"];
anim.Begin();
这篇关于有没有办法动画在Metro风格应用的Margin属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
