仿制Windows10的进度条,深入理解Windows

意气风发、其实有现有的

《深刻通晓Windows Phone 8.1 UI控件编制程序》本书基于最新的Windows Phone 8.1 Runtime SDK编写,全面深刻地演说了最酷的UI编制程序技术:达成复杂炫耀的动漫片、了解布局原理、列表虚构化原理、高质量列表达成、图表编程、控件原理等。

  本篇将记录一下怎么着在WPF中描绘和陈设动漫,那上头一贯都不是VS的硬气,不过它有意气风发套期图利器Blend;那方面亦非自个儿的优势,好在小编有天涯论坛,能记录一下学学的进程。在本记录中,为了越来越好的领悟水墨画与动漫,好些个的例证依旧在VS里面敲出来的。好了,不赘述了,现在初始。

前言

在这几天大器晚成篇“新年欢乐”的小说中,大家介绍了WinRT中的轻松动漫完成。其实在应用Windows/Windows Phone时,大家都会看出有个别动漫,最简便易行的诸如按下叁个button时,该button的场合变化正是卡通片的大器晚成种。再举个例子弹出式窗口或菜单,也是风流洒脱种动漫。WinRT中的动漫类别众多,可是分类有一点点儿让初大方胡里胡涂:主旨对接,核心卡通,视觉转变,剧情提要动漫。那么些大家就不说了,这里主要说说自定义动漫,也许说是剧情提要动漫(Storyboard Animation),因为这种动漫是大家要常用的。

而是在叁个非游戏类的App中增添动漫是有准则的:在UI状态之间开展快速通畅的联网,但不会使客商分心;超过顾客的预期,不过又不会让客户恶感。当然最大的前提是您的App的底工能比较完备。假若有七个App完成了同样的效应,叁个有动漫,三个从未有过,你会喜欢哪个吧?答案昭昭。而且在WinRT中,动漫完成比较简单,效果又很好,所以just do it!

今天大家按完毕格局介绍三类动漫:单一动漫,复合动漫,关键帧动漫。当中还分别介绍了用XAML/Code怎样完结动漫。

  先来看看Windows10进度条的三种情势:

 全书源代码无偿下载:

一、WPF绘画

珍藏页面中的动画 - 单一动漫

图片 1

在此个页中,点击多少个紫色的窖藏品种条(分类/博主/博文卡塔尔国,都会接触四个卡通:

1卡塔尔国体系条小编做360度的X轴旋转

2卡塔 尔(阿拉伯语:قطر‎对应的种类条下方的ListView做FadeIn/FadeOut的呈现/隐讳过渡

 图片 2

1.1宗旨图形

  在WPF中得以绘制矢量图,不会随窗口或图型的加大或降低出现锯齿或变形,除了那几个之外,XAML绘制出来的图有个好处正是平价修正,当图不切合必要的小运,平常改有个别质量就能够完毕了。上面先记下一下多少个主导的图样(他们都派生于Shape类卡塔 尔(阿拉伯语:قطر‎。

  • Line.aspx) 直线段
  • Rectangle.aspx) 矩形
  • Ellipse 椭圆
  • Polygon.aspx) 多边形
  • Polyline.aspx) 折线,不闭合
  • Path.aspx) 路径

用XAML定义动漫

先说360度旋转的做法。大家定义二个Template Control,然后在该Control的Style中定义动漫:

<Style TargetType="local:FavoriteGroupControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:FavoriteGroupControl">
                    <Grid x:Name="grid_Header" Height="60" Background="{ThemeResource CNBlogsThemeColor}">
                        <Grid.Projection>
                            <PlaneProjection/>
                        </Grid.Projection>
                        <Grid.Resources>
                            <Storyboard x:Name="sb_Roll">
                                <DoubleAnimation Storyboard.TargetName="grid_Header"                               Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)"
From="0" To="360" Duration="0:0:00.50"/>
                            </Storyboard>
                        </Grid.Resources>

……
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

自个儿去掉了不主要的风流罗曼蒂克对,只留下了要验证的风流倜傥对,完整代码请看Windows Phone project中的Theme/Generic.xaml。

率先要定义<Grid.Projection>属性,<PlaneProjection/>表示该Grid供给做X/Y/Z轴的转动,这些概念是必需的(纵然不定义的话前面会出错卡塔 尔(阿拉伯语:قطر‎。其次,要在<Grid.Resources>中定义Storyboard,它含有有叁个<DoubleAnimation>(在前边的动漫中会在一个Storyboard中含有多个DoubleAnimation卡塔尔国。

再看DoubleAnimation的细节:

1) Storyboard.TargetName指明我们要对名字称为gird_Header的控件下毒手

2卡塔尔国Storyboard.TargetPrpoerty指明了大家要嘲笑那几个控件的PlaneProjection.RotationX属性

3卡塔 尔(阿拉伯语:قطر‎From/To指明了要把该控件旋转七天即360度

4卡塔 尔(阿拉伯语:قطر‎Duraion指明在0.5秒内做到

好了,动漫定义好了,如何触发呢?在MainPage.xaml中,你能够找到以下代码段:

<local:FavoriteGroupControl x:Name="fgc_Category" Tapped="sp_category_Tapped" Margin="0,10"/>

那边定义了二个sp_category_Tapped事件,蔓引株求,大家在MainPage.xaml.cs中找到以下代码:

private void sp_category_Tapped(object sender, TappedRoutedEventArgs e)
{
            this.fg_Category.Tapped();
}

请在乎!叁个控件的松开动漫只应该在其里面触发,而不是由外界调节。所以,本次摸的瓜是个白痴:) 真正的触及动漫的Code应该在FavoriteGroupControl.cs中找:

protected override void OnTapped(TappedRoutedEventArgs e)
{
    Storyboard sb = this.GetTemplateChild("sb_Roll") as Storyboard;
    if (sb != null)
    {
        sb.Begin();
    }
}

它先遵照名称“sb_Roll”获得Storyboard的实例sb,然后调用其Begin()方法使其起始转动。在XAML中定义的Storyboard,都要透过事件管理代码调用Begin()来激活动漫。

此处有两点要验证:

1卡塔 尔(阿拉伯语:قطر‎为啥用动画?因为凡是在客商点击显示屏时,我们都应当授予视觉上的响应,免得心急的顾客狂点显示器产生手指受到损伤,作为程序猿的大家要有爱心

2卡塔 尔(英语:State of Qatar)为何用旋转动漫?因为作者兴奋,就让笔者恣意三回啊,不易于呀。当然也可用其他动漫,举个例子斜一下,也许陷下一点儿。

3卡塔 尔(英语:State of Qatar)为啥在控件内部调用Begin()?因为您给每户提供一个控件,按下后旋转是该控件的约定行为,不要再让动用该控件的人再去管如何动漫操作。当然,你也足以提供三个TemplateBinding属性来让使用该控件的人钦赐是不是须求动漫,然后在控件内部根据设置调用或不调用动漫。

 

 

1.2笔刷

  常用的笔刷Brush类型有:

· SolidColorBrush.aspx):使用纯 Color 绘制区域。 

· LinearGradientBrush:使用线性渐变绘制区域。 其中有个GradientStop.aspx)属性,径向渐变也会有能够查看msdn,小编感到上边说的依旧比较清楚的。

· RadialGradientBrush:使用径向渐变绘制区域。 

· ImageBrush:使用图像(由 ImageSource 对象表示卡塔尔绘制区域。

· DrawingBrush:使用 Drawing 绘制区域。 绘图大概带有向量和位图对象。

· VisualBrush:使用 Visual 对象绘制区域。 使用 VisualBrush 能够将内容从应用程序的一个部分复制到另二个区域,那在开创反射成效和放手局地显示器时会特别常有效。

接下去体会一下Shape类和Brush类的行使。

用Code定义动漫

该片段第二个卡通是显示或隐蔽ListView,本次大家用别的生机勃勃种办法完成的动漫,用Code实现,并非用XAML完成。看code:

class FavoriteGroup
    {
        bool ShowListView = true;
        ListView lvDetail;
        Storyboard sbShow, sbHide;

        public FavoriteGroup(ListView lv)
        {
            this.lvDetail = lv;
            CreateStoryboard();
            this.sbHide.Completed  = sbHide_Completed;
        }

        private void sbHide_Completed(object sender, object e)
        {
            this.lvDetail.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
        }

        public void Tapped()
        {
            this.ShowListView = !this.ShowListView;
            if (this.ShowListView)
            {
                this.lvDetail.Opacity = 0;
                this.lvDetail.Visibility = Windows.UI.Xaml.Visibility.Visible;
                this.sbShow.Begin();
            }
            else
            {
                this.sbHide.Begin();
            }
        }

        private void CreateStoryboard()
        {
            // show listview in 1 second
            DoubleAnimation daShow = new DoubleAnimation();
            daShow.From = 0;
            daShow.To = 1;
            daShow.Duration = new Windows.UI.Xaml.Duration(TimeSpan.FromSeconds(1));

            this.sbShow = new Storyboard();
            sbShow.Children.Add(daShow);
            Storyboard.SetTarget(daShow, this.lvDetail);
            Storyboard.SetTargetProperty(daShow, "Opacity");

            // hide listview in 1 second
            DoubleAnimation daHide = new DoubleAnimation();
            daHide.From = 1;
            daHide.To = 0;
            daHide.Duration = new Windows.UI.Xaml.Duration(TimeSpan.FromSeconds(1));

            this.sbHide = new Storyboard();
            sbHide.Children.Add(daHide);
            Storyboard.SetTarget(daHide, this.lvDetail);
            Storyboard.SetTargetProperty(daHide, "Opacity");
        }

    }

在构造函数中,调用了CreateStoryboard()方法,首先定义了四个Storyboard,在各个Storyboard中定义了三个DoubleAnimation,一个是用1秒时间把ListView的Opacity值从0变到1(展现卡塔 尔(阿拉伯语:قطر‎,另一个是用1秒时间把Opacity从1变到0(蒙蔽卡塔尔国。上边的写法等价于这几个XAML:

<Storyboard x:Name="sbShow">
    <DoubleAnimation Storyboard.TargetName="lvDetail"
                                  Storyboard.TargetProperty="Opacity"
                                  From="0" To="1" Duraion="0:0:1"/>
</Storyboard>
<Storyboard x:Name="sbHide">
    <DoubleAnimation Storyboard.TargetName="lvDetail"
                                  Storyboard.TargetProperty="Opacity"
                                  From="1" To="0" Duraion="0:0:1"/>
</Storyboard>

干什么在这间并不是XAML写法而用Code间接定义呢?是为了展现本事吧?你猜对啊!因为在MainPage.xaml中,有三个ListView,分别为lv_category, lv_author, lv_blog,若是要用XAML定义动漫,要对这一个八个ListView各写一回,重复了三回,只是ListView的名字分歧,太无耻啦!注意素质!于是搞了三个FavoriteGroup类(可能名字不太好,叫谋害金xx怎么着?卡塔尔国,里面用code包了风度翩翩晃,把ListView作为参数字传送入,就能够复用code啦。哎,纯属刁民小技,让各位看官见笑了。

  互连网有那多少个介绍仿制Windows10进度条的小说,也都贯彻了科学的机能。而自己再开一文的缘由是以为假设在这里根底上增加一些效果,比如圆点的多寡,圆点的深浅等等,效果兴许会更加好一些。接触过UWP的对象应该掌握,其框架中自带了进程条控件,以 ProgressRing 为例,通过Blend,我们得以获取到控件的XAML,以下是生龙活虎对截图:

试读章节会在天涯论坛持续立异:

1.3 直线段

  在平面上,两点鲜明一条直线段。同样在Line类中也兼具两点的属性(X1,Y1卡塔尔 ( X2,Y2卡塔 尔(英语:State of Qatar),同不日常间还个属性Stroke——笔触,它是Brush类型的。也等于能够用位置的笔刷赋值。由于其轻易性,在那不作过多的辨证,能够画出下边包车型客车直线段如图1:

图片 3

图1

上边是呼应的代码,在Blend敲的话,对应的属性值提醒会特别完整些,不过VS下看着比较明晰,各有优略了。

图片 4图片 5XAML

<Window x:Class="Chapter_10.LineTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LineTest" Height="300" Width="300">
    <Grid>
        <Line X1="10" Y1="20" X2="260" Y2="20" Stroke="Red" StrokeThickness="10"></Line>
        <Line X1="10" Y1="40" X2="260" Y2="40" Stroke="Orange" StrokeThickness="6"/>
        <Line X1="10" Y1="60" X2="260" Y2="60" Stroke="Green" StrokeThickness="3"/>
        <Line X1="10" Y1="80" X2="260" Y2="80" Stroke="Purple" StrokeThickness="2"/>
        <Line X1="10" Y1="100" X2="260" Y2="100" Stroke="Black" StrokeThickness="1"/>
        <Line X1="10" Y1="120" X2="260" Y2="120" StrokeDashArray="3" Stroke="Black" StrokeThickness="1"/>
        <Line X1="10" Y1="140" X2="260" Y2="140" StrokeDashArray="5" Stroke="Black" StrokeThickness="1"/>
        <Line X1="10" Y1="160" X2="260" Y2="160" Stroke="Black" StrokeEndLineCap="Flat" StrokeThickness="6"/>
        <Line X1="10" Y1="180" X2="260" Y2="180" Stroke="Black" StrokeEndLineCap="Triangle" StrokeThickness="8"/>
        <Line X1="10" Y1="200" X2="260" Y2="200" StrokeEndLineCap="Round" StrokeThickness="10">
            <Line.Stroke>
                <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
                    <GradientStop Color="Blue"/>
                    <GradientStop Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
    </Grid>
</Window>

Setting页面中About的卡通 - 复合动漫

图片 6

咱们再看看微微复杂些的卡通:在多个Storyboard中隐含多少个DoubleAnimatoin。

<Storyboard x:Name="sb_LogoMoveUp">
            <DoubleAnimation Duration="0:0:0.8"
                             From="200"
                             Storyboard.TargetName="image_Logo"
                             Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.GlobalOffsetY)"
                             To="0" />
            <DoubleAnimation Duration="0:0:0.8"
                             From="360"
                             Storyboard.TargetName="image_Logo"
                             Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationZ)"
                             To="0" />
            <DoubleAnimation Duration="0:0:0.8"
                             From="0"
                             Storyboard.TargetName="image_Logo"
                             Storyboard.TargetProperty="Opacity"
                             To="1" />
        </Storyboard>

在SettingsPage.xaml中,我们在sb_LogoMoveUp的Storyboard中定义了多个卡通:

1)把image_Logo上移200个像素

2)让image_Logo旋转360度

3)让image_Logo反射率从0形成1

以上八个卡通同期拓宽,都以在0.8秒内产生,于是我们看来了卓殊图片从下方“滚动”(不是滑动卡塔 尔(英语:State of Qatar)到上面,并渐渐清晰,整个进程十分温婉大方,究竟滚动摩擦比滑动摩擦小比很多(扯远了卡塔 尔(英语:State of Qatar),不拖拖拉拉,很有节操的。

要评释几点:

1卡塔尔用复合动漫,能够对八个控件的区别性质实行同一时候操作,以形成单一动漫不可能到位的复杂效果。比如大家是对image_图标的八个属性同期扩充操作。当然也足以分裂不时候,用BeginTime属性来安装一下初步时间就可以。

2卡塔尔国在那间怎么要用动漫?因为自身喜欢超过顾客的意料,给她们以动态视觉享受,实际不是干燥的瞅着多个图纸发呆。客户后生可畏欢腾,没准儿就给个美评了。

 图片 7

[WP8.1UI控件编制程序]Windows Phone XAML页面包车型大巴编写翻译

1.4矩形

  矩形最优良的性质是长和宽,除外还会有(Stroke卡塔尔笔触、填充(Fill卡塔 尔(英语:State of Qatar)属性等属性。上面看一下能画出的图形如图2已经代码:

图片 8

图2

代码如下:

图片 9图片 10XAML

<Window x:Class="Chapter_10.RectangleTest"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="RectangleTest" Height="390" Width="600">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="160"/>
            <RowDefinition Height="10"/>
            <RowDefinition Height="160"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="180"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="180"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="180"/>
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0" Grid.Row="0" Stroke="Black" Fill="LightBlue"/>
        <Rectangle Grid.Column="2" Grid.Row="0">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="#FFB6f8f1" Offset="0.1"/>
                    <GradientStop Color="#FF0083bd" Offset="0.239"/>
                    <GradientStop Color="#ddffee" Offset="0.661"/>
                    <GradientStop Color="#eeaacc" Offset="1"/>
                    <GradientStop Color="#FF3DA5CA" Offset="0.422"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Grid.Column="4" Grid.Row="0">
            <Rectangle.Fill>
                <RadialGradientBrush >
                    <GradientStop Color="AntiqueWhite" Offset="0"/>
                    <GradientStop Color="Brown" Offset="0.25"/>
                    <GradientStop Color="green" Offset="0.75"/>
                    <GradientStop Color="red" Offset="0.75"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Grid.Column="0" Grid.Row="2">
            <Rectangle.Fill>
                <ImageBrush ImageSource=".logo.png" Viewport="0,0,0.3,0.15" TileMode="Tile"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Grid.Column="2" Grid.Row="2">
            <Rectangle.Fill>
                <DrawingBrush Viewport="0,0,0.2,0.2" TileMode="Tile">
                    <DrawingBrush.Drawing>
                            <GeometryDrawing Brush="LightBlue">
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry RadiusX="10" RadiusY="10"/>
                                </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle Grid.Column="4" Grid.Row="2" StrokeThickness="10">
            <Rectangle.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="White" Offset="0.3"/>
                    <GradientStop Color="Blue" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Stroke>
        </Rectangle>        
    </Grid>
</Window>

  以上的的功效不做过多的验证,具体的能够参照msdn中矩形的的质量,链接已经交给。上面给出四个关于VisualBrush的例证来回味一下,是怎么回事。在VisualBrush类中,有个构造函数:public VisualBrush(Visual visual);其实正是组织一个和Visual成分同样的实例,其它FrameworkElement也是后续于Visual类,那么全数的控件都能够用VisualBrush来模拟了。上面看一个粗略的例子,其余的能够灵活理解。通过点击中间的开关,然侧边包车型客车按键的造型"放到"右侧,例子的效果与利益如图3:最上面包车型大巴是通过发光度来调整的。

图片 11

图3

下边给出首要代码:

图片 12图片 13XAML

<Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="160"/>
        </Grid.ColumnDefinitions>
        <StackPanel x:Name="stackPanelLeft" Background="White">
            <Button x:Name="realButton" Content="OK" Height="40"/>
        </StackPanel>
        <Button Content=">>>" Grid.Column="1" Margin="5,0" Click="CloneVisual"/>
        <StackPanel x:Name="stackPanelRight" Background="White" Grid.Column="2"/>
    </Grid>

图片 14图片 15cs

        //定义透明度
        double o = 1.0;
        private void CloneVisual(object sender, RoutedEventArgs e)
        {
            //定义VisualBrush笔刷
            VisualBrush vBrush = new VisualBrush(this.realButton);

            //定义一个矩形,并使其宽高和按钮的一样,让他的填充笔刷为VisualBrush,透明度慢慢的减弱
            Rectangle rect = new Rectangle();
            rect.Width = realButton.ActualWidth;
            rect.Height = realButton.ActualHeight;
            rect.Fill = vBrush;
            rect.Opacity = o;
            o -= 0.2;
            this.stackPanelRight.Children.Add(rect);
        }

  那样的话上提到的能够做反射,或然是倒影的功力是还是不是有些思路了,设置光滑度,然后旋转就足以了,至于火镜的实例用到了VisualBrush的ViewBox属性,详细的情况网络查询,假诺不常间作者会把那么些例子补出来。

Windows 8.1本子中的PostControl动漫 - 关键帧动画

世家能够查阅Windows 8.1 project的Theme/Generic.xaml看完整代码。

在这里个Control中,左边这些图,点击左侧箭头,将会向左滑动,成为侧面这个样子。

图片 16

本条滑动进度不是线性的,因而要用到关键帧,意思是说:在有个别时间点,做那事;到下四个时间点,再做那事。看上面包车型客车XAML代码:

<Storyboard x:Name="sb_Button_out">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="SecondViewTrans"
    Storyboard.TargetProperty="X" BeginTime="0:0:0">
    <SplineDoubleKeyFrame  KeyTime="00:00:00.00" Value="480"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.10" Value="460"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.20" Value="400"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.30" Value="300"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.40" Value="170"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.50" Value="0"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.54" Value="32"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.58" Value="60"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.62" Value="80"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.66" Value="92"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.70" Value="96"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.74" Value="92"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.78" Value="80"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.82" Value="60"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.86" Value="32"/>
    <SplineDoubleKeyFrame  KeyTime="00:00:00.90" Value="0"/>
</DoubleAnimationUsingKeyFrames>

</Storyboard>

里头的拾壹分<SplineDoubleKeyFram>就是关键帧的定义,在各类时间点,都定义了目的控件的X地方。能够看看第6个关键帧,X值已然是0了,为啥又从0变大了吧?那样就发生了触底反弹的功力,让对象控件弹回到最大96的职位,最终再回到0。

亟待小心的是,关键帧只好对某些控件的独一无二的壹特品质操作,无法同期操作多少个天性。而在上生龙活虎节的复合动漫中,是对有个别控件的四个属性同有的时候常候操作,可是不能够对有个别属性定义五回DoubleAnimation。那个要铭记。

  粗略生龙活虎看,只要稍作修正便能用到WPF中——大家大约能够什么都不做!

[WP8.1UI控件编制程序]Windows Phone自定义布局法则

1.5椭圆

  椭圆中比较宽泛的是长半轴a和短半轴b,假设a=b,那么就是叁个圆形。在WPF中用Width和Height表示a,b其余的用法和矩形意气风发致,上面给出一球形的例子如图4:

图片 17

图4

至于折线和多边形不做过多表明了,下边间接记录路线(Path卡塔尔。

小结

哦,办公室生龙活虎度自行关灯了,看样子该给国有省电了,拍屁股回家吧。不过大家要牢牢记住哟,动漫不可能乱用,无法让客商讨厌,无法人为影响系统顺畅度,不能够影响系统性格。

比方说在新浪UAP的WP版本中,我们在许多小地方使用了动画,举个例子热点页中下拉ListView时右上角的数字变化,博主页中下拉ListView时页面题指标调换,等等。那几个动漫片都以和当下的操作紧凑相关的,但它们又不会分明吸援顾客注意。

在“新禧欢跃”页中,是知法犯法要显得一下有些东西,所以做了不菲动漫片。其余,在“新春欢畅”页中,还用到了不应用Storyboard/DoubleAnimation/KeyFrame等才具,而是用纯code操作XAML成分的岗位来构建的动漫(游戏开辟的功底卡塔尔,大家后边再聊!

 

享用代码,退换世界!

Windows Phone Store App link:

http://www.windowsphone.com/zh-cn/store/app/博客园-uap/500f08f0-5be8-4723-aff9-a397beee52fc

Windows Store App link:

GitHub open source link:

MSDN Sample Code:

 

MS-UAP

2015/1/9

 

[WP8.1UI控件编制程序]Windows Phone了解和使用ItemTemplate、ContentTemplate和DataTemplate

 1.6路径

   路径在绘图中是归属相比较关键的三个类,他可以更换下面的多少个图形工具,何况还足以画出更头眼昏花的图像。路线不止有Stroke,StrokeThickness等品质,还也可能有个重大的属性——Data,其连串为Geometry(几何图形),大家就算通过那性格格来代表其余绘图类的。上边先看风流洒脱组图(图5卡塔尔国:

图片 18

 图5

   即使用我们地点的直线,矩形,椭圆,多边形类,能够画出上边的图。那么让大家用路线类来顶替前边的几个类吧。上边给出代码:

图片 19图片 20XAML

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Chapter_10.PathTest"
    x:Name="Window"
    Title="PathTest"
    Width="340" Height="350">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="160"/>
        <RowDefinition Height="160"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="160"/>
        <ColumnDefinition Width="160"/>
    </Grid.ColumnDefinitions>
    <Path Stroke="Blue" StrokeThickness="2" Grid.Row="0" Grid.Column="0">
        <Path.Data>
            <LineGeometry StartPoint="20,20" EndPoint="140,140"/>
        </Path.Data>
    </Path>

    <Path Stroke="Orange" Fill="Yellow" Grid.Column="1" Grid.Row="0">
        <Path.Data>
            <RectangleGeometry Rect="20,20,120,120" RadiusX="10" RadiusY="10"/>
        </Path.Data>
    </Path>

    <Path Stroke="Green" Fill="LawnGreen" Grid.Row="1" Grid.Column="0">
        <Path.Data>
            <EllipseGeometry Center="80,80" RadiusX="60" RadiusY="40"/>
        </Path.Data>
    </Path>

    <Path Stroke="Green" Fill="LawnGreen" Grid.Row="1" Grid.Column="1">
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="25,140" IsClosed="True">

                            <!--以上一条的终点为起点-->
                            <LineSegment Point="20,40"/>
                            <LineSegment Point="40,110"/>
                            <LineSegment Point="50,20"/>
                            <LineSegment Point="80,110"/>
                            <LineSegment Point="110,20"/>
                            <LineSegment Point="120,110"/>
                            <LineSegment Point="140,40"/>
                            <LineSegment Point="135,140"/>

                    </PathFigure>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid>
</Window>

先解释一下上边的代码,由于吉优metry为一个抽象类,有以下多少个子类:

  • LineGeometry:直线段几何图形
  • RectangleGeometry:矩形几何图形
  • EllipseGeometry:椭圆几何图形
  • PathGeometry:路线几何图形
  • StreamGeometry
  • CombinedGeometry
  • GeometryGroup

   上边包车型客车事例中驷马难追用到前多样档案的次序的几何图形类,从代码能够寓近来四个和它们对应的Shape类有类同,相像能够安装属性,来改动图形的形态。第多少个类,有一些非常小学一年级样,重假若经过八个LineSegment(线段卡塔 尔(阿拉伯语:قطر‎组成PathFigure(图,由于图是私下认可属性,能够简单帕特hFigure标签卡塔 尔(英语:State of Qatar),八个PathFigure组成Path吉优metry(几何图形卡塔尔。和大家平日接触的几何有一点点相同,几何是由图结合,图是由多少个段围成的,除此而外还会有五个要留意的是各样段都是上三个段的尖峰作为起源的。除了LineSegment,还应该有几个极其重要的线条ArcSegment,BezierSegment(三次贝塞尔曲线),QuadraticBezierSegment(三回贝塞尔曲线段卡塔尔等,若是想掌握越多线段,请点击这里。极度是贝塞尔曲线,与数学和图片联系特别连贯,在这里不作表明,有时机的话,写风度翩翩篇那地方的稿子。

  下边的这种三种标签式写法看起来相比清楚,可是贰个门路可能是会众多行,为了便于,由于路径的特殊性(源点->绘图->闭合图形卡塔尔国上面还会有生龙活虎种简单的写法,直接用壹本特性Data来代表路线。下边新看一下常用路线标志语法图6:

图片 21

图6

  上边例如说澳优(Ausnutria Hyproca卡塔 尔(阿拉伯语:قطر‎下(图7卡塔 尔(阿拉伯语:قطر‎:

图片 22

图7

  上航海用体育场地中,以0,0坐标伊始,有三段线段,终点坐标分别为(50,30卡塔 尔(阿拉伯语:قطر‎(60,40卡塔 尔(英语:State of Qatar)(70,80卡塔尔最终以一个Z命令闭合。借使要结成更复杂的门径,能够参谋下边包车型地铁表,当然要求一些几何幼功。 关于油画的类,一时就记录到这里吧!

二、增加效率

[WP8.1UI控件编程]Windows Phone动漫方案的挑精拣肥

 二、图形的法力与滤镜

   有玩过Ps的就清楚在其间有成都百货上千滤镜,使用起来方面,快速。相近在WPF中,除了提供矢量图外,也会有滤镜的效劳。对于UIElement类的成员有八个属性BitmapEffect和Effect,前面一个由于其是占领CPU来计量渲染图片的,后面一个是显卡在测算运算本领站主导,那样Effect就为cpu省下了财富,所以以往无尽情景都是用的Effect。由于美术职业方面可比差劲,在这里仅付给其用法,具体的依照msdn和须求来调动。

  先记下一下BitmapEffect,在msdn上边见到属性已经不适合时机了,可是4.0,4.5还在能够用,上边给出其派生类:

  • BevelBitmapEffect:斜角效果。
  • BitmapEffectGroup:相符作用。
  • BlurBitmapEffect:模糊效果。
  • DropShadowBitmapEffect:投影效果。
  • EmbossBitmapEffect:浮雕效果。
  • OuterGlowBitmapEffect: 外发光效果。

其用法比较简单,不过利用起来就要写美术职业底工了上面看七个事例。标签式写法如下:

<!--BlurBitmapEffect 浮雕效果-->
        <Image Source="美女.png" Grid.Column="0" Grid.Row="1"> 
            <Image.BitmapEffect>
                <BlurBitmapEffect Radius="10"/>
            </Image.BitmapEffect>
        </Image>
        <!--DropShadowBitmapEffect 投影效果-->
        <Button Width="100" Height="40" Content="哈哈" Grid.Column="0" Grid.Row="2"> 
            <Button.BitmapEffect>
                <DropShadowBitmapEffect Color="red" Direction="150" />
            </Button.BitmapEffect>
        </Button>

作用如图8:

图片 23

图8

 别的的用法都大致,能够试着去玩一下。下边记录一下Effect。相符Effect也是UIElement的个性,在那之中Effect类有七个性格:

  • BlurEffect 模糊效果
  • DropShadowEffect 投影效果
  • ShaderEffect 着色器效果(抽象类卡塔 尔(阿拉伯语:قطر‎

  看了今后,有哪些感想呢,怎么比BitmapEffect还少吗,可是有个抽象类,抽象类就是用来继续的,能够友善去写。想写多少种写多少种,关于前二种的功力使用方法和BitmapEffect的一样,首要说澳优下抽象类,网络有为数不菲写好的着色器的世袭类,能够供大家选用。作者在网络下载了三个WPFShaderEffectLibrary,在品种中先加多现存项,然后增加援用,之后大家就能够像模糊效果,投影效果等同的运用当中有重写的类了(本记录的演练代码笔者会在小说的终极提供下载卡塔 尔(英语:State of Qatar),有个地点要注意的是,使用的日子要下加命名空间xmlns:selid="clr-namespace:ShaderEffectLibrary;assembly=ShaderEffectLibrary"。

        <Image Source="美女.png" Margin="15" Grid.Column="2">
            <Image.Effect>
                <selid:ZoomBlurEffect Center="0.5,0.5" BlurAmount="0.2"/>
            </Image.Effect>
        </Image>
        <Image Source="美女.png" Margin="15" Grid.Column="1">
            <Image.Effect>
                <selid:LightStreakEffect Attenuation="10" BrightThreshold="1" Scale="2"/>
            </Image.Effect>
        </Image>

看一下意义如图9:

图片 24

 图9

  如何呢?激动了吧!O(∩_∩)O~。赶紧去下载源码,悄悄她长得怎么着。好了,关键是难忘使用的格式记住,其余的就要靠需要来利用滤镜了,好了,关于绘图的记录这几个就到此地吧!下边踏入图形的变形与动漫。

  即使要转移圆点的数额,圆点的尺寸只怕圆点的活动速度,我们该怎么贯彻吗?世襲章节一中的XAML,并依靠所需调节模板就显得太费力了,那会让大家的体制文件突显肥壮不堪,所以采取纯粹的C#代码来兑现它可能正如明智。但是在此之前的XAML亦不是不对,至少它交给了环形进度条的重大帧动漫的构成,这一个新闻对大家的话超级重要,免去了大家团结去剖判的步骤。

[WP8.1UI控件编制程序]塞马nticZoom控件完毕分组列表

三、图形的变形

  与其说是变形,不及说是变化,因为在WPF中的变形,不止包含拉长,挤扁、放大、收缩等,还包蕴尺寸、地方、坐标比例、旋转角度等的转移。调整变形的性质有八个:

  1. RenderTransform:展现变形,定义在UIElement类中。
  2. LayoutTransform:布局变形,定义在FrameworkElement类中。

  由于FrameworkElement类派生于UIelement类,而控件的基类Control类又派生于FrameworkElement类,所以说FrameworkElement类有八个属性。除此而外,还要理解地点的八个本性都以依从属性,他们的项目为Transform 抽象类,此抽象类派生的品种有下边多少个:

  • MatrixTransform:矩阵变形
  • RotateTransform:旋转变形
  • ScaleTransform:坐标变形
  • SkewTransform:拉伸变形
  • TranslateTransform:偏移变形
  • TransformGroup:变形组

上面来对待一下RenderTransform和LayoutTransform的分化。RenderTransform是不牵扯到布局的改观,只涉嫌到窗体的重绘。要是不知道的话,大家就从三个事例看一下。小编在三个Grid上边,把Grid分为两列,当中第一名列自适应中度,前边的一列为剩余的有的,然后在首先列中放一个TextBlock,分别用三种变形来落实。 代码已经交给,如下:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid x:Name="titleBar" Background="LightBlue" Grid.Column="0">
        <TextBlock Text="Hello Tranformer!" FontSize="24" HorizontalAlignment="Left" VerticalAlignment="Bottom">
            <!--<TextBlock.RenderTransform>
                <RotateTransform Angle="-90"/>
            </TextBlock.RenderTransform>-->
            <TextBlock.LayoutTransform>
                <RotateTransform Angle="-90"/>
            </TextBlock.LayoutTransform>         
        </TextBlock>
    </Grid>
</Grid>

大家看一下其效用如图10:

图片 25

图10

   布局变形,真的是会布局会生出变动。展现变形,只担当自身的形制,不管布局。所以假若是动漫片制作的话,如涉及到变形的话,应该利用RenderTransform。本记录珍视是动画,所以照旧看看突显变形在动漫里面是怎么表现的。

  现在我们的要紧办事便是让写死的关键帧能够由此性能灵活配置,所以我们恐怕供给先编码生机勃勃份进度条的基类( LoadingBase 卡塔尔国,以提取三种类型进程条的共性。基类中定义8个属性,分别是 IsRunning 、 DotCount 、 DotInterval 、 DotBorderBrush 、 DotBorderThickness 、 DotDiameter 、 DotSpeed 、 DotDelay提姆e ,它们的意义已然是自注释的,不必赘述。而在环形进程条中,还应该有其余八个性格: DotOffSet 和 NeedHidden ,分别代表圆点全部的职务偏移和在移动中是或不是须要隐蔽圆点。

[WP8.1UI控件编程]Windows Phone VirtualizingStackPanel、ItemsStackPanel和ItemsWrapGrid设想化排列布局控件

 四、动画

 

[WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内部存款和储蓄器优化

4.1 认知动漫

   见到动漫多个字,大家应当连忙想到了动漫片片,动漫片是三个或七个目的,在一定的小运段里,作出差异的成形。雷同在WPF的动漫片中,原理和卡通的相同,只不过大家后天成了动漫片的制小编,作为制小编,大家要思想有些对象做什么样动作,想好了后来,要思索什么对象在如哪天间开端组合....最后就产生了“动漫片”。简单的动漫,由一个要素就能够造成了,WPF中的轻巧的卡通片称为AnimationTimeline,复杂的卡通就须求多少个成分相互同盟完毕,就如黄金年代段舞剧,大家称为Storyborad。大家得以经过转到定义,开采她们都三回九转自提姆eline类。好玩的事再好,都少不了叁个载体,不是舞台,是岁月。那也让自个儿回想一句话,人生像一场戏,好坏全靠演技。所以说,好玩的事便是时刻的积存。还应该有叁个要重申的是,WPF规定,可以用来制作动画的习性必得是依据属性。好了,依旧各自看一下WPF中的传说呢!

三、关键帧动漫

 

4.2 轻便动漫

在介绍轻便动漫早先还要看一下AnimationTimeline的派生类:

  •           System.Windows.Media.Animation.BooleanAnimationBase
  •               System.Windows.Media.Animation.ByteAnimationBase
  •               System.Windows.Media.Animation.CharAnimationBase
  •               System.Windows.Media.Animation.ColorAnimationBase
  •               System.Windows.Media.Animation.DecimalAnimationBase
  •               System.Windows.Media.Animation.DoubleAnimationBase
  •               System.Windows.Media.Animation.Int16AnimationBase
  •               System.Windows.Media.Animation.Int32AnimationBase
  •               System.Windows.Media.Animation.Int64AnimationBase
  •               System.Windows.Media.Animation.MatrixAnimationBase
  •               System.Windows.Media.Animation.ObjectAnimationBase
  •               System.Windows.Media.Animation.Point3DAnimationBase
  •               System.Windows.Media.Animation.PointAnimationBase
  •               System.Windows.Media.Animation.QuaternionAnimationBase
  •               System.Windows.Media.Animation.RectAnimationBase
  •               System.Windows.Media.Animation.Rotation3DAnimationBase
  •               System.Windows.Media.Animation.SingleAnimationBase
  •               System.Windows.Media.Animation.SizeAnimationBase
  •               System.Windows.Media.Animation.StringAnimationBase
  •               System.Windows.Media.Animation.ThicknessAnimationBase
  •               System.Windows.Media.Animation.Vector3DAnimationBase
  •               System.Windows.Media.Animation.VectorAnimationBase

   由***Base看出都以基类,上面包车型大巴意气风发层才是现实的卡通片。为了保险和书中例子一样,大家就以DoubleAnimationBase为基类展开,别的的再逐级去探听和探求。一种正是点到点的的动漫DoubleAnimation,生龙活虎种是足以分为帧的动漫DoubleAnimationUsingKeyFrames,还会有风流倜傥种是比照路线来奉行的DoubleAnimationUsingPath的动漫。轻易动作由以下多少个部分构成:变化起源(From属性卡塔 尔(英语:State of Qatar),变化终点(To属性卡塔尔,变化幅度(By属性卡塔尔,变化时间(Duration属性卡塔 尔(阿拉伯语:قطر‎。借使钦赐的有极限那么幅度就被忽视了,若无源点,就以当下因素所在地方为起源。依然看个例子来的更易掌握。下面演示叁个按键若是被点击了,在0.3s里,按键朝着x,y轴上300个单位随意移动。上边给出代码

<Grid>
    <Button x:Name="btn" Content="Move!" HorizontalAlignment="Left" VerticalAlignment="top" Width="60" Height="60" Click="Button_Click">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt" X="0" Y="0"/>
            </Button.RenderTransform>
    </Button>
</Grid>

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //定义简单动画的实例
              DoubleAnimation daX = new DoubleAnimation();
            DoubleAnimation daY = new DoubleAnimation();

            //指定起点
             daX.From = 0D;
            daY.From = 0D;

            //指定终点
            Random r = new Random();
            daX.To = r.NextDouble() * 300;
            daY.To = r.NextDouble() * 300;

            //daX.By = 100D;
            //daY.By = 100D;
            //指定时长300ms
            Duration duration=new Duration(TimeSpan.FromMilliseconds(300));
            daY.Duration = duration;
            daX.Duration = duration;

            //将动画添加到偏移变形的实例上面 和Binding的格式有点像
            //this.textBox.SetBinding(TextBox.TextProperty,binding)

            //让按钮发生改变作为动画
            //btn.BeginAnimation(Button.WidthProperty, daX);
            //btn.BeginAnimation(Button.HeightProperty, daY);

            //让 位置发生改变作为动画
            this.tt.BeginAnimation(TranslateTransform.XProperty, daX);
            this.tt.BeginAnimation(TranslateTransform.YProperty, daY);
        }

   那一个进度还真有一些难发挥,提出下载源代码看功用了,上边注意一点正是发出动漫的是TranslateTransform,不是开关的尺寸,能够把按键的申明去掉查看效果。在上头代码中,就是大家拍好的片子,等到按键点击就是广播了。除了直线运动,还是能够安装高档的移动,源码上面也是有个例证(AdvancedAnimation.xaml文件卡塔尔,别的属性参照他事他说加以考察msdn。

  最终一步就是用C#代码完结重大帧动漫,不过得先有米才具做饭,故而须求先创设圆点:

目录如下:

4.3 关键帧动漫   

   先明白一下帧的定义,帧也就每回属性改换都会时有发生叁个新画面,新画面就是二个帧。帧的接连几日播发发生了动画片。DoubleAnimationUsingKeyFrames的实例中管见所及是包含多少个DoubleKeyFrame类的帧,具体的有下边八种:

  • LinearDoubleKeyFrame,线性帧,目的属性值的改换是直线型的,匀速的。
  • DiscreteDoubleKeyFrame,不接二连三变化的帧,指标属性值是跳跃的。
  • SplineDoubleKeyFrame, 样条函数变化帧,目标属性值的速率是一条贝赛尔曲线。
  • EasingDoubleKeyFrame,缓冲式帧,指标属性值以某种缓冲方式转变。

 LinearDoubleKeyFrame类的帧是时间点和值,DoubleAnimationUsingKeyFrames依赖于LinearDoubleKeyFrame的小时和值。上边看贰个让按键做“z”字型运动的合计:

  //定义两个DoubleAnimationUsingKeyFrames类型的实例,来控制呈现变形的横纵坐标
            DoubleAnimationUsingKeyFrames dakX = new DoubleAnimationUsingKeyFrames();
            DoubleAnimationUsingKeyFrames dakY = new DoubleAnimationUsingKeyFrames();

            //指定时长
            dakX.Duration = new Duration(TimeSpan.FromMilliseconds(900));
            dakY.Duration = new Duration(TimeSpan.FromMilliseconds(900));

            //纵坐标====================================================
            //动画分成三段,所以有三个线性关键帧
            LinearDoubleKeyFrame x_kf_1 = new LinearDoubleKeyFrame();
            LinearDoubleKeyFrame x_kf_2 = new LinearDoubleKeyFrame();
            LinearDoubleKeyFrame x_kf_3 = new LinearDoubleKeyFrame();

            //为三段关键帧赋值(时间和属性的值),并添加到动画中
            x_kf_1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
            x_kf_1.Value = 200;
            x_kf_2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600));
            x_kf_2.Value = 0;
            x_kf_3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(900));
            x_kf_3.Value = 200;

            dakX.KeyFrames.Add(x_kf_1);
            dakX.KeyFrames.Add(x_kf_2);
            dakX.KeyFrames.Add(x_kf_3);
            //纵坐标====================================================
            LinearDoubleKeyFrame y_kf_1 = new LinearDoubleKeyFrame();
            LinearDoubleKeyFrame y_kf_2 = new LinearDoubleKeyFrame();
            LinearDoubleKeyFrame y_kf_3 = new LinearDoubleKeyFrame();

            y_kf_1.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(300));
            y_kf_1.Value = 0;
            y_kf_2.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(600));
            y_kf_2.Value = 180;
            y_kf_3.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(900));
            y_kf_3.Value = 180;

            dakY.KeyFrames.Add(y_kf_1);
            dakY.KeyFrames.Add(y_kf_2);
            dakY.KeyFrames.Add(y_kf_3);

            //把动画寄托在呈现变形中
            this.tt.BeginAnimation(TranslateTransform.XProperty, dakX);
            this.tt.BeginAnimation(TranslateTransform.YProperty, dakY);

   上面代码中横纵坐标有一次变动(0,0卡塔 尔(阿拉伯语:قطر‎->(200,0)->(0,180)->(200,180).关于贝塞尔的例子(在源码中有个SplineDoubleKeyFrame.xaml卡塔尔能够参谋一下。

 1 protected Ellipse CreateEllipse(int index)
 2         {
 3             var ellipse = new Ellipse();
 4             ellipse.SetBinding(WidthProperty, new Binding("DotDiameter") {Source = this});
 5             ellipse.SetBinding(HeightProperty, new Binding("DotDiameter") {Source = this});
 6             ellipse.SetBinding(Shape.FillProperty, new Binding("Foreground") {Source = this});
 7             ellipse.SetBinding(Shape.StrokeThicknessProperty, new Binding("DotBorderThickness") {Source = this});
 8             ellipse.SetBinding(Shape.StrokeProperty, new Binding("DotBorderBrush") {Source = this});
 9             return ellipse;
10         }

《深切精通Windows Phone 8 .1 UI控件编制程序》目录

 4.4 路线动漫

   后边早就介绍了门路绘图时的精锐,那么大家能否让自个儿的动漫片根据大家制定的路径去表演吧,答案是能够的。那正是大家要记录的DoubleAnimationUsingPath类。注意它有多个本性很要紧,此中Duration是各种动漫必须有的,此外八个是Source属性和PathGeometry分别用来钦点向那几个样子移动和门路。下边给出一个开关沿着马路线移动的动漫片,构思如下:

    <Window.Resources>
        <PathGeometry x:Key="movingPath" Figures="M 40,110 A 50,50 0 1 1 100,60 A110,95 0 0 1 200,60 A 50,50 0 1 1 250 100 A 110,95 0 1 1 55,100 Z"/>
    </Window.Resources>
    <Grid x:Name="grid" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Path x:Name="movingPath" Data="M 40,110 A 50,50 0 1 1 100,60 A110,95 0 0 1 200,60 A 50,50 0 1 1 250 100 A 110,95 0 1 1 55,100 Z" Stroke="Red"
           StrokeThickness="2" Visibility="Visible"/>
        <Button x:Name="btn" Height="30" Width="80" Content="路径动画" Click="btn_Click" Margin="0,0,219,210">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt" X="0" Y="0"/>
            </Button.RenderTransform>
            <Button.Effect>
                <DropShadowEffect BlurRadius="45" Color="Red" />
            </Button.Effect>
        </Button>
    </Grid>

            PathGeometry pg =this.FindResource("movingPath") as PathGeometry;
            Duration duration = new Duration(TimeSpan.FromMilliseconds(600));

            DoubleAnimationUsingPath dakX = new DoubleAnimationUsingPath();
            dakX.PathGeometry = pg;
            dakX.Source = PathAnimationSource.X;
            dakX.Duration = duration;


            DoubleAnimationUsingPath dakY = new DoubleAnimationUsingPath();
            dakY.PathGeometry = pg;
            dakY.Source = PathAnimationSource.Y;
            dakY.Duration = duration;

            this.tt.BeginAnimation(TranslateTransform.XProperty, dakX);
            this.tt.BeginAnimation(TranslateTransform.YProperty, dakY);

上面包车型大巴代码不是拾贰分周全,仅作为认知路径动画的叁个门道。

  上边的方式在进程条基类中得以达成,仅仅是用相关的脾气初叶化了作者们的原材质:圆点。由于环形进程条在X、Y轴方向都有移动,所感到了有支持,我们得以思索在圆点外面再包风度翩翩层 Border 作为看不见的壳,大家将圆点与壳底部对齐,今后大器晚成旦让壳绕中心旋转就基本实现了对象,上边是环形进程条1个点到5个点带壳的暗示图:

第1章 深深剖判程序分界面

4.5 场景(Storyborad)

  关键帧动漫是串在同步的,让壹个总体的TimeLine分为两个帧,场景重申的是现身推行,把多少个卡通同有时候开展。

图片 26

图11

  下边看一个例子:布局图如上海教室(图11卡塔尔国,点击开关时,多个小球向指标前进,此中三个小球的XAML代码:

        <Border BorderBrush="Gray" BorderThickness="1" Grid.Row="1">
            <Ellipse x:Name="ballG" Height="80" Width="80" Fill="Green" HorizontalAlignment="Left">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="ttG"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>

相应的cs代码,注释已经交付:

            //定义动画要执行的时长
            Duration duation = new Duration(TimeSpan.FromMilliseconds(600));

            //定义一个简单的移动——匀速直线运动
            DoubleAnimation daRx = new DoubleAnimation();
            daRx.Duration = duation;
            daRx.To = 400;

            //定义一个关键帧的移动,目标属性值的速率是一条贝赛尔曲线函数
            DoubleAnimationUsingKeyFrames dakGx = new DoubleAnimationUsingKeyFrames();
            dakGx.Duration = duation;
            SplineDoubleKeyFrame kfG = new SplineDoubleKeyFrame(400, KeyTime.FromPercent(1));
            kfG.KeySpline = new KeySpline(1, 0, 0, 1);
            dakGx.KeyFrames.Add(kfG);

            //定义一个关键帧的移动,目标属性值的速率是一条贝赛尔曲线函数
            DoubleAnimationUsingKeyFrames dakBx = new DoubleAnimationUsingKeyFrames();
            dakBx.Duration = duation;
            SplineDoubleKeyFrame kfB = new SplineDoubleKeyFrame(400, KeyTime.FromPercent(1));
            kfB.KeySpline = new KeySpline(0, 1, 1, 0);
            dakBx.KeyFrames.Add(kfB);

            Storyboard storyboard = new Storyboard();

            //使指定的动画的UI载体
            Storyboard.SetTargetName(daRx, "ttR");
            Storyboard.SetTargetName(dakGx, "ttG");
            Storyboard.SetTargetName(dakBx, "ttB");

            //使动画与UI载体的属性相关联
            Storyboard.SetTargetProperty(daRx,new PropertyPath(TranslateTransform.XProperty));
            Storyboard.SetTargetProperty(dakGx, new PropertyPath(TranslateTransform.XProperty));
            Storyboard.SetTargetProperty(dakBx, new PropertyPath(TranslateTransform.XProperty));

            //指定场景的时间,并把各个对像的动画添加到场景里面
            storyboard.Duration = duation;
            storyboard.Children.Add(daRx);
            storyboard.Children.Add(dakGx);
            storyboard.Children.Add(dakBx);

            storyboard.Begin(this);

  通过本例子应该对现象有个影像,不过离运用应当还应该有后生可畏段的歧异,先就到这里呢!一时间好好的商讨一下!

图片 27

1.1 XAML的原理

五、总结

  本篇记录了有关WPF中的摄影类和与动漫片有关的多少个类,使笔者对其有了开班的认识,关于那上面的学识,还索要浓郁去领略。下边把源码附上:源码。接待调换!下生机勃勃篇,笔者将把本类别的源码和目录整理一下,顺便把E-BOOK大器晚成并上传。供大家仿照效法学习。

  想生龙活虎想,若无那层壳,我们又有哪些替代情势,那个方法是还是不是都以颇为便利的?大概未有这层壳,就必要去探究怎么转移圆点的 RenderTransformOrigin ,好让它们看起来都是环绕一个点旋转的,纵然改变了进程条全体的尺码。套壳的代码如下:

    1.1.1 XAML的概念

 1 private Border CreateBorder(int index)
 2         {
 3             var ellipse = CreateEllipse(index);
 4             ellipse.HorizontalAlignment = HorizontalAlignment.Center;
 5             ellipse.VerticalAlignment = VerticalAlignment.Bottom;
 6             var rt = new RotateTransform
 7             {
 8                 Angle = -DotInterval * index
 9             };
10             var myTransGroup = new TransformGroup();
11             myTransGroup.Children.Add(rt);
12             var border = new Border
13             {
14                 RenderTransformOrigin = new Point(0.5, 0.5),
15                 RenderTransform = myTransGroup,
16                 Child = ellipse,
17                 Visibility = NeedHidden ? Visibility.Collapsed : Visibility.Visible
18             };
19             border.SetBinding(WidthProperty, new Binding("Width") { Source = this });
20             border.SetBinding(HeightProperty, new Binding("Height") { Source = this });
21 
22             return border;
23         }

    1.1.2 XAML页面的编写翻译

  套壳代码除了套壳和有关的发轫化,最要紧的是19和20行的宽高绑定,那是让圆点旋转核心始终唯后生可畏的要紧。有了上述的考虑,大家算是可以起来for循环了:

    1.1.3 动态加载XAML

 1 //定义动画
 2 Storyboard = new Storyboard
 3 {
 4     RepeatBehavior = RepeatBehavior.Forever
 5 };
 6 
 7 for (var i = 0; i < DotCount; i  )
 8 {
 9     //在这里创建圆点  
10 }

1.2 XAML的树结构

  下边正是最中央的严重性帧动漫,通过在此以前用Blend提抽出来的XAML,大家得以看到它利用了 SplineDoubleKeyFrame ,那会涉嫌一遍贝塞尔曲线的调控点,思考到易用性,大家会用 LinearDoubleKeyFrame 和 EasingDoubleKeyFrame 取代。在XAML中大家最关心的要紧字应该是角度,在时间片的哪大器晚成部分,圆点应该在什么地方,而又在哪些时候,圆点应该会流失,大家假若随意截取八个点的关键帧就能够收获上述全部音讯:

    1.2.1 可视化树

图片 28

    1.2.2 VisualTreeHelper类

图片 29

    1.2.3 遍历可视化树

 

    1.2.4 可视化树应用示范:实现ListBox控件分页加载

  上边两张分别是圆点1和2反射率和岗位的关键帧截图,通过多少个点大家完全可以揣度全体一点点。出于个人爱好,作者将折射率替换到了 Visibility 的切换,所以还有大概会引进 DiscreteObjectKeyFrame 。篇幅原因,大家一贯总计深入分析结果:

1.3 路由事件

  • 风流倜傥早先全部一点都以体现的,可是地方分裂,从点1的-110度开端,角度每种减6;
  • 点1最初活动后,0.167秒(1/6秒卡塔尔后点2伊始运动,所以各点动漫延迟时间为1/6秒(这里不太能鲜明是不是和圆点数量有关卡塔 尔(阿拉伯语:قطر‎;
  • 以点1为例,旋转角度随即间变化图如下:

    1.3.1 Windows Phone事件

图片 30图片 31图片 32图片 33图片 34图片 35图片 36

    1.3.2 路由事件的定义

  从上面7张图中得以看来,在叁次巡回中式茶食1是如此活动的:减速、匀速、加快、减速、匀速、加快,而且与之相应的角度地点也提交了,最终水到渠成,环形进程条就完了了。

    1.3.4 路由事件规律

 

    1.3.5 路由事件的机能和演示

四、截图

1.4框架和页面

  通过安装不一样的质量,能够实现差异的功能:

    1.4.1 框架页面结构

  图片 37

    1.4.2 页面导航

 

    1.4.3 框架的施用示范:自定义弹出窗口

五、源码

1.5 UI线程

  本文所研讨的进度条源码已经在github开源:

第2章 体制和模板

2.1 样式

    2.1.1 创制样式

    2.1.2 样式世襲

    2.1.3 以编制程序方式设置样式

    2.1.4 样式文件

    2.1.5 系统大旨

    2.1.6 宗旨能源

    2.1.7 自定义主旨

2.2 模板

    2.2.1 控件模板(ControlTemplate)         

    2.2.2 ContentControl和ContentPresenter

    2.2.3 视觉状态处理(VisualStatesManager)

    2.2.4 数据模板(DataTemplate)

    2.2.5 ItemTemplate、ContentTemplate和DataTemplate

    2.2.6 数据模板的利用

    2.2.7 读取和转变数据模板

第3章 布局原理

3.1 布局原理

    3.1.1 布局的意思

    3.1.2 系统的布局面板

    3.1.3 布局种类

    3.1.4 布局系列的基本点措施和属性

    3.1.5 度量和排列的进度

    3.1.6 多分辨率的适配布局

3.2 自定义布局法则

    3.2.1 创设布局类

    3.2.2 达成衡量进度

    3.2.3 完成排列进度

    3.2.4 应用布局准则

第4章 图片绘图

4.1 图形原理

    4.1.1 图形中常用的布局

    4.1.2 画图相关的类

    4.1.3 基本功的图纸形状

4.2 Path图形 

    4.2.1 二种Path图形的成立方法

    4.2.2 使用轻便的几何图形来创立Path     

    4.2.3 使用PathGeometry来创建Path        

    4.2.4 使用路线标志语法创制Path     

    4.2.5 使用Path达成自定义图形

    4.2.6 利用Expression Blend工具创设Path图形        

4.3 画刷

    4.3.1 SolidColorBrush画刷    

    4.3.2 LinearGradientBrush画刷    

    4.3.3 ImageBrush画刷  

4.4 图形裁剪

    4.4.1 使用几何图形实行剪裁      

    4.4.2 对布局区域进行剪裁 

第5章 图形编制程序

5.1动态变化折线图和区域图

    5.1.1折线图和区域图原理

    5.1.2 生成图形逻辑封装

5.2 实现饼图控件

    5.2.1 自定义饼图片形形状

    5.2.2 封装饼图控件

5.3 线性报表

    5.3.1 达成图形表格和坐标轴

    5.3.2 定义线性数据图形类

    5.3.3 达成图例

    5.3.4 达成线性报表

5.4 QuickCharts图表控件库深入深入分析

    5.4.1 QuickCharts项目结构深入分析

    5.4.2 饼图图表PieChart的完成逻辑

    5.4.3 三番五回图形图表SerialChart的得以完结逻辑

第6章 更动特效和三Witt效

6.1 转变特效

    6.1.1 调换的规律二维转变矩阵

    6.1.2 平移转换TranslateTransform

    6.1.3 旋转换换RotateTransform

    6.1.4 缩放调换ScaleTransform

    6.1.5 扭曲转变SkewTransform

    6.1.6 组合转变TransformGroup

    6.1.7 矩阵调换MatrixTransform 

6.2 三Witt效

    6.2.1 三个维度坐标连串

    6.2.2 三个维度旋转

    6.2.3 三个维度平移

    6.2.4 用矩阵达成三维特效

第7章 动漫编制程序幼功

7.1 动漫原理

    7.1.1 精通动漫

    7.1.2 动漫的靶子属性

    7.1.3 动漫的门类

7.2 线性插值动画

    7.2.1 动漫的为主语法

    7.2.2 线性动漫的主导语法

    7.2.3 DoubleAnimation落成转移动漫

    7.2.4 ColorAnimation达成颜色渐变动画

    7.2.5 PointAnimation达成Path图形动漫

7.3 关键帧动漫

    7.3.1 关键帧动画概述

    7.3.2 线性关键帧

    7.3.3 样条关键帧

    7.3.4 离散关键帧

7.4 缓动函数动漫

    7.4.1 缓动函数动漫概述

    7 .4.2 BackEase动画

    7.4.3 BounceEase动画

    7.4.4 CircleEase动画

    7.4.5 CubicEase动画

    7.4.6 ElasticEase动画

    7.4.7 ExponentialEase动画

    7.4.8 PowerEase/QuadraticEase/QuarticEase/QuinticEase动画

    7.4.9 SineEase动画

7.5 基于帧动漫

    7.5.1 基于帧动漫的原理

    7.5.2 基于帧动漫的运用处景

    7.5.3 基于帧动漫的贯彻

第8章 动漫片进级演练

8.1 动漫方案的选料

    8.1.1 帧速率

    8.1.2 UI线程和构图线程

    8.1.3 选用最优的动漫片方案

8.2 列表动画

    8.2.1 达成的笔触

    8.2.2 使用附加属性决定动漫对象

    8.2.3 列表切换缓动动漫达成

    8.2.4 退出页面包车型地铁三个维度动漫达成

    8.2.5 列表动漫的亲自去做

8.3 模拟实现Wechat的彩蛋动漫

    8.3.1 达成的思绪

    8.3.2 星星创制工厂

    8.3.3 完毕单个星星的卡通片轨迹

    8.3.4 封装批量星星飘落的逻辑

    8.3.5 星星飘落动漫演示

8.4 决不关痛痒游戏动漫

    8.4.1 达成的思路

    8.4.2 伊始页面包车型地铁布局

    8.4.3 人物走路动漫

    8.4.4 决无动于衷开枪动漫

第9章 深入剖判控件编制程序

9.1 系统控件原理深入分析

    9.1.1 系统控件分类

    9.1.2 系统控件的暗许样式

    9.1.3 深度改动系统控件

9.2 UserControl自定义控件——水印输入框控件

    9.2.1 UserControl自定义控件的法规

    9.2.2 创设水印输入框控件

    9.2.3 加多水印输入框控件属性和事件的拍卖

    9.2.4 使用水印输入框控件

9.3 从控件基类派生实现自定义控件——全屏进程条控件

    9.3.1 创设控件样式

    9.3.2 加载样式

    9.3.3 全屏进程条的开垦和倒闭

    9.3.4 管理物理重回事件

    9.3.5 全屏进程条控件的运用

第10章 Expression Blend工具的接纳

10.1 Expression Blend概述

    10.1.1 视图

    10.1.2 工作区

10.2 首要的面板

    10.2.1美工板

    10.2.2 资金财产面板

    10.2.3 工具面板

    10.2.4 指标和岁月线面板

    10.2.5 属性面板

10.3 Expression Blend for Windows Phone的特点效益

    10.3.1 选拔设备的法力

    10.3.2 预览 Windows Phone 样式

    10.3.3 定义应用程序菜单栏

10.4 Expression Blend绘图

    10.4.1 绘图根基

    10.4.2 使用“笔”绘制路线

    10.4.3 合併路线

    10.4.4 实例练习——绘制叁个神采图片

10.5 Expression Blend制作动漫

    10.5.1 剧情提要

    10.5.2 时间线

    10.5.3 Expression Blend的关键帧

    10.5.4 实例演习——制作小球掉落反弹动漫

第11章 列表编制程序

11.1 列表控件的行使

    11.1.1 ItemsControl完成最精练的列表

    11.1.2 ListBox达成下拉点击刷新列表         

    11.1.3 ListView完成下拉机动刷新列表

    11.1.4 GridView达成网格列表

    11.1.5 SemanticZoom达成分组列表

11.2 虚构化技艺

    11.2.1 列表的设想化

    11.2.2 VirtualizingStackPanel、ItemsStackPanel和ItemsWrapGrid虚构化排列布局控件

    11.2.3 完毕横向虚构化布局

    11.2.4 大数据量网络图片列表的异步加载和内存优化

第12章 Toolkit控件库的手艺原理剖析

12.1 Toolkit控件库项目简要介绍

12.2 CustomMessageBox控件原精通析

    12.2.1 CustomMessageBox的调用逻辑

    12.2.2 CustomMessageBox的体裁和弱引用的选用

12.3 PhoneTextBox控件原理深入分析         

    12.3.1 PhoneTextBox的调用逻辑

    12.3.2 PhoneTextBox的包装逻辑

12.4 ToggleSwitch控件原驾驭析

    12.4.1 ToggleSwitch的调用逻辑

    12.4.2 ToggleSwitch和ToggleSwitchButton的样式

    12.4.3 ToggleSwitch对拖拽手势的论断

12.5 ListPicker控件原理深入分析

    12.5.1 ListPicker的调用逻辑

    12.5.2 ListPicker控件首要逻辑的深入分析

12.6 WrapPanel控件原理剖判

    12.6.1 WrapPanel控件的调用逻辑

    12.6.2 WrapPanel布局控件的度量排列逻辑

 

京东购得地点:

图片 38

本文由星彩网app下载发布于计算机编程,转载请注明出处:仿制Windows10的进度条,深入理解Windows

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。