windows phone水平滑动翻页动画效果

XAM部分:

<phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="Init"  >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="zero">
                <EasingDoubleKeyFrame KeyTime="0" Value="-480"/>
            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="two">
                <EasingDoubleKeyFrame KeyTime="0" Value="480"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Name="Next"  >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="zero">
                <EasingDoubleKeyFrame KeyTime="0" Value="480"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="one">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-480"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="two">
                <EasingDoubleKeyFrame KeyTime="0" Value="480"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Name="Prev">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="zero">
                <EasingDoubleKeyFrame KeyTime="0" Value="-480"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="one">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="480"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="two">
                <EasingDoubleKeyFrame KeyTime="0" Value="-480"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent" Tap="LayoutRoot_Tap">
        <StackPanel   HorizontalAlignment="Left"  x:Name="zero" VerticalAlignment="Top" Width="480" Height="750" RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2"  Canvas.Top="20">
            <TextBlock Width="480" Height="750" TextWrapping="Wrap" Text="0000000000000000000000000000000000000000000000000000000000000000000000000000000" FontSize="60"></TextBlock>
            <StackPanel.RenderTransform>
                <CompositeTransform/>
            </StackPanel.RenderTransform>
        </StackPanel>
        <StackPanel   HorizontalAlignment="Left" x:Name="one" VerticalAlignment="Top" Width="480" Height="750"  RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2" Canvas.Left="480" Canvas.Top="20">
            <!--<StackPanel.Background>
                    <ImageBrush ImageSource="/text2;component/Images/Desert.jpg" />
                </StackPanel.Background>-->
            <TextBlock Width="480" Height="750" TextWrapping="Wrap" Text="11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" FontSize="60"></TextBlock>
            <StackPanel.RenderTransform>
                <CompositeTransform />
            </StackPanel.RenderTransform>
        </StackPanel>
        <StackPanel   HorizontalAlignment="Left" x:Name="two" VerticalAlignment="Top" Width="480" Height="750"  RenderTransformOrigin="0.5,0.5" Grid.RowSpan="2" Canvas.Left="960" Canvas.Top="20">
            <!--<StackPanel.Background>
                    <ImageBrush ImageSource="/text2;component/Images/Desert.jpg" />
                </StackPanel.Background>-->
            <TextBlock Width="480" Height="750" TextWrapping="Wrap" Text="222222222222222222222222222222222222222222222222222222222222222222222222222" FontSize="60"></TextBlock>
            <StackPanel.RenderTransform>
                <CompositeTransform />
            </StackPanel.RenderTransform>
        </StackPanel>
    </Grid>

cs代码部分:

Dictionary<int, StackPanel> dic = new Dictionary<int, StackPanel>();

        // 构造函数
        public MainPage()
        {
            InitializeComponent();

            dic.Add(0, zero);
            dic.Add(1, one);
            dic.Add(2, two);
            Init.Begin();
        }

        private void LayoutRoot_Tap(object sender, System.Windows.Input.GestureEventArgs e)
        {
            Point point = e.GetPosition(LayoutRoot);
            if (point.X <= 240)
            {
                //上一页。
                Prev.Stop();
                Storyboard.SetTargetName(Prev.Children[0], dic[0].Name);
                Storyboard.SetTargetName(Prev.Children[1], dic[1].Name);
                Storyboard.SetTargetName(Prev.Children[2], dic[2].Name);
                StackPanel temp = dic[2];
                dic[2] = dic[1];
                dic[1] = dic[0];
                dic[0] = temp;
                Prev.Begin();
            }
            else
            {
                Next.Stop();
                Storyboard.SetTargetName(Next.Children[0], dic[0].Name);
                Storyboard.SetTargetName(Next.Children[1], dic[1].Name);
                Storyboard.SetTargetName(Next.Children[2], dic[2].Name);
                StackPanel temp = dic[0];
                dic[0] = dic[1];
                dic[1] = dic[2];
                dic[2] = temp;
                Next.Begin();
            }
        }

转自:http://www.cnblogs.com/poorpan/archive/2012/04/23/2466413.html

时间: 2024-08-10 03:08:37

windows phone水平滑动翻页动画效果的相关文章

【jQueryMobile】使用jQueryMobile实现滑动翻页的效果

滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前写的<[jQuery]论手机浏览器中拖拽动作的艰难性>(点击打开链接)中的观点一直,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢? 一.基本目标 在手机浏览器中的jQueryMobile框架页中现实滑动手势翻页的

翻页动画效果

1 typedef enum : NSUInteger { 2 Fade = 1, //淡入淡出 3 Push, //推挤 4 Reveal, //揭开 5 MoveIn, //覆盖 6 Cube, //立方体 7 SuckEffect, //吮吸 8 OglFlip, //翻转 9 RippleEffect, //波纹 10 PageCurl, //翻页 11 PageUnCurl, //反翻页 12 CameraIrisHollowOpen, //开镜头 13 CameraIrisHollo

桌面浏览器实现滑动翻页效果(Swiper)

还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chinaz.com/free/2013/0626/307273.shtml 我自己的感觉是:功能强大.示例丰富.文档详细. 官方网站:http://www.chinaz.com/free/2013/0626/307273.shtml GitHub地址:https://github.com/nolimits

微信里经常看到的滑动翻页效果,slide

上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大容器tranlateY(性能应该是最好的,但是如果增删一页的话对css影响很大,如果用sass或less除外) html: <!DOCTYPE html> <html> <head> <title></title> <meta name=&qu

FlipViewPager 对item实现左右对折滑动翻页效果《IT蓝豹》

FlipViewPager 对item实现左右对折滑动翻页效果 <FlipViewPager 对每一条item实现左右对折滑动翻页效果>,解决左右滑动和上下滑动的事件分发处理机制.内部实现如下:用ListView试下,对listview设置adapter,这个adapter继承BaseFlipAdapter<Friend>,然后对每一个item进行view处理,部分代码如下:class FriendsAdapter extends BaseFlipAdapter<Friend

jQuery支持mobile的全屏水平横向翻页效果

这是一款支持移动手机mobile设备的jQuery全屏水平横向翻页效果插件.该翻页插件可以使页面在水平方向上左右全屏翻动,它支持手机触摸屏,支持使用鼠标滚动页面. 整个页面过渡平滑,效果非常不错. 在线演示:http://www.htmleaf.com/Demo/201503141519.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201503141518.html

Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换)

Android中实现滑动翻页—使用ViewFlipper(dp和px之间进行转换) Android中dp和px之间进行转换 在xml布局文件中,我们既可以设置px,也可以设置dp(或者dip).一般情况下,我们都会选择使用dp,这样可以保证不同屏幕分辨率的机器上布局一致.但是在代码中,如何处理呢?很多控件的方法中都只提供了设置px的方法,例如setPadding,并没有提供设置dp的方法.这个时候,如果需要设置dp的话,就要将dp转换成px了. 以下是一个应用类,方便进行px和dp之间的转换.

Android--ViewPager多页面滑动切换以及动画效果

背景                                                                                           ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换.这个附加包是android-support-v4.jar. 根据屏幕的分辨率和图片的宽度计算动画移动的偏移量 代码                                                   

css3实现web app翻页过度效果

最近在开发web app页面,要实现滑动翻页,一开始实现的效果是无任何过渡效果的,可是这样子的话页面会闪跳一下,用户体验非常不好.于是我们主管叫我用jquery mobile,可是用了这个库之后,问题来了,跳转到的目标页面,无法加载目标页面引入的外部css文件,最后用css3完美地解决了这个问题: .pt-page-moveToLeft { -webkit-animation: moveToLeft .6s ease both; -moz-animation: moveToLeft .6s ea