动画无法在 Windows Phone 的滚动视图中开始

Posted 2023-02-22

【中文标题】动画无法在 Windows Phone 的滚动视图中开始

【英文标题】：animation can't begin in scrollview in windows phone

【发布时间】：2013-06-24 03:02:26

【问题描述】：

我想实现这样的效果： 有一个 80*80 的滚动视图，我在里面放了一个 160*80 的图片 1s：滚动视图中的图片左/上，2s：滚动视图中的图片右/上 滚动作为一个过渡过程

我的代码：xaml

    <UserControl.Resources>
    <Storyboard x:Name="Storyboard1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="my_combo_pic">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="80"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="my_combo_pic">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>


...
                <ScrollViewer x:Name="my_combo" Tap="MyCombolIconTapped" HorizontalAlignment="Right" Height="80" Margin="0" VerticalAlignment="Bottom" Width="80">
                    <Image x:Name="my_combo_pic" Stretch="Fill" Source="/Images/my_combo_icon.png" RenderTransformOrigin="0.5,0.5" Height="160" Width="80">
                        <Image.RenderTransform>
                            <CompositeTransform/>
                        </Image.RenderTransform>
                    </Image>
                </ScrollViewer>
            </Grid>

cs

    Storyboard1.Begin();

在加载中

但是，我发现即使在表情混合中效果很好，动画也不起作用 那么，你能帮我找出原因吗？？？ 或者给我另一种实现方式 谢谢你！！！ 任何建议都会很棒

【参考方案1】：

将您的ScrollViewer 内容放在Grid 中，如下所示：

<ScrollViewer>
        <Grid>
            <Image x:Name="my_combo_pic" Stretch="Fill" Source="/Images/my_combo_icon.png" RenderTransformOrigin="0.5,0.5" Height="160" Width="266">
                <Image.RenderTransform>
                    <CompositeTransform />
                </Image.RenderTransform>
            </Image>
        </Grid>
</ScrollViewer>

这里的问题是动画系统有点混乱，因为 ScrollViewer 里面只有一个 Image 本身不是一个容器，所以它认为没有动画的地方（因为它与任何事物无关）。

【讨论】：

但是有一个问题，如果我将滚动视图更改为网格，滚动对象将在容器上方，我会在容器上方看到整个 160*80 滚动对象。

我只是想让容器里的滚动物体，我只看到80*80

最让我困惑的是，当我使用移动位置动画时，移动的物体似乎总是在表面，高于所有容器，我不知道我的错在哪里

我并不是提倡替换 ScrollViewer。把上面的Grid放在ScrollViewer里面。