Silverlight的图像翻转动画 [英] Silverlight Image Flip Animation

查看：244
本文介绍了Silverlight的图像翻转动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的Silverlight应用程序，我有相同尺寸的两个图像。

当用户点击该图像上，我想一个图像的过渡​​的动画的其他，好像它是一张纸被翻转与前面所述第一图像和其他在后面。

我还没有和Silverlight动画工作，又那么我不知道从哪里开始。


解决方案

基本上你将需要两个 Storybards 开始。每个故事板将使用<一个href=\"http://msdn.microsoft.com/en-us/library/system.windows.media.planeprojection%28v=vs.95%29.aspx\"相对=nofollow> PlaneProjection （在这种情况下，我使用的rotationX 其中绕旋转x轴的图像）做翻转动画。

在下面的例子中，我创建了 FlippingDown 和 FlippingUp 两个故事板。我附加了 ControlStoryboardAction 行为，他们每个人，当的MouseLeftButtonDown 被激发他们就会被触发。

您将需要引用 System.Windows.Interactivity 和 Microsoft.Ex pression.Interactions 

 ＆LT，用户控件的xmlns =htt​​p://schemas.microsoft.com/winfx/2006/xaml/$p$psentation的xmlns：X =HTTP：//模式。 microsoft.com/winfx/2006/xaml的xmlns：D =http://schemas.microsoft.com/ex$p$pssion/blend/2008的xmlns：MC =http://schemas.openxmlformats.org/标记兼容性/ 2006的xmlns：I =http://schemas.microsoft.com/ex$p$pssion/2010/interactivity的xmlns：EI =http://schemas.microsoft.com/ex$p$ pssion / 2010 /相互作用MC：可忽略=DX：类=FilppingAnimation.MainPageWIDTH =640HEIGHT =480＆GT;    ＆LT; UserControl.Resources＆GT;
        ＆LT;情节提要X：NAME =FlippingDown＆GT;
            ＆LT; D​​oubleAnimationUsingKeyFrames Storyboard.TargetProperty =。（UIElement.Projection）（PlaneProjection.RotationX）Storyboard.TargetName =前＆GT;
                ＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.3值=90.0146/＆GT;
                ＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.6值=180/＆GT;
            ＆LT; / DoubleAnimationUsingKeyFrames＆GT;
            ＆LT; D​​oubleAnimationUsingKeyFrames Storyboard.TargetProperty =。（UIElement.Projection）（PlaneProjection.RotationX）Storyboard.TargetName =返回＆GT;
                ＆所述; EasingDoubleKeyFrame KeyTime =0值= -  180/＆GT;
                ＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.3值= -  90/＆GT;
                ＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.6值=0/＆GT;
            ＆LT; / DoubleAnimationUsingKeyFrames＆GT;
            ＆LT; ObjectAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Visibility）Storyboard.TargetName =前＆GT;
                ＆所述; DiscreteObjectKeyFrame KeyTime =0＆GT;
                    ＆LT; D​​iscreteObjectKeyFrame.Value＆GT;
                        ＆LT;能见度和GT;可见的LT; /能见度和GT;
                    ＆LT; /DiscreteObjectKeyFrame.Value>
                ＆LT; / DiscreteObjectKeyFrame＆GT;
                ＆所述; DiscreteObjectKeyFrame KeyTime =0：0：0.3＆GT;
                    ＆LT; D​​iscreteObjectKeyFrame.Value＆GT;
                        ＆LT;能见度和GT;倒塌＆LT; /能见度和GT;
                    ＆LT; /DiscreteObjectKeyFrame.Value>
                ＆LT; / DiscreteObjectKeyFrame＆GT;
            ＆LT; / ObjectAnimationUsingKeyFrames＆GT;
            ＆LT; ObjectAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Visibility）Storyboard.TargetName =返回＆GT;
                ＆所述; DiscreteObjectKeyFrame KeyTime =0＆GT;
                    ＆LT; D​​iscreteObjectKeyFrame.Value＆GT;
                        ＆LT;能见度和GT;可见的LT; /能见度和GT;
                    ＆LT; /DiscreteObjectKeyFrame.Value>
                ＆LT; / DiscreteObjectKeyFrame＆GT;
                ＆所述; DiscreteObjectKeyFrame KeyTime =0：0：0.3＆GT;
                    ＆LT; D​​iscreteObjectKeyFrame.Value＆GT;
                        ＆LT;能见度和GT;可见的LT; /能见度和GT;
                    ＆LT; /DiscreteObjectKeyFrame.Value>
                ＆LT; / DiscreteObjectKeyFrame＆GT;
            ＆LT; / ObjectAnimationUsingKeyFrames＆GT;
        ＆LT; /故事板＆GT;
        ＆LT;情节提要X：NAME =FlippingUp＆GT;
            ＆LT; ObjectAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Visibility）Storyboard.TargetName =前GT＆;
                ＆所述; DiscreteObjectKeyFrame KeyTime =0：0：0.3＆GT;
                    ＆LT; D​​iscreteObjectKeyFrame.Value＆GT;
                        ＆LT;能见度和GT;可见的LT; /能见度和GT;
                    ＆LT; /DiscreteObjectKeyFrame.Value>
                ＆LT; / DiscreteObjectKeyFrame＆GT;
            ＆LT; / ObjectAnimationUsingKeyFrames＆GT;
            ＆LT; D​​oubleAnimation是持续时间=0：0：0.6为了=0Storyboard.TargetProperty =。（UIElement.Projection）（PlaneProjection.RotationX）Storyboard.TargetName =接待D：IsOptimized =真/＆GT ;
            ＆LT; D​​oubleAnimationUsingKeyFrames Storyboard.TargetProperty =。（UIElement.Projection）（PlaneProjection.RotationX）Storyboard.TargetName =返回＆GT;
                ＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.3值= -  90.0146/＆GT;
                ＆所述; EasingDoubleKeyFrame KeyTime =0：0：0.6值= -  180/＆GT;
            ＆LT; / DoubleAnimationUsingKeyFrames＆GT;
            ＆LT; ObjectAnimationUsingKeyFrames Storyboard.TargetProperty =（UIElement.Visibility）Storyboard.TargetName =返回＆GT;
                ＆所述; DiscreteObjectKeyFrame KeyTime =0＆GT;
                    ＆LT; D​​iscreteObjectKeyFrame.Value＆GT;
                        ＆LT;能见度和GT;可见的LT; /能见度和GT;
                    ＆LT; /DiscreteObjectKeyFrame.Value>
                ＆LT; / DiscreteObjectKeyFrame＆GT;
                ＆所述; DiscreteObjectKeyFrame KeyTime =0：0：0.3＆GT;
                    ＆LT; D​​iscreteObjectKeyFrame.Value＆GT;
                        ＆LT;能见度和GT;倒塌＆LT; /能见度和GT;
                    ＆LT; /DiscreteObjectKeyFrame.Value>
                ＆LT; / DiscreteObjectKeyFrame＆GT;
            ＆LT; / ObjectAnimationUsingKeyFrames＆GT;
        ＆LT; /故事板＆GT;
    ＆LT; /UserControl.Resources>    ＆LT;电网X：NAME =LayoutRoot背景=＃FFCC9E9E＆GT;
        ＆lt;图像X：NAME =后退的Horizo​​ntalAlignment =中心VerticalAlignment =中心源=/ 311438.jpgHEIGHT =226WIDTH =129＆GT;
            ＆LT; I：Interaction.Triggers＆GT;
                ＆LT; I：的EventTrigger事件名称=的MouseLeftButtonDown＆GT;
                    ＆LT; EI：ControlStoryboardAction故事板={StaticResource的FlippingUp}/＆GT;
                ＆LT; /我：＆的EventTrigger GT;
            ＆LT; /我：Interaction.Triggers＆GT;
            ＆LT; Image.Projection＆GT;
                ＆LT; PlaneProjection /＆GT;
            ＆LT; /Image.Projection>
        ＆LT; /图像＆GT;
        ＆lt;图像X：NAME =接待的Horizo​​ntalAlignment =中心VerticalAlignment =中心源=/ 318549.jpgHEIGHT =226WIDTH =129D：是否隐藏=真＆GT;
            ＆LT; Image.Projection＆GT;
                ＆LT; PlaneProjection /＆GT;
            ＆LT; /Image.Projection>
            ＆LT; I：Interaction.Triggers＆GT;
                ＆LT; I：的EventTrigger事件名称=的MouseLeftButtonDown＆GT;
                    ＆LT; EI：ControlStoryboardAction故事板={StaticResource的FlippingDown}/＆GT;
                ＆LT; /我：＆的EventTrigger GT;
            ＆LT; /我：Interaction.Triggers＆GT;
        ＆LT; /图像＆GT;
    ＆LT; /网格和GT;
＆LT; /用户控件＆GT;

希望这有助于。 ：）

In my silverlight app, I have two images of equal dimension.

When the user clicks on the image I would like to animate the transition of one image to the other as if it were a piece of paper being flipped with the first image on the front and the other on the back.

I haven't worked with silverlight animation, yet so I don't know where to begin.

解决方案

Basically you will need two Storybards to begin with. Each Storyboard will be using PlaneProjection (in this case I am using RotationX which rotates the images around the x-axis of rotation) to do the flipping animation.

In the following example, I have created FlippingDown and FlippingUp two Storyboards. I attached a ControlStoryboardAction behavior to each of them, they will be triggered when MouseLeftButtonDown is fired.

You'll need to reference System.Windows.Interactivity and Microsoft.Expression.Interactions.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" mc:Ignorable="d" x:Class="FilppingAnimation.MainPage" Width="640" Height="480">

    <UserControl.Resources>
        <Storyboard x:Name="FlippingDown">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Front">
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="90.0146"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="180"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Back">
                <EasingDoubleKeyFrame KeyTime="0" Value="-180"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-90"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Front">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Back">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="FlippingUp">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Front">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation Duration="0:0:0.6" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Front" d:IsOptimized="True"/>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Back">
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-90.0146"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="-180"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Back">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="#FFCC9E9E">
        <Image x:Name="Back" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/311438.jpg" Height="226" Width="129">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource FlippingUp}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image.Projection>
                <PlaneProjection/>
            </Image.Projection>
        </Image>
        <Image x:Name="Front" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/318549.jpg" Height="226" Width="129" d:IsHidden="True">
            <Image.Projection>
                <PlaneProjection/>
            </Image.Projection>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource FlippingDown}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Image>
    </Grid>
</UserControl>

Hope this helps. :)

这篇关于Silverlight的图像翻转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
跨浏览器开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆