Wp7 Storyboard 动画设置出现地平线 [英] Wp7 Storyboard Animation Setting Appearing Horizon

问题描述

我只是想知道是否有一种方法可以设置您希望故事板项目出现在屏幕上的垂直阈值(滑入和滑出时)，这样它就不必滑过所有内容屏幕弹出和弹出时.我有一个根据计时器事件翻转的项目列表，但是当一个项目出现在屏幕上时，它会跳过所有其他按钮和用户控件，并且看起来不太漂亮.如果我能让它看起来好像项目从背景中滑出到位就好了.

I'm just wondering if there is a way to set a vertical threshold of where you want a story board item to appear on the screen (when sliding in and out) so that it doesn't have to slide across everything on the screen when it's popping in and out. I have an list of items that get flipped though according to a timer event but when an item comes onto the screen it passes over all the other buttons and user controls and it doesn't look very pretty. It would be nice if I could just make it appear as if the item was sliding right out of the background into position.

我有两个storyboard动画，一个处理对象滑入，另一个处理当前需要滑出的对象.内容区域的两侧还有箭头按钮，目前对象正在箭头上滑动，这就是我想要消除的.这是故事板代码:

I have two storyboard animations, one to deal with the object sliding in the other to deal with the current object that needs to be slid out. There are also arrow buttons on either side of the content area and currently the objects are sliding over the arrows, which is what I am trying to eliminate. Here is the storyboard code:

    <Storyboard x:Key="newsIn" x:Name="newsIn">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="newsContent">
            <EasingDoubleKeyFrame KeyTime="0" Value="500"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BounceEase EasingMode="EaseIn" Bounces="0"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard x:Key="newsOut" x:Name="newsOut">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="newsContent">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-500">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BounceEase EasingMode="EaseIn" Bounces="0"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

我不知道我是否清楚地描述了这一点，但如果有人以前做过这件事或知道我可以学习这样做的资源，我们非常感谢您的帮助.

I don't know if I described this very clearly but if someone has done this before or knows of a resource where I could learn to do this your help is greatly appreciated.

感谢您的时间.

答案:将动画元素放在画布(或某个容器)中，并使用 Clip 属性仅在它们出现在专用区域内时才显示它们.

ANSWER: Put the elements your animating inside a canvas (or some container) and use the Clip property to only desplay them when they apear inside the dedicated area like so.

    <Canvas Name="newsContent" Grid.Column="1" >
       <Canvas.Clip>
           <RectangleGeometry Rect="0,0,372,200"/>
       </Canvas.Clip>
       <Ui element/>
       <Ui element2/>
       ....
    </Canvas>

推荐答案

好的，您可以尝试在作为内容容器的控件上使用 clipToBounds = true ，即包含新闻"项(即画布或网格等)的控件).确保您的箭头等不在同一个容器中

Ok, can you try using clipToBounds = true on the control that is your content container i.e the control that contains the "news" items (i.e. canvas or grid etc). Make sure your arrows etc are not in the same container

这篇关于Wp7 Storyboard 动画设置出现地平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！