【Win8】--动画&异步编程

一、动画（Animation）
1、StoryBoard基础
在MainPage.xaml页面：
（1）添加一个Button，然后设置使得Button在X轴上“自行展开--缩放”。
<1>设置Button：

<Button Content="Button" HorizontalAlignment="Left" Margin="123,42,0,0" VerticalAlignment="Top" Height="101" Width="296" Click="Button_Click_1" >
            <Button.RenderTransform>
                <ScaleTransform x:Name="st1"></ScaleTransform>
            </Button.RenderTransform>
</Button>

<2>添加资源：

  <Page.Resources>
        <Storyboard x:Name="sb1">           //Storyboard与其他资源控件特殊的是：x:Name，只有StoryBoard可以设置为x:Name，而其他的则设置为x:Key
            <DoubleAnimation Storyboard.TargetName="st1"
                             Storyboard.TargetProperty="ScaleX"
                             From="0" To="3"></DoubleAnimation>
        </Storyboard>
    </Page.Resources>

<3>在Click事件中添加： sb1.Begin();
ok，运行，点击Button时，会看到Button沿着 X轴从“0”到“3”自行展开缩放。
（2）在上述条件下，再进行设置使得Button同时在X轴上“自行展开--缩放”和在Y轴上“360度旋转”。
<1>在Button里再添加：

 <Button.Projection>
                <PlaneProjection x:Name="pp1" RotationY="30"></PlaneProjection>
 </Button.Projection>

<2>在资源中再添加：

 <Storyboard x:Name="sb2">
            <DoubleAnimation Storyboard.TargetName="pp1"
                             Storyboard.TargetProperty="RotationY"
                             From="0" To="360"></DoubleAnimation>
 </Storyboard>

<3>在Click事件中再添加： sb2.Begin();
ok，运行，点击Button时，会看到Button在X轴和Y轴上同时变化。（如果分开播放，则多一个Completed事件即可。）
（3）Storyboard的其他属性：
在资源中添加 Duration="00:00:05"，指的是在5秒中完成动画（指动画在From\To之间变化时的持续时长）；AutoReveverce="True"，自动反向运行；RepeatBehavior="Forever"，永远重复播放模式，（注意在不需要的时候尽快停止，否则可能会导致计算机无法进入省电模式），="5x"表示重复5次；
除了DoubleAnimation外，还有很多其他动画，均从TimeLine类继承，均有的属性AutoReverse、RepeatBehavior、Duration、BeginTime（延迟播放）和Completed事件（播放完成）等。
指定EasingFunction属性可以设定动画的欢动曲线，BounceEase什么的，详情去搜索 “Silverlight的Easing”
2、转换（Transition）
（1）在StackPanel中动态的添加本地时间
<1>在MainPage.xaml中设计：

<StackPanel Name="sp1" HorizontalAlignment="Left" Height="372" Margin="536,143,0,0" VerticalAlignment="Top" Width="360">
            <StackPanel.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition></EntranceThemeTransition>    //这里是重点，在添加的时候增加的效果，可以变换很多种的效果，自己试吧
                </TransitionCollection>
            </StackPanel.ChildrenTransitions>
        </StackPanel>
        <Button Content="添加" HorizontalAlignment="Left" Margin="1048,168,0,0" VerticalAlignment="Top" Height="82" Width="188" Click="Button_Click_2" />

<2>在Click事件中添加：

 Button btn = new Button();
 btn.Content = DateTime.Now;
 sp1.Children.Add(btn);

（2）改变StackPanel本身的变化效果：

  <Page.Transitions>
         <TransitionCollection>
             <EntranceThemeTransition></EntranceThemeTransition>
         </TransitionCollection>
  </Page.Transitions>

ok，运行下，添加本地时间的时候，可以观看它的效果，比原本直接添加的效果要好很多的。

二、异步编程

异步编程可以避免界面很卡的问题，但会导致编写“等待一个异步操作执行完成再执行一段代码”的程序。在方法中如果有一个地方用到了await，则方法需要标注为asyn。一般异步方法都是以Async结尾，一步方法都可以使用await编程（好像是同步的，其实不是），异步执行结束后才继续详细执行，返回值中有执行结果。
在win8系统里面很多API都封装成了异步的形式，就是说微软把可能浪费时间的全部都只提供一个异步，其实异步用着和同步感觉没什么太大的差别。win8的异步编程大量的使用了Lambda表达式（详细情况查询MSDN吧）。
需要调用异步，Windows运行时API的常见任务为：
@显示消息对话框（MessageDialog）
@使用文件系统（IO操作）
@向Internet发送数据和从Internet接受数据（HttpClient）
当然编程语言不通，支持异步的模式也不同：
JS的异步表示形式：承诺对象，then函数
C#的异步表示形式：将来对象，await运算符
Basic的异步表示形式：将来对象，Await运算符
C++的异步表示形式：task类，then方法
C#中的await：
用awit编译器把后面的代码自动创建一个委托然后把后面的代码放到Completed里面，然后好像是同步，并把返回的结果放到result执行后的结果里，这样写起来类似同步其实是异步调用

1、显示消息对话框（MessageDialog）

在前面的博客中已经写过了，请参考 http://www.cnblogs.com/kefira/archive/2013/03/07/windows8.html 中的12、消息框（MessageDialog）

2、使用文件系统（IO操作）
Package.Current.InstalledLocation来获得程序的安装文件夹，GetFolderAsync、GetFilesAsync遍历文件夹。
例子：读取Image文件夹下的所有图片到FlipView中。
（1）在MainPage.xaml中设置：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button x:Name="AddBtn" Content="添加" HorizontalAlignment="Left" Margin="93,78,0,0" VerticalAlignment="Top" Height="83" Width="230" Click="AddBtn_Click_1"   />
        <FlipView x:Name="fvImage" HorizontalAlignment="Left" Margin="438,138,0,0" VerticalAlignment="Top" Width="556" Height="483">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding}"></Image>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>

（2）后台代码实现：

StorageFolder的命名空间：using Windows.Storage; Package的命名空间：using Windows.ApplicationModel;

  StorageFolder installFolder = Package.Current.InstalledLocation; //获得程序的安装路径
             var imgFolder= await installFolder.GetFolderAsync("Images"); //别忘了加await
             var files = await imgFolder.GetFilesAsync();
             List<string> myList = new List<string>();
             foreach (var file in files)
             {
                string path="ms-appx:///Images/"+ file.Name;
                myList.Add(path);
             }
             fvImage.ItemsSource = myList;

运行结果（点击Button时将图片添加到FlipView中）如图：（附加一句：我超喜欢柯南的呢）

3、向Internet发送数据和从Internet接受数据（HttpClient）
例子：获取百度首页的源码
HttpClient 所属命名空间：using System.Net.Http; MessageDialog 所属命名空间：using Windows.UI.Popups;

 HttpClient httpClient = new HttpClient();
 var result = await httpClient.GetStringAsync("http://www.baidu.com/index.php?tn=85014098_adr&ch=33");
 new MessageDialog(result).ShowAsync();

运行结果就是在页面上显示出了百度首页的源码
分析：假如使用的是同步方法，UI会卡住一直等到网络请求完成之后才会释放掉UI的线程。

-- 后记：这节是win8中的动画和异步编程的简单学习（当然需要深入的学习），依旧来自于传智播客视频的学习，分享给同样爱好win8的朋友们！@_@

posted @ 2013-03-19 22:46 kefira 阅读(1365) 评论(0) 编辑收藏举报

刷新页面返回顶部

kefira

纵使微细如蝴蝶之鼓翼，也能造成千里外之飓风

【Win8】--动画&异步编程

公告