克隆Windows十的进程条,App的心动杀手锏

1、其实有现成的

《长远了解Windows Phone 8.1 UI控件编制程序》本书基于最新的Windows Phone 8.一Runtime
SDK编写,周详深刻地演说了最酷的UI编制程序技术:完结复杂炫酷的卡通、精通布局原理、列表虚拟化原理、高品质列表实现、图表编制程序、控件原理等。

  本篇将记录一下什么样在WPF中描绘和安顿性动画,那地点一向都不是VS的坚强,但是它有一套利器Blend;那方面也不是自笔者的优势,辛亏我有天涯论坛,能记录一下读书的进度。在本记录中,为了越来越好的知道绘画与动画,多数的例子依然在VS里面敲出来的。好了,不赘述了,未来始发。

前言

在后面1篇“新岁快乐”的随笔中,我们介绍了Win帕杰罗T中的容易动画完毕。其实在运用Windows/Windows
Phone时,我们都会看出部分卡通,最简便的比如按下一个button时,该button的景色变化正是动画的1种。再比如说弹出式窗口或菜单,也是一种动画。Win途胜T中的动画种类众多,可是分类有点儿让初学者摸不着头脑:核心对接,主旨卡通,视觉转换,情节提要动画。那些大家就不说了,那里最主要说说自定义动画,大概说是剧情提要动画(Storyboard
Animation),因为那种动画是大家要常用的。

不过在一个非游戏类的App中添加动画是有标准化的:在UI状态之间展开火速流畅的连接,但不会使用户分心;超出用户的料想,可是又不会让用户厌烦。当然最大的前提是你的App的基本功用相比完善。借使有多个App达成了一样的职能,2个有动画,二个尚无,你会欣赏哪个吧?答案昭昭。况且在WinEvoqueT中,动画完结比较不难,效果又很好,所以just
do it!

明日我们按达成方式介绍3类动画:单一动画,复合动画,关键帧动画。个中还各自介绍了用XAML/Code怎样完成动画。

  先来探望Windows十进程条的二种格局:

 全书源代码免费下载:

一、WPF绘画

储藏页面中的动画 – 单一动画

美高梅开户网址 1

在那些页中,点击多个深灰蓝的储藏连串条(分类/博主/博文),都会触发三个卡通:

1)连串条自作者做360度的X轴旋转

贰)对应的花色条下方的ListView做FadeIn/FadeOut的体现/隐藏过渡

 美高梅开户网址 2

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>

作者去掉了不重大的1对,只留下了要验证的壹些,完整代码请看Windows Phone
project中的Theme/Generic.xaml。

首先要定义<Grid.Projection>属性,<PlaneProjection/>表示该Grid须要做X/Y/Z轴的团团转,这几个定义是必须的(要是不定义的话后边会出错)。其次,要在<Grid.Resources>中定义Storyboard,它包涵有3个<DoubleAnimation>(在前边的动画中会在1个Storyboard中含有八个DoubleAnimation)。

再看DoubleAnimation的细节:

壹) Storyboard.TargetName指明大家要对名字叫做gird_Header的控件下毒手

二)Storyboard.TargetPrpoerty指明了作者们要奚弄那八个控件的PlaneProjection.RotationX属性

三)From/To指明了要把该控件旋转七日即360度

4)Duraion指明在0.伍秒内成功

好了,动画定义好了,如何触发呢?在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_克隆Windows十的进程条,App的心动杀手锏。Roll”) as Storyboard;
    if (sb != null)
    {
        sb.Begin();
    }
}

它先依据名称“sb_Roll”获得Storyboard的实例sb,然后调用其Begin()方法使其初叶旋转。在XAML中定义的Storyboard,都要经过事件处理代码调用Begin()来激活动画。

此间有两点要注解:

壹)为何用动画?因为凡是在用户点击显示屏时,大家都应有予以视觉上的响应,免得心急的用户狂点显示屏造成手指受伤,作为程序员的大家要有爱心

二)为啥用旋转动画?因为笔者爱不释手,就让小编任性1次啊,不简单呀。当然也可用其余动画,比如斜一下,或然陷下一点儿。

三)为何在控件内部调用Begin()?因为你给人家提供1个控件,按下后旋转是该控件的约定行为,不要再让使用该控件的人再去管怎么样动画操作。当然,你也足以提供四个TemplateBinding属性来让使用该控件的人钦点是或不是须求动画,然后在控件内部依据设置调用或不调用动画。

 

 

1.2笔刷

  常用的笔刷Brush类型有:

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

· LinearGradientBrush:使用线性渐变绘制区域。 在那之中有个GradientStop.aspx)属性,径向渐变也有能够查看msdn,作者以为下边说的依旧相比清楚的。

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

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

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

· VisualBrush:使用 Visual 对象绘制区域。 使用 VisualBrush 能够将内容从应用程序的2个片段复制到另叁个区域,那在开立反射效率和放大局地显示屏时会非凡管用。

接下去感受一下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变到一(显示),另三个是用一秒时间把Opacity从壹变到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啦。哎,纯属刁民小技,让各位看官见笑了。

  网上有比比皆是介绍仿制Windows十进程条的篇章,也都完结了不错的效用。而作者再开一文的缘故是认为即便在那基础上添加1些职能,比如圆点的数额,圆点的高低等等,效果说不定会更加好有的。接触过UWP的对象应该清楚,其框架中自带了进程条控件,以 ProgressRing 为例,通过Blend,我们得以拿走到控件的XAML,以下是1些截图:

试读章节会在新浪持续创新:

1.3 直线段

  在平面上,两点鲜明一条直线段。同样在Line类中也拥有两点的习性(X1,Y一) (
X2,Y2),同时还个属性Stroke——笔触,它是Brush类型的。也即是能够用地点的笔刷赋值。由于其简单性,在此不作过多的辨证,可以画出上面包车型大巴直线段如图壹:

美高梅开户网址 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变成一

上述四个卡通同时实行,都以在0.8秒内形成,于是我们来看了老大图片从人间“滚动”(不是滑动)到上边,并日趋明晰,整个经过极度优雅大方,毕竟滚动摩擦比滑动摩擦小很多(扯远了),不当机不断,很有节操的。

要申明几点:

一)用复合动画,能够对叁个控件的例外性质实行同时操作,以形成单一动画不能完毕的纷纷效果。比如我们是对image_Logo的四个脾气同时展开操作。当然也可以差别时,用BeginTime属性来设置一下起步时间即可。

二)在那里为啥要用动画?因为本身喜欢超出用户的预想,给她们以动态视觉享受,而不是乏味的望着3个图纸发呆。用户一手舞足蹈,没准儿就给个好评了。

 美高梅开户网址 7

[WP8.一UI控件编制程序]Windows Phone
XAML页面的编写翻译

1.4矩形

  矩形最突出的习性是长和宽,除外还有(Stroke)笔触、填充(Fill)属性等本性。上边看一下能画出的图样如图二已经代码:

美高梅开户网址 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来模拟了。上面看多个粗略的例证,其余的能够灵活精通。通过点击中间的按钮,然左侧的按钮的样子”放到”左侧,例子的职能如图三:最上面包车型地铁是经过发光度来支配的。

美高梅开户网址 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 八.壹 project的Theme/Generic.xaml看完整代码。

在那么些Control中,左边那多少个图,点击右边箭头,将会向左滑动,成为右侧那一个样子。

美高梅开户网址 16

其一滑动进程不是线性的,因而要用到关键帧,意思是说:在有些时间点,做那件事;到下2个时间点,再做那件事。看下边包车型客车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地点。能够见见第5个关键帧,X值已经是0了,为何又从0变大了吗?那样就时有产生了触底反弹的意义,让对象控件弹回到最大九六的岗位,最后再回到0。

须要注意的是,关键帧只能对有些控件的绝无仅有的2特天性操作,不能够同时操作5个性子。而在上一节的复合动画中,是对有个别控件的多个属性同时操作,但是不可能对有些属性定义四回DoubleAnimation。这些要切记。

  粗略1看,只要稍作修改便能用到WPF中——大家差不离能够怎么都不做!

[WP八.一UI控件编制程序]Windows
Phone自定义布局规则

1.5椭圆

  椭圆中相比宽泛的是长半轴a和短半轴b,假若a=b,那么正是3个圆形。在WPF中用Width和Height表示a,b别的的用法和矩形1致,上边给出二个球形的例证如图四:

美高梅开户网址 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

 

[WP捌.一UI控件编程]Windows
Phone明白和应用ItemTemplate、ContentTemplate和DataTemplate

 1.6路径

   路径在绘图中是属于比较重大的2个类,他得以替换下边的多少个图形工具,而且还是能画出更扑朔迷离的图像。路径不仅有Stroke,StrokeThickness等质量,还有个关键的习性——Data,其项目为Geometry(几何图形),我们即使经过这些脾气来代表其余绘图类的。上边先看一组图(图五):

美高梅开户网址 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(线段)组成帕特hFigure(图,由于图是默许属性,可以简不难单PathFigure标签),多少个PathFigure组成PathGeometry(几何图形)。和大家一直触及的几何有点相像,几何是由图结合,图是由多少个段围成的,除了这一个之外还有二个要小心的是各种段都以上1个段的终极作为源点的。除了LineSegment,还有多少个相比较关键的线条ArcSegment,BezierSegment(三次贝塞尔曲线),QuadraticBezierSegment(二次贝塞尔曲线段)等,要是想打听更加多线段,请点击这里。尤其是贝塞尔曲线,与数学和图片联系卓殊严密,在此不作表达,有机遇的话,写一篇那上头的稿子。

  上面的那种种种标签式写法看起来比较清楚,不过一个门路或许是会众多行,为了方便,由于路线的特殊性(源点->绘图->闭合图形)下边还有一种简易的写法,直接用1性格质Data来表示路径。下边新看一下常用路径标记语法图陆:

美高梅开户网址 21

图6

  上边举个例子说美素佳儿(Friso)下(图7):

美高梅开户网址 22

图7

  上海教室中,以0,0坐标初叶,有三段线段,终点坐标分别为(50,30)(60,40)(70,80)最终以一个Z命令闭合。若是要结成更扑朔迷离的门径,能够参考上面的表,当然必要壹些几何基础。 关于绘画的类,权且就记录到那里呢!

二、添加功效

[WP八.一UI控件编程]Windows
Phone动画方案的取舍

 2、图形的功效与滤镜

   有玩过Ps的就掌握在中间有为数不少滤镜,使用起来方面,火速。同样在WPF中,除了提供矢量图外,也有滤镜的机能。对于UIElement类的积极分子有五个属性BitmapEffect和Effect,前者由于其是挤占CPU来总结渲染图片的,后者是显卡在盘算运算能力站主导,那样Effect就为cpu省下了能源,所今后后无数状态都以用的Effect。由于美术工作方面相比较差劲,在此仅付给其用法,具体的基于msdn和需要来调整。

  先记下一下BitmapEffect,在msdn上面看到属性已经不合时宜了,不过四.0,四.伍还在能够用,上面给出其派生类:

  • 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>

效益如图捌:

美高梅开户网址 23

图8

 别的的用法都大约,能够试着去玩一下。下边记录一下Effect。同样Effect也是UIElement的属性,当中Effect类有多少个性子:

  • BlurEffect 模糊效果
  • DropShadowEffect 投影效果
  • ShaderEffect 着色器效果(抽象类)

  看精通后,有何样感想呢,怎么比BitmapEffect还少吗,不过有个抽象类,抽象类正是用来继续的,能够友善去写。想写多少种写多少种,关于前三种的作用使用方法和BitmapEffect的同等,首要说Bellamy(Bellamy)下抽象类,网上有不计其数写好的着色器的继承类,能够供大家采纳。笔者在网上下载了二个WPFShaderEffectLibrary,在品种中先添加现有项,然后添加引用,之后大家就足以像模糊效果,投影效果同样的施用个中有重写的类了(本记录的演练代码笔者会在篇章的最后提供下载),有个地点要注意的是,使用的年月要下加命名空间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>

看一下作用如图玖:

美高梅开户网址 24

 图9

  怎样啊?激动了啊!O(∩_∩)O~。赶紧去下载源码,悄悄她长得如何。好了,关键是一遍四处思念使用的格式记住,别的的即将靠必要来行使滤镜了,好了,关于绘图的笔录那么些就到此处呢!上边进入图形的变形与动画片。

  倘使要改成圆点的数额,圆点的尺寸依旧圆点的位移速度,我们该怎么落到实处呢?继承章节一中的XAML,并依照所需调整模板就体现太难为了,那会让我们的体裁文件彰显臃肿不堪,所以选拔纯粹的C#代码来贯彻它大概正如明智。然则在此以前的XAML也不是漏洞百出,至少它交给了环形进程条的第2帧动画的构成,那些新闻对大家的话很紧要,免去了我们团结去分析的手续。

[WP八.一UI控件编程]SemanticZoom控件达成分组列表

叁、图形的变形

  与其说是变形,比不上说是变化,因为在WPF中的变形,不仅包罗增加,挤扁、放大、收缩等,还包蕴尺寸、地点、坐标比例、旋转角度等的转变。控制变形的性质有八个:

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

  由于FrameworkElement类派生于UIelement类,而控件的基类Control类又派生于FrameworkElement类,所以说FrameworkElement类有二日本性。除此而外,还要领悟地方的五个属性都以借助属性,他们的门类为Transform 抽象类,此抽象类派生的项目有下边多少个:

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

上边来对待一下RenderTransform和LayoutTransform的分裂。RenderTransform是不牵扯到布局的更动,只涉嫌到窗体的重绘。假若不清楚的话,我们就从一个例子看一下。小编在二个Grid下边,把Grid分为两列,在那之中第3列为自适应中度,后边的壹列为剩余的一些,然后在率先列中放五个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>

咱们看一下其效劳如图十:

美高梅开户网址 25

图10

   布局变形,真的是会布局会发生转移。显示变形,只承担自个儿的样子,不管布局。所以若是是动画片制作的话,如涉嫌到变形的话,应该利用RenderTransform。本记录重点是动画,所以依旧看看展现变形在动画里面是怎么表现的。

  以后大家的关键工作就是让写死的关键帧能够因而品质灵活布署,所以我们恐怕供给先编码1份进程条的基类( LoadingBase ),以提取二种档次进程条的共性。基类中定义7个属性,分别是 IsRunning 、 DotCount 、 DotInterval 、 DotBorderBrush 、 DotBorderThickness 、 DotDiameter 、 DotSpeed 、 DotDelayTime ,它们的意思已经是自注释的,不必赘述。而在环形进度条中,还有别的多个属性: DotOffSet 和 NeedHidden ,分别代表圆点全部的职位偏移和在运动中是或不是供给隐藏圆点。

[WP八.①UI控件编制程序]Windows Phone
VirtualizingStackPanel、ItemsStackPanel和ItemsWrapGrid虚拟化排列布局控件

 四、动画

 

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

四.1 认识动画

   看到动画五个字,大家相应相当慢想到了动画片片,动画片是一个或四个对象,在一定的岁月段里,作出不一致的变动。同样在WPF的动画片中,原理和动画片的形似,只可是大家今天成了动画的制笔者,作为制小编,大家要思量有个别对象做什么样动作,想好领会后,要思考什么对象在怎么着时间初叶组合….最后就形成了“动画片”。不难的卡通,由三个要素就能够形成了,WPF中的简单的卡通片称为AnimationTimeline,复杂的卡通片就须求三个要素相互协同实现,仿佛一段诗剧,我们誉为Storyborad。大家得以通过转到定义,发现他们都三番四遍自提姆eline类。好玩的事再好,都必不可缺三个载体,不是舞台,是光阴。那也让自个儿回忆一句话,人生像一场戏,好坏全靠演技。所以说,故事正是时间的积攒。还有一个要强调的是,WPF规定,能够用来成立动画的个性必须是借助属性。好了,依然个别看一下WPF中的传说啊!

3、关键帧动画

 

四.二 简单动画

在介绍简单动画此前还要看一下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看出都是基类,上边包车型大巴一层才是现实的动画片。为了维持和书中例子1样,大家就以DoubleAnimationBase为基类展开,其他的再逐月去询问和查找。1种便是点到点的的卡通片DoubleAnimation,1种是能够分为帧的卡通片DoubleAnimationUsingKeyFrames,还有一种是安分守己路径来举办的DoubleAnimationUsingPath的卡通片。简单动作由以下多少个部分构成:变化起源(From属性),变化终点(To属性),变化幅度(By属性),变化时间(Duration属性)。假使钦点的有终点那么幅度就被忽略了,倘使未有源点,就以近期因素所在地方为起点。依旧看个例子来的更易掌握。下边演示叁个按钮倘若被点击了,在0.三s里,按钮朝着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#代码完毕重大帧动画,但是得先有米才能做饭,故而要求先创立圆点:

目录如下:

四.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 八 .一 UI控件编制程序》目录

 4.四 路径动画

   后面早已介绍了门道绘图时的强大,那么大家能或不能够让笔者的卡通片依照我们制定的不二等秘书籍去演出吧,答案是能够的。那正是大家要记录的DoubleAnimationUsingPath类。注意它有多个特性很重点,在那之中Duration是各类动画必须有的,此外多个是Source属性和Path吉优metry分别用来钦赐向拾叁分样子移动和路径。下边给出三个按钮顺着马路径移动的卡通,构思如下:

    <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);

地点的代码不是足够全面,仅作为认识路线动画的1个路线。

  上面包车型地铁法子在进程条基类中落到实处,仅仅是用相关的属性开头化了大家的原料:圆点。由于环形进度条在X、Y轴方向都有运动,所以为了有利于,大家能够设想在圆点外面再包1层 Border 作为看不见的壳,大家将圆点与壳头部对齐,未来1经让壳绕大旨旋转就基本落实了指标,上面是环形进程条2个点到多少个点带壳的示意图:

第1章 深深解析程序界面

4.5 场景(Storyborad)

  关键帧动画是串在联合的,让一个总体的TimeLine分为多个帧,场景强调的是出现执行,把五个卡通同时开始展览。

美高梅开户网址 26

图11

  下边看3个事例:布局图如上海体育场所(图1一),点击按钮时,多个小球向目的进步,在那之中二个小球的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中的绘画类和与动画有关的多少个类,使自身对其有了开端的认识,关于那地点的文化,还索要深远去驾驭。上边把源码附上:源码。欢迎沟通!下一篇,小编将把本类别的源码和目录整理一下,顺便把电子书一并上传。供大家参考学习。

  想一想,假如未有那层壳,我们又有啥样替代情势,这么些点子是或不是都以颇为有利的?或然未有那层壳,就需求去雕饰怎么转移圆点的 RenderTransformOrigin ,好让它们看起来都以围绕1个点旋转的,尽管改变了进程条全部的尺寸。套壳的代码如下:

    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         }

    一.一.二 XAML页面包车型客车编写翻译

  套壳代码除了套壳和相关的起先化,最根本的是1玖和20行的宽高绑定,那是让圆点旋转中央始终唯一的关键。有了上述的备选,我们好不不难得以开头for循环了:

    一.1.三 动态加载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.二 XAML的树结构

  下面正是最大旨的要害帧动画,通过事先用Blend提取出来的XAML,我们能够见到它利用了 SplineDoubleKeyFrame ,那会涉及三遍贝塞尔曲线的控制点,思考到易用性,我们会用 LinearDoubleKeyFrame 和 EasingDoubleKeyFrame 代替。在XAML中大家最关切的根本字应该是角度,在时间片的哪1部分,圆点应该在哪儿,而又在哪些时候,圆点应该会破灭,大家只要随便截取四个点的关键帧就能得到上述全数新闻:

    一.二.1 可视化树

美高梅开户网址 28

    1.2.2 VisualTreeHelper类

美高梅开户网址 29

    一.2.叁 遍历可视化树

 

    1.二.四 可视化树应用示范:达成ListBox控件分页加载

  上边两张分别是圆点壹和贰反射率和职分的关键帧截图,通过两个点我们1齐能够推测全数点。出于个人喜欢,小编将反射率替换来了 Visibility 的切换,所以还会引入 DiscreteObjectKeyFrame 。篇幅原因,我们一向总括分析结果:

一.3 路由事件

  • 1最先全部点都是呈现的,然则地点分歧,从点一的-1拾度开头,角度每种减6;
  • 点一初始运动后,0.1陆7秒(陆分之一秒)后点贰先河活动,所以各点动画延迟时间为百分之十6秒(那里不太能鲜明是还是不是和圆点数量有关);
  • 以点1为例,旋转角度随时间变化图如下:

    1.3.1 Windows Phone事件

美高梅开户网址 30美高梅开户网址 31美高梅开户网址 32美高梅开户网址 33美高梅开户网址 34美高梅开户网址 35美高梅开户网址 36

    一.三.二 路由事件的定义

  从上边柒张图中能够看看,在三遍巡回中式点心1是那般活动的:减速、匀速、加快、减速、匀速、加快,而且与之对应的角度地方也交给了,最终大功告成,环形进度条就形成了。

    1.叁.四 路由事件规律

 

    一.3.5 路由事件的功用和示范

四、截图

壹.4框架和页面

  通过设置不一样的个性,能够达成分化的效力:

    一.肆.1 框架页面结构

  美高梅开户网址 37

    一.肆.二 页面导航

 

    一.肆.三 框架的选用示范:自定义弹出窗口

五、源码

1.5 UI线程

  本文所谈论的进程条源码已经在github开源:

第2章 体制和模板

2.1 样式

    2.一.1 创造样式

    二.一.二 样式继承

    二.1.三 以编程形式设置样式

    2.一.肆 样式文件

    二.一.五 系统核心

    二.壹.陆 大旨能源

    二.1.7 自定义主旨

2.2 模板

    二.二.一 控件模板(ControlTemplate)         

    2.2.2 ContentControl和ContentPresenter

    2.二.叁 视觉状态管理(VisualStatesManager)

    二.二.四 数据模板(DataTemplate)

    2.2.5 ItemTemplate、ContentTemplate和DataTemplate

    二.二.陆 数据模板的选择

    二.二.7 读取和转换数据模板

第3章 布局原理

3.一 布局原理

    三.1.一 布局的意思

    三.壹.二 系统的布局面板

    叁.一.叁 布局种类

    三.1.4 布局种类的重中之重措施和特性

    三.一.5 衡量和排列的长河

    三.1.陆 多分辨率的适配布局

三.二 自定义布局规则

    三.二.一 创制布局类

    三.二.贰 达成度量进度

    三.二.三 实现排列进度

    三.二.肆 应用布局规则

第4章 图表绘图

肆.一 图形原理

    四.壹.一 图形中常用的构造

    四.一.贰 画图相关的类

    四.1.三 基础的图样形状

4.2 Path图形 

    肆.2.一 二种Path图形的创立方法

    4.二.二 使用不难的几何图形来创设Path     

    4.2.3 使用PathGeometry来创建Path        

    四.二.四 使用路径标记语法创立Path     

    4.二.5 使用Path完毕自定义图形

    四.二.陆 利用Expression Blend工具成立Path图形        

4.3 画刷

    4.3.1 SolidColorBrush画刷    

    4.3.2 LinearGradientBrush画刷    

    4.3.3 ImageBrush画刷  

肆.四 图形裁剪

    四.四.一 使用几何图形进行剪裁      

    四.4.2 对布局区域开始展览剪裁 

第5章 图片编制程序

5.一动态变化折线图和区域图

    5.壹.一折线图和区域图原理

    5.1.二 生成图形逻辑封装

5.二 实现饼图控件

    5.二.一 自定义饼图片形形状

    伍.二.二 封装饼图控件

5.三 线性报表

    五.叁.一 达成图形表格和坐标轴

    5.三.2 定义线性数据图形类

    5.三.三 完毕图例

    伍.三.四 完结线性报表

5.4 QuickCharts图表控件库解析

    伍.4.1 QuickCharts项目布局解析

    伍.4.二 饼图图表PieChart的兑现逻辑

    伍.四.3 三番五次图形图表SerialChart的完结逻辑

第6章 更换特效和三维特效

六.1 变换特效

    陆.一.壹 变换的规律贰维变换矩阵

    六.1.贰 平移变换TranslateTransform

    陆.1.叁 旋转变换RotateTransform

    陆.1.四 缩放变换ScaleTransform

    6.一.五 扭曲变换SkewTransform

    6.一.陆 组合变换TransformGroup

    陆.壹.7 矩阵变换MatrixTransform 

六.2 三个维度特效

    6.二.一 三个维度坐标体系

    陆.二.二 三个维度旋转

    6.二.③ 三维平移

    ⑥.二.四 用矩阵实现三维特效

第7章 动画编制程序基础

七.壹 动画原理

    柒.一.壹 驾驭动画

    7.一.2 动画的靶子属性

    ⑦.一.3 动画的花色

7.2 线性插值动画

    7.2.一 动画的主导语法

    柒.二.贰 线性动画的核心语法

    七.二.3 DoubleAnimation达成转移动画

    柒.二.4 ColorAnimation完结颜色渐变动画

    7.贰.五 PointAnimation达成Path图形动画

七.三 关键帧动画

    七.3.壹 关键帧动画概述

    7.三.2 线性关键帧

    七.3.三 样条关键帧

    柒.3.四 离散关键帧

7.四 缓动函数动画

    七.4.一 缓动函数动画概述

    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动画

七.五 基于帧动画

    柒.5.壹 基于帧动画的规律

    柒.5.2 基于帧动画的选取场景

    柒.五.三 基于帧动画的贯彻

第8章 动画片进阶演习

8.一 动画方案的选料

    8.1.1 帧速率

    8.1.贰 UI线程和构图线程

    捌.壹.三 接纳最优的动画方案

8.2 列表动画

    八.2.一 完结的思绪

    八.二.2 使用附加属性决定动画对象

    八.2.三 列表切换缓动动画完毕

    捌.贰.肆 退出页面包车型大巴三个维度动画完毕

    8.2.伍 列表动画的演示

8.叁 模拟完毕微信的彩蛋动画

    8.3.一 完结的思路

    8.三.2 星星创制工厂

    八.三.三 完结单个星星的卡通片轨迹

    捌.三.4 封装批量星星飘落的逻辑

    八.三.5 星星飘落动画演示

8.四 决斗游戏动画

    捌.四.1 达成的思路

    八.肆.二 伊始页面包车型大巴布局

    八.肆.3 人物走路动画

    八.四.4 决斗开枪动画

第9章 深深解析控件编制程序

九.一 系统控件原理分析

    玖.1.一 系统控件分类

    九.一.2 系统控件的私下认可样式

    九.1.三 深度改造系统控件

九.二 UserControl自定义控件——水印输入框控件

    玖.2.1 UserControl自定义控件的规律

    玖.2.二 创制水印输入框控件

    玖.2.三 添加水印输入框控件属性和事件的处理

    九.二.四 使用水印输入框控件

九.3 从控件基类派生达成自定义控件——全屏进程条控件

    玖.三.一 创立控件样式

美高梅开户网址 ,    玖.3.2 加载样式

    玖.三.三 全屏进程条的开拓和倒闭

    九.三.四 处理物理重回事件

    玖.三.5 全屏进程条控件的使用

第八章 Expression Blend工具的利用

10.1 Expression Blend概述

    10.1.1 视图

    10.1.2 工作区

10.贰 首要的面板

    10.2.1美工板

    十.2.二 资产面板

    10.二.三 工具面板

    十.二.四 对象和时间线面板

    十.二.五 属性面板

10.3 Expression Blend for Windows Phone的风味功用

    十.3.1 采用设备的效劳

    10.3.2 预览 Windows Phone 样式

    10.3.三 定义应用程序菜单栏

10.4 Expression Blend绘图

    拾.四.一 绘图基础

    10.4.二 使用“笔”绘制路径

    10.四.三 合并路径

    10.四.四 实例练习——绘制八个表情图片

10.五 Expression Blend制作动画

    拾.5.一 剧情提要

    10.5.2 时间线

    10.五.三 Expression Blend的关键帧

    十.伍.四 实例练习——制作小球掉落反弹动画

第11章 列表编制程序

11.一 列表控件的选用

    1一.一.1 ItemsControl完毕最精简的列表

    1一.一.2 ListBox完毕下拉点击刷新列表         

    1一.1.三 ListView实现下拉机动刷新列表

    1一.一.四 GridView达成网格列表

    1一.1.5 SemanticZoom达成分组列表

1一.2 虚拟化技术

    11.二.1 列表的虚拟化

    1一.二.2VirtualizingStackPanel、ItemsStackPanel和ItemsWrapGrid虚拟化排列布局控件

    1一.贰.三 完毕横向虚拟化布局

    1一.贰.四 大数据量互连网图片列表的异步加载和内部存款和储蓄器优化

第二二章 Toolkit控件库的技能原理分析

12.一 Toolkit控件库项目简介

1贰.二 CustomMessageBox控件原理分析

    1贰.贰.壹 CustomMessageBox的调用逻辑

    1贰.2.贰 CustomMessageBox的体裁和弱引用的应用

1二.三 PhoneTextBox控件原理分析         

    1贰.叁.壹 PhoneTextBox的调用逻辑

    1贰.三.二 PhoneTextBox的包裹逻辑

1二.四 ToggleSwitch控件原理分析

    1二.四.一 ToggleSwitch的调用逻辑

    12.4.2 ToggleSwitch和ToggleSwitchButton的样式

    12.四.三 ToggleSwitch对拖拽手势的判定

12.五 ListPicker控件原理分析

    1二.5.一 ListPicker的调用逻辑

    1二.5.二 ListPicker控件主要逻辑的分析

1贰.陆 WrapPanel控件原理分析

    1二.六.一 WrapPanel控件的调用逻辑

    1二.陆.2 WrapPanel布局控件的度量排列逻辑

 

京东购买地点:

美高梅开户网址 38

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图