TranslateTransform没有动画流畅

时间:2011-09-06 15:05:42

标签: wpf animation

我终于设法让我的布局正确并且动画工作并且它不顺畅。它在中间有一个巨大的抖动/步骤。

我有一个使用StackPanel ItemsPanel的ListBox,ListBoxItems使用DataTemplate设置样式。这些项目是使用边框和可视笔刷进行反射的图像。

<UserControl x:Class="Thumbnails"
         xmlns:local="clr-namespace:ContentPresenter"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:sys="clr-namespace:System;assembly=mscorlib"
         mc:Ignorable="d" 
         d:DesignHeight="350" d:DesignWidth="800">
<UserControl.Resources>
    <local:ThumbImageHeightConverter x:Key="HeightConv" />
    <local:ThumbImageWidthConverter x:Key="WidthConv" />
    <local:InnerGridHeightConverter x:Key="InnerGridHeightConv" />
    <local:ReflectWidthConverter x:Key="ReflectWidthConv" />
    <local:ReflectCenterYConv x:Key="ReflectCenterYConv" />
    <local:BorderThicknessScale x:Key="BorderThicknessScale" />
    <local:BorderCornerRadiusScale x:Key="BorderCornerRadiusScale" />

    <Storyboard x:Key="FadeUpAndFlash">
        <!--<DoubleAnimation From="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:10" FillBehavior="Stop" />-->
        <DoubleAnimation From="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:1" FillBehavior="Stop" />
    </Storyboard>
    <Storyboard x:Key="ReflectFadeUpAndFlash">
        <!--<DoubleAnimation From="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:10" FillBehavior="Stop" />-->
        <DoubleAnimation From="0" To="0.75" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="0:0:1" FillBehavior="Stop" />
    </Storyboard>

    <Style TargetType="{x:Type ListBox}">
        <!-- Set the ItemTemplate of the ListBox to a DataTemplate which explains how to display an object of type BitmapImage. -->
        <Style.Resources>
            <!-- Background of selected item when focussed -->
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Black"/>
            <!-- Background of selected item when not focussed -->
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"  Color="Black" />

        </Style.Resources>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid x:Name="ThumbGrid" VerticalAlignment="Top" Height="{Binding ElementName=ThumbListBox, Path=ActualHeight}"  >
                        <Grid.RowDefinitions>
                            <RowDefinition x:Name="ThumbGridThumbImgRow" Height="80*" ></RowDefinition>
                            <RowDefinition x:Name="GridReflectRow" Height="20*" ></RowDefinition>
                        </Grid.RowDefinitions>

                        <Border x:Name="HighlightBorder" Padding="2" Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Border.Style>
                                <Style TargetType="{x:Type Border}">
                                    <Setter Property="BorderBrush" Value="Black"/>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="True">

                                            <DataTrigger.Setters>
                                                <Setter Property="BorderBrush" Value="Yellow"/>
                                            </DataTrigger.Setters>
                                            <DataTrigger.EnterActions>
                                                <BeginStoryboard Storyboard="{StaticResource FadeUpAndFlash}" Name="AnimateImageBorder" />
                                            </DataTrigger.EnterActions>
                                            <DataTrigger.ExitActions>
                                                <StopStoryboard BeginStoryboardName="AnimateImageBorder" />
                                            </DataTrigger.ExitActions>

                                            <!--<Setter Property="BorderBrush" Value="Yellow"/>-->
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <Border.Resources>
                                <sys:Int32 x:Key="HighlightBorderOrigRadius">18</sys:Int32>
                            </Border.Resources>
                            <Border.CornerRadius>
                                <MultiBinding Converter="{StaticResource BorderCornerRadiusScale}">
                                    <Binding ElementName="HighlightBorder" Path="ActualWidth" />
                                    <Binding Source="{StaticResource HighlightBorderOrigRadius}" />
                                </MultiBinding>
                            </Border.CornerRadius>
                            <Border.BorderThickness>
                                <MultiBinding Converter="{StaticResource BorderThicknessScale}">
                                    <Binding ElementName="HighlightBorder" Path="ActualWidth" />
                                </MultiBinding>
                            </Border.BorderThickness>
                            <Grid x:Name="ThumbInnerGrid">
                                <Grid.Height>
                                    <MultiBinding Converter="{StaticResource InnerGridHeightConv}">
                                        <Binding ElementName="ThumbGrid" Path="ActualHeight" />
                                        <Binding ElementName="HighlightBorder" Path="CornerRadius" />
                                        <Binding ElementName="mask" Path="CornerRadius" />
                                    </MultiBinding>
                                </Grid.Height>
                                <Border x:Name="mask" Background="Black">

                                    <Border.Resources>
                                        <sys:Int32 x:Key="MaskBorderOrigRadius">15</sys:Int32>
                                    </Border.Resources>
                                    <Border.CornerRadius>
                                        <MultiBinding Converter="{StaticResource BorderCornerRadiusScale}">
                                            <Binding ElementName="mask" Path="ActualWidth" />
                                            <Binding Source="{StaticResource MaskBorderOrigRadius}" />
                                        </MultiBinding>
                                    </Border.CornerRadius>
                                </Border>
                                <StackPanel x:Name="ThumbInnerStack" VerticalAlignment="Top">
                                    <StackPanel.OpacityMask>
                                        <VisualBrush Visual="{Binding ElementName=mask}"/>
                                    </StackPanel.OpacityMask>

                                    <Image x:Name="ThumbImg" Stretch="UniformToFill" SnapsToDevicePixels="True" >
                                        <Image.Height>
                                            <MultiBinding Converter="{StaticResource HeightConv}">
                                                <Binding ElementName="HighlightBorder" Path="ActualHeight" />
                                                <Binding ElementName="HighlightBorder" Path="BorderThickness" />
                                                <Binding ElementName="HighlightBorder" Path="Padding" />
                                            </MultiBinding>
                                        </Image.Height>
                                        <Image.Width>
                                            <MultiBinding Converter="{StaticResource WidthConv}">
                                                <Binding ElementName="ThumbImg" Path="ActualHeight" />
                                                <Binding ElementName="HighlightBorder" Path="BorderThickness" />
                                                <Binding ElementName="HighlightBorder" Path="Padding" />
                                            </MultiBinding>
                                        </Image.Width>
                                        <Image.Source>
                                            <BitmapImage UriSource="{Binding Path=Src}"></BitmapImage>
                                        </Image.Source>
                                    </Image>
                                </StackPanel>
                            </Grid> 
                        </Border>
                        <Border x:Name="ReflectBorder" Margin="0,-1,0,0" VerticalAlignment="Top" Height="{Binding ElementName=ThumbImg, Path=ActualHeight}" Grid.Row="1" SnapsToDevicePixels="True" Opacity="0.75" >
                            <Border.Style>
                                <Style TargetType="{x:Type Border}">

                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="True">

                                            <DataTrigger.EnterActions>
                                                <BeginStoryboard Storyboard="{StaticResource ReflectFadeUpAndFlash}" Name="AnimateImageReflection" />
                                            </DataTrigger.EnterActions>
                                            <DataTrigger.ExitActions>
                                                <StopStoryboard BeginStoryboardName="AnimateImageReflection" />
                                            </DataTrigger.ExitActions>

                                            <!--<Setter Property="BorderBrush" Value="Yellow"/>-->
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Border.Style>
                            <Border.Resources>
                                    <sys:Int32 x:Key="MaskBorderOrigRadius">15</sys:Int32>
                                </Border.Resources>
                                <Border.CornerRadius>
                                    <MultiBinding Converter="{StaticResource BorderCornerRadiusScale}">
                                    <Binding ElementName="ReflectBorder" Path="ActualWidth" />
                                        <Binding Source="{StaticResource MaskBorderOrigRadius}" />
                                    </MultiBinding>
                                </Border.CornerRadius>

                            <Border.Width>
                                <MultiBinding Converter="{StaticResource ReflectWidthConv}">
                                    <Binding ElementName="HighlightBorder" Path="ActualWidth" />
                                    <Binding ElementName="HighlightBorder" Path="BorderThickness" />
                                </MultiBinding>
                            </Border.Width>
                            <Border.Background>
                                <VisualBrush Visual="{Binding ElementName=ThumbImg}">
                                    <VisualBrush.Transform>
                                        <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="200">
                                            <ScaleTransform.CenterY>
                                                <MultiBinding Converter="{StaticResource ReflectCenterYConv}">
                                                    <Binding ElementName="ThumbImg" Path="ActualHeight" />
                                                </MultiBinding>
                                            </ScaleTransform.CenterY>
                                        </ScaleTransform>
                                    </VisualBrush.Transform>
                                </VisualBrush>
                            </Border.Background>
                            <Border.OpacityMask>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.3">
                                    <GradientStop Offset="0" Color="Black"></GradientStop>
                                    <GradientStop Offset="0.15" Color="Transparent"></GradientStop>
                                </LinearGradientBrush>
                            </Border.OpacityMask>
                        </Border>
                        <Grid Grid.Row="1" MaxWidth="{Binding ElementName=ThumbImg, Path=ActualWidth}">
                            <Border Padding="10,0,10,25">
                                <Viewbox VerticalAlignment="Top" MaxWidth="{Binding ElementName=ThumbImg, Path=ActualWidth}">
                                    <Label x:Name="ThumbTitle" Margin="0,-5,0,0" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" Content="{Binding Path=Title}" FontFamily="Arial" Foreground="White" />
                                </Viewbox>
                            </Border>
                        </Grid>
                    </Grid> 
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel x:Name="ThumbListStack" Orientation="Horizontal" Loaded="StackPanel_Loaded">
                    <StackPanel.RenderTransform>
                        <TranslateTransform X="0" Y="0" />
                    </StackPanel.RenderTransform>
                    </StackPanel> 
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"  />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"  />
        <Setter Property="Background" Value="Black"/>

    </Style>

</UserControl.Resources>

    <UserControl.DataContext>
        <ObjectDataProvider ObjectType="{x:Type local:ThumbImageLoader}" MethodName="LoadImagesv2" IsAsynchronous="True"  />
</UserControl.DataContext>


<!-- This ListBox is the Content of the Window. Normally you would have a panel of some type as the Window's Content, but let's keep it simple. -->
<Grid x:Name="ThumbListBoxGrid">
    <ListBox x:Name="ThumbListBox" ItemsSource="{Binding}" VerticalAlignment="Top" Height="{Binding ElementName=ThumbListBoxGrid, Path=ActualHeight}" IsSynchronizedWithCurrentItem="True" />
</Grid>

以下是控制TranslateTransform动画的代码隐藏:

    RenderTransform = New TranslateTransform()
    Dim d As New Duration(New TimeSpan(0, 0, 0, 1, 30))
    Dim x As New DoubleAnimation(translatePosition.X, d)
    x.EasingFunction = New PowerEase() With {.EasingMode = EasingMode.EaseInOut, .Power = 4}


    Storyboard.SetTarget(x, m_itemsPanelStackPanel)
    Storyboard.SetTargetProperty(x, New PropertyPath("(StackPanel.RenderTransform).(TranslateTransform.X)"))
    Timeline.SetDesiredFrameRate(x, 120)
    'Storyboard.SetDesiredFrameRate(x, 120) 'have tried setting the FrameRate both ways
    Dim sb As New Storyboard()

    sb.Children.Add(x)
    sb.Begin()

我试过禁用Ease但没有改进。

TranslateTransform是否存在已知问题?

我还能做些什么来提高性能吗?有没有更好的方法来设置x轴的动画以使列表框中的图像水平滚动?

0 个答案:

没有答案