none
wpf 控件出现采用从窗口右边慢慢往左显示的动画效果 RRS feed

  • 问题

  • <Grid>
    <Image/>
    <Image x:name=“image2” Visibility="Collage"/>
    </Grid>
    改变image2的Visibility为Visible,使image2显示,但不是立即显示,而是从窗体右边慢慢往左出现,该如何做?
    2013年12月23日 7:01

答案

  • <Window.Resources>
    		<Storyboard x:Key="Storyboard1">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle">
    				<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
    			<BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="{StaticResource Storyboard1}"/>
    		</EventTrigger>
    	</Window.Triggers>
        <Grid>
            <Rectangle Fill="Red" />
            <Rectangle x:Name="rectangle" Fill="Yellow" RenderTransformOrigin="0.5,0.5">
            	<Rectangle.RenderTransform>
            		<TransformGroup>
            			<ScaleTransform/>
            			<SkewTransform/>
            			<RotateTransform/>
            			<TranslateTransform X="510"/>
            		</TransformGroup>
            	</Rectangle.RenderTransform>
            </Rectangle>
            <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="26" Margin="99,86,0,0" VerticalAlignment="Top" Width="113"/>
        </Grid>


    看这个例子,点击按钮时会实现你说的那个效果。

    原理,先使用RenderTransform将rectangle移动到窗体外,在新建一个Storyboard使用DoubleAnimation将rectangle移动到窗体内。




    • 已编辑 xsi640 2013年12月26日 6:23
    • 已标记为答案 skczjun 2013年12月26日 10:42
    2013年12月26日 6:21

全部回复

  • 您好!

    我建议您使用DispatcherTimer来实现,下面是一个相关的link,大概内容是有三个图画片,从第一个到第二,三个显示一遍.

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/bc0fbe9d-fc34-4958-83ee-5e1bbdedb270/   

    但是这里你的要求稍微有些不同,你要求在第三个图片显示完之后,又回到第二个,之后第二个第三个不断反复,最后再显示第一个,我分开来讲解.

    -->A: 又回到第二个,之后第二个第三个不断反复

    你在我上面的link中,可以看到我用一个index的变量来控制图片的显示顺序,在第三个显示完以后,你可以用Index/2来回到第二个,再用Index++.

    -->B:最后再显示第一个

    设置一个计数器变量,达到某一值是就回到第一个.

    祝您生活愉快!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    2013年12月24日 6:12
    版主
  • <Window.Resources>
    		<Storyboard x:Key="Storyboard1">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle">
    				<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
    			<BeginStoryboard x:Name="Storyboard1_BeginStoryboard" Storyboard="{StaticResource Storyboard1}"/>
    		</EventTrigger>
    	</Window.Triggers>
        <Grid>
            <Rectangle Fill="Red" />
            <Rectangle x:Name="rectangle" Fill="Yellow" RenderTransformOrigin="0.5,0.5">
            	<Rectangle.RenderTransform>
            		<TransformGroup>
            			<ScaleTransform/>
            			<SkewTransform/>
            			<RotateTransform/>
            			<TranslateTransform X="510"/>
            		</TransformGroup>
            	</Rectangle.RenderTransform>
            </Rectangle>
            <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="26" Margin="99,86,0,0" VerticalAlignment="Top" Width="113"/>
        </Grid>


    看这个例子,点击按钮时会实现你说的那个效果。

    原理,先使用RenderTransform将rectangle移动到窗体外,在新建一个Storyboard使用DoubleAnimation将rectangle移动到窗体内。




    • 已编辑 xsi640 2013年12月26日 6:23
    • 已标记为答案 skczjun 2013年12月26日 10:42
    2013年12月26日 6:21