PivotItem元素动画

本文关键字：动画 元素 PivotItem | 更新日期: 2023-09-27 18:14:45

我有一个关于制作pivotItem动画的问题。我使用PivotItem作为一个控件，而不是一个页面。

我有几个图像在ItemTemplate，我想动画

   <Pivot.Resources>
                    <Storyboard x:Name="CardsShuffle">
                        <DoubleAnimation Duration="0:0:1" To="20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Card3"  d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0:0:1" To="-20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0:0:1" To="-20.833" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                        <DoubleAnimation Duration="0:0:1" To="-1.667" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                    </Storyboard>
            </Pivot.Resources>

和枢轴结构本身

            <Pivot.HeaderTemplate>
                <DataTemplate>
                    <TextBlock HorizontalAlignment="Center" 
                                   VerticalAlignment="Center" Padding="10"
                                   FontSize="10"
                                   Text="{Binding PackName}"/>
                </DataTemplate>
            </Pivot.HeaderTemplate>
            <Pivot.ItemTemplate>
                <DataTemplate>
                    <StackPanel Tapped="PivotItemSelected">
                        <Grid x:Name="LayoutRoot">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="7*"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid Grid.Row="0" Name="MyGrid">
                                <Image Name="Card3" Source="/Data/Images/img_test.png" MaxHeight="350">
                                    <Image.RenderTransform>
                                        <CompositeTransform CenterY="250" CenterX="90" />
                                    </Image.RenderTransform>
                                </Image>
                                <Image Name="Card2" Source="/Data/Images/img_test.png" MaxHeight="350">
                                    <Image.RenderTransform>
                                        <CompositeTransform Rotation="0"/>
                                    </Image.RenderTransform>
                                </Image>
                                <Image Name="Card1" Source="/Data/Images/img_test.png" MaxHeight="350" RenderTransformOrigin="0.5,0.5">
                                    <Image.RenderTransform>
                                        <CompositeTransform/>
                                    </Image.RenderTransform>
                                </Image>
                                <Button Click="ButtonBase_OnClick" Content="Animate"></Button>
                            </Grid>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </Pivot.ItemTemplate>

首先我有一个关于绑定的问题。我找不到或弄清楚如何处理绑定子元素，而不是定义一个名称(它在网格中工作，但不能pivot)。尝试使用Storyboard。Target="{Binding ElementName= PacksPivot, Path= '?? ' "但是找不到合适的解决办法。

其次，我希望动画在PivotSelectedIndex改变后x秒触发，否则我想要初始状态

对于这个问题有什么建议吗?

PivotItem元素动画

好的，我已经解决了:)

 <Grid x:Name="LayoutRoot">
                            <Grid.Triggers>
                                <EventTrigger RoutedEvent="Grid.Loaded">
                                    <BeginStoryboard>
                                        <Storyboard x:Name="CardsShuffle">
                                            <DoubleAnimation Duration="0:0:1" To="20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"  Storyboard.TargetName="Card3"  d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0:0:1" To="-20" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0:0:1" To="-20.833" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0:0:1" To="-1.667" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Card1" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Grid.Triggers>

名称实际上是工作的，我使用事件触发器来启动动画

相关文章：