一、其实有现成的

《深刻掌握Windows Phone 八.一 UI控件编制程序》本书基于最新的Windows Phone 八.1Runtime
SDK编写,周详透彻地阐释了最酷的UI编制程序技术:完毕复杂炫酷的卡通、驾驭布局原理、列表虚拟化原理、高品质列表达成、图表编程、控件原理等。

  本篇将记录一下怎么着在WPF中描绘和安插动画,那方面向来都不是VS的刚强,不过它有壹套利器Blend;那上头也不是自个儿的优势,幸而自个儿有网易,能记录一下上学的历程。在本记录中,为了越来越好的明亮绘画与动画片,多数的例子依旧在VS里面敲出来的。好了,不赘述了,今后开首。

前言

在前头1篇“新春欢悦”的随笔中,大家介绍了WinPRADOT中的简单动画实现。其实在行使Windows/Windows
Phone时,大家都会看出部分卡通,最简便易行的比如说按下三个button时,该button的情景变化便是动画片的1种。再比如弹出式窗口或菜单,也是一种动画。WinLANDT中的动画类别众多,不过分类有点儿让初专家摸不着头脑:宗旨对接,大旨卡通,视觉转换,剧情提要动画。那个我们就隐瞒了,那里最主要说说自定义动画,大概说是剧情提要动画(Storyboard
Animation),因为这种动画是我们要常用的。

而是在多个非游戏类的App中添加动画是有规范的:在UI状态之间实行急忙流畅的对接,但不会使用户分心;超出用户的预料,可是又不会让用户厌烦。当然最大的前提是您的App的基本功效比较健全。假若有五个App完毕了扳平的效应,三个有动画,贰个未曾,你会喜欢哪个吧?答案昭昭。况且在WinLX570T中,动画完毕比较简单,效果又很好,所以just
do it!

后日我们按达成格局介绍三类动画:单一动画,复合动画,关键帧动画。在那之中还各自介绍了用XAML/Code怎样完结动画。

  先来看看Windows十进程条的二种情势:

 全书源代码免费下载:

一、WPF绘画

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

金沙注册送58 1

在那么些页中,点击四个粉红色的馆内藏品品种条(分类/博主/博文),都会接触四个卡通:

一)体系条作者做360度的X轴旋转

贰)对应的品种条下方的ListView做FadeIn/FadeOut的显得/隐藏过渡

 金沙注册送58 2

壹.一主题图形

  在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的细节:

金沙注册送58 ,一) 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_Roll”) as Storyboard;
    if (sb != null)
    {
        sb.Begin();
    }
}

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

那边有两点要证实:

1)为何用动画?因为凡是在用户点击显示器时,大家都应当授予视觉上的响应,免得心急的用户狂点荧屏造成手指受伤,作为程序员的我们要有慈善

二)为何用旋转动画?因为笔者爱不释手,就让作者任性贰遍啊,不易于呀。当然也可用别的动画,比如斜一下,可能陷下一点儿。

三)为何在控件内部调用Begin()?因为您给每户提供一个控件,按下后旋转是该控件的预约行为,不要再让动用该控件的人再去管什么动画操作。当然,你也得以提供四个TemplateBinding属性来让动用该控件的人钦赐是不是供给动画,然后在控件内部依照设置调用或不调用动画。

 

 

1.2笔刷

  常用的笔刷Brush类型有:

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

· LinearGradientBrush:使用线性渐变绘制区域。 当中有个GradientStop.aspx)属性,径向渐变也有能够查阅msdn,小编觉着下面说的依旧相比较清楚的。

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

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

· DrawingBrush:使用 Drawing 绘制区域。 绘图只怕含有向量和位图对象。

· VisualBrush:使用 Visual 对象绘制区域。 使用 VisualBrush 能够将内容从应用程序的四个有的复制到另三个区域,那在成立反射功能和拓宽局地屏幕时会格外有效。

接下去感受一下Shape类和Brush类的采纳。

用Code定义动画

该部分第3个卡通是显示或隐藏ListView,本次大家用其余1种艺术达成的动画,用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,2个是用一秒时间把ListView的Opacity值从0变到1(突显),另一个是用一秒时间把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>

UI控件编程,仿制Windows10的进程条。为何在那边并非XAML写法而用Code直接定义呢?是为着体现技术呢?你猜对呀!因为在MainPage.xaml中,有七个ListView,分别为lv_category,
lv_author,
lv_blog,如若要用XAML定义动画,要对这些七个ListView各写三回,重复了二回,只是ListView的名字区别,太掉价啦!注意素质!于是搞了2个FavoriteGroup类(恐怕名字不太好,叫刺杀金xx怎样?),里面用code包了须臾间,把ListView作为参数字传送入,就能够复用code啦。哎,纯属刁民小技,让各位看官见笑了。

  网上有这一个介绍仿制Windows拾进度条的篇章,也都实现了正确的作用。而笔者再开一文的缘由是认为尽管在这基础上添加1些效果,比如圆点的数额,圆点的轻重缓急等等,效果说不定会更加好1些。接触过UWP的情人应该领会,其框架中自带了进程条控件,以 ProgressRing 为例,通过Blend,大家能够获得到控件的XAML,以下是某个截图:

试读章节会在搜狐持续立异:

1.3 直线段

  在平面上,两点明确一条直线段。同样在Line类中也有着两点的质量(X一,Y1) (
X二,Y2),同时还性情子Stroke——笔触,它是Brush类型的。也等于足以用地方的笔刷赋值。由于其不难性,在此不作过多的验证,能够画出上边的直线段如图1:

金沙注册送58 3

图1

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

金沙注册送58 4金沙注册送58 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的卡通 – 复合动画

金沙注册送58 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属性来安装一下起首时间即可。

二)在此处为什么要用动画?因为本身爱好超出用户的预料,给她们以动态视觉享受,而不是干Baba的瞧着二个图纸发呆。用户1快意,没准儿就给个好评了。

 金沙注册送58 7

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

1.4矩形

  矩形最优良的个性是长和宽,除此而外还有(Stroke)笔触、填充(Fill)属性等质量。上面看一下能画出的图片如图二已经代码:

金沙注册送58 8

图2

代码如下:

金沙注册送58 9金沙注册送58 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来模拟了。下边看三个简练的事例,别的的可以灵活掌握。通过点击中间的按钮,然左边的按钮的形态”放到”左边,例子的效应如图叁:最上面包车型大巴是通过光滑度来决定的。

金沙注册送58 11

图3

上边给出首要代码:

金沙注册送58 12金沙注册送58 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>

金沙注册送58 14金沙注册送58 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中,左边那一个图,点击右边箭头,将会向左滑动,成为左侧那些样子。

金沙注册送58 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地点。能够看出第伍个关键帧,X值已经是0了,为何又从0变大了呢?那样就时有发生了触底反弹的作用,让对象控件弹回到最大9六的职责,最后再回到0。

亟需留意的是,关键帧只可以对某些控件的唯壹的3个属性操作,不能够同时操作多少个属性。而在上1节的复合动画中,是对有个别控件的八个属性同时操作,不过无法对某些属性定义两遍DoubleAnimation。那一个要切记。

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

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

1.5椭圆

  椭圆中相比广泛的是长半轴a和短半轴b,假诺a=b,那么就是三个圆形。在WPF中用Width和Height表示a,b别的的用法和矩形1致,上面给出一个球形的事例如图四:

金沙注册送58 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八.1UI控件编制程序]Windows
Phone驾驭和动用ItemTemplate、ContentTemplate和DataTemplate

 1.6路径

   路径在绘图中是属于比较重大的3个类,他得以替换上边的几个图形工具,而且还能画出更复杂的图像。路径不仅有Stroke,StrokeThickness等属性,还有个关键的习性——Data,其连串为Geometry(几何图形),大家尽管经过那个本性来替代别的绘图类的。上面先看壹组图(图伍):

金沙注册送58 18

 图5

   倘诺用我们地点的直线,矩形,椭圆,多边形类,能够画出上边的图。那么让我们用路径类来代替前面包车型客车多少个类吧。下边给出代码:

金沙注册送58 19金沙注册送58 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>

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

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

   下边的事例中重大用到前多系列型的几何图形类,从代码能够观察前三个和它们对应的Shape类有壹般,同样能够安装属性,来改变图形的形态。第伍个类,有点相当的小学一年级样,首要是由此三个LineSegment(线段)组成PathFigure(图,由于图是暗中同意属性,能够省略PathFigure标签),四个PathFigure组成Path吉优metry(几何图形)。和大家一直触及的几何有点相像,几何是由图结合,图是由七个段围成的,除却还有一个要注意的是各类段都以上三个段的极端作为源点的。除了LineSegment,还有多少个比较关键的线条ArcSegment,BezierSegment(三次贝塞尔曲线),QuadraticBezierSegment(叁次贝塞尔曲线段)等,假设想询问更加多线段,请点击这里。特别是贝塞尔曲线,与数学和图纸联系非凡连贯,在此不作表达,有机会的话,写一篇那上头的小说。

  上边的那种多种标签式写法看起来比较清楚,然而二个门路恐怕是会过多行,为了便于,由于路线的特殊性(起源->绘图->闭合图形)上面还有壹种简易的写法,直接用一个天性Data来代表路径。上边新看一下常用路径标记语法图6:

金沙注册送58 21

图6

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

金沙注册送58 22

图7

  上图中,以0,0坐标起头,有3段线段,终点坐标分别为(50,30)(60,40)(70,80)最终以三个Z命令闭合。若是要整合更扑朔迷离的门路,能够参见上边的表,当然须要部分几何基础。 关于绘画的类,一时就记下到此地呢!

二、添加职能

[WP捌.一UI控件编制程序]Windows
Phone动画方案的精选

 贰、图形的效劳与滤镜

   有玩过Ps的就知晓在里头有无数滤镜,使用起来方面,火速。同样在WPF中,除了提供矢量图外,也有滤镜的成效。对于UIElement类的积极分子有四个属性BitmapEffect和Effect,前者由于其是占据CPU来计量渲染图片的,后者是显卡在测算运算能力站主导,这样Effect就为cpu省下了财富,所以今后多如牛毛景况都以用的Effect。由于美术工作方面相比较差劲,在此仅付给其用法,具体的依照msdn和供给来调动。

  先记下一下BitmapEffect,在msdn上面看到属性已经不合时宜了,可是4.0,四.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>

作用如图八:

金沙注册送58 23

图8

 别的的用法都大致,能够试着去玩一下。下边记录一下Effect。同样Effect也是UIElement的质量,当中Effect类有四个天性:

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

  看理解后,有怎么着感想呢,怎么比BitmapEffect还少啊,不过有个抽象类,抽象类就是用来一而再的,能够团结去写。想写多少种写多少种,关于前三种的机能使用情势和BitmapEffect的相同,首要说明一(Beingmate)下抽象类,网上有无数写好的着色器的继承类,能够供大家利用。小编在网上下载了3个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>

看一下成效如图9:

金沙注册送58 24

 图9

  怎样呢?激动了吧!O(∩_∩)O~。赶紧去下载源码,悄悄她长得怎么着。好了,关键是朝思暮想使用的格式记住,其余的就要靠必要来选用滤镜了,好了,关于绘图的记录这几个就到那边吧!上面进入图形的变形与动画片。

  如若要改成圆点的多寡,圆点的高低只怕圆点的移动速度,大家该怎样兑现啊?继承章节一中的XAML,并依照所需调整模板就展现太费事了,那会让我们的样式文件展现臃肿不堪,所以利用纯粹的C#代码来兑现它也许正如明智。不过以前的XAML也不是不对,至少它交给了环形过程条的首要帧动画的组合,这几个音讯对大家的话很关键,免去了大家协调去分析的手续。

[WP八.壹UI控件编制程序]SemanticZoom控件完成分组列表

3、图形的变形

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

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

  由于FrameworkElement类派生于UIelement类,而控件的基类Control类又派生于FrameworkElement类,所以说FrameworkElement类有两天性子。除外,还要领会地点的八个属性都以注重属性,他们的花色为Transform 抽象类,此抽象类派生的档次有上边多少个:

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

上边来相比一下RenderTransform和LayoutTransform的区分。RenderTransform是不牵扯到布局的转移,只关乎到窗体的重绘。要是不精通的话,大家就从一个例子看一下。小编在1个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>

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

金沙注册送58 25

图10

   布局变形,真的是会布局会生出转移。突显变形,只担负自身的模样,不管布局。所以若是是卡通制作的话,如涉及到变形的话,应该运用RenderTransform。本记录重点是卡通片,所以照旧看看显示变形在动画里面是怎么表现的。

  未来我们的要紧办事就是让写死的关键帧能够由此品质灵活配置,所以大家兴许要求先编码壹份进程条的基类( LoadingBase ),以提取两系列型进程条的共性。基类中定义九个属性,分别是 IsRunning 、 DotCount 、 DotInterval 、 DotBorderBrush 、 DotBorderThickness 、 Dot迪亚梅ter 、 DotSpeed 、 DotDelay提姆e ,它们的意思已经是自注释的,不必赘述。而在环形进度条中,还有别的三个属性: DotOffSet 和 NeedHidden ,分别代表圆点全部的岗位偏移和在运动中是或不是须求隐藏圆点。

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

 四、动画

 

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

肆.一 认识动画

   看到动画三个字,大家相应火速想到了动画片,动画片是1个或三个对象,在特定的时日段里,作出不一样的转变。同样在WPF的动画片中,原理和卡通的形似,只然而大家今后成了动画的制小编,作为制笔者,大家要商量有些对象做怎样动作,想好了随后,要想想什么对象在如几时间早先组合….最后就形成了“动画片”。不难的动画片,由一个因素就足以成功了,WPF中的简单的动画称为AnimationTimeline,复杂的动画片就供给八个要素相互协同达成,就像1段歌舞剧,大家称为Storyborad。大家能够经过转到定义,发现她们都无冕自Timeline类。传说再好,都少不了三个载体,不是舞台,是岁月。那也让本人记忆一句话,人生像一场戏,好坏全靠演技。所以说,轶事正是岁月的积聚。还有一个要强调的是,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看出都以基类,下边包车型地铁壹层才是有血有肉的动画片。为了保持和书中例子壹样,大家就以DoubleAnimationBase为基类展开,其余的再稳步去询问和搜索。一种正是点到点的的卡通片DoubleAnimation,1种是能够分为帧的卡通片DoubleAnimationUsingKeyFrames,还有壹种是依照路径来实施的DoubleAnimationUsingPath的动画。简单动作由以下多少个部分组成:变化起源(From属性),变化终点(To属性),变化幅度(By属性),变化时间(Duration属性)。假设内定的有极限那么幅度就被忽略了,假设未有源点,就以当下成分所在地方为源点。依然看个例子来的更易明白。下边演示3个按钮即使被点击了,在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#代码达成首要帧动画,可是得先有米才能做饭,故而须求先创制圆点:

目录如下:

4.三 关键帧动画   

   先领会一下帧的定义,帧也就每趟属性改变都会时有产生1个新画面,新画面正是一个帧。帧的连接播发产生了动画。DoubleAnimationUsingKeyFrames的实例中国和东瀛常是含有多少个DoubleKeyFrame类的帧,具体的有上边三种:

  • LinearDoubleKeyFrame,线性帧,指标属性值的成形是直线型的,匀速的。
  • DiscreteDoubleKeyFrame,不总是变化的帧,指标属性值是跳跃的。
  • SplineDoubleKeyFrame, 样条函数变化帧,目的属性值的速率是一条贝赛尔曲线。
  • EasingDoubleKeyFrame,缓冲式帧,目的属性值以某种缓冲格局转变。

 LinearDoubleKeyFrame类的帧是时间点和值,DoubleAnimationUsingKeyFrames注重于LinearDoubleKeyFrame的时刻和值。上面看3个让按钮做“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 .一 UI控件编制程序》目录

 四.四 路径动画

   后边早已介绍了门道绘图时的无敌,那么大家能还是不能够让作者的卡通片依据大家制定的门道去演出吗,答案是能够的。这正是咱们要记录的DoubleAnimationUsingPath类。注意它有四个脾气很关键,在那之中Duration是各类动画必须有的,此外三个是Source属性和Path吉优metry分别用来内定向那一个样子移动和路线。上面给出3个按钮沿着马路径移动的卡通,构思如下:

    <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章 深深解析程序界面

4.5 场景(Storyborad)

  关键帧动画是串在1起的,让1个全部的TimeLine分为多个帧,场景强调的是出现执行,把多少个卡通同时开始展览。

金沙注册送58 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);

  通过本例子应该对气象有个影像,不过离运用应当还有一段的异样,先就到那边吧!有时光好好的商量一下!

金沙注册送58 27

1.1 XAML的原理

五、总结

  本篇记录了关于WPF中的绘画类和与动画片有关的多少个类,使本人对其有了启幕的认识,关于这上头的学识,还必要深远去了解。上边把源码附上:源码。欢迎调换!下一篇,笔者将把本类别的源码和目录整理一下,顺便把电子书1并上传。供我们参考学习。

  想1想,如若未有那层壳,大家又有怎么样替代情势,这么些方法是或不是都以极为有利的?或然未有那层壳,就要求去雕饰怎么转移圆点的 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         }

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

  套壳代码除了套壳和有关的起首化,最关键的是1玖和20行的宽高绑定,这是让圆点旋转焦点始终唯一的关键。有了以上的备选,我们毕竟能够起先for循环了:

    一.一.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 }

一.二 XAML的树结构

  上边就是最大旨的第1帧动画,通过事先用Blend提取出来的XAML,大家可以观望它采取了 SplineDoubleKeyFrame ,那会涉嫌一遍贝塞尔曲线的控制点,思量到易用性,大家会用 LinearDoubleKeyFrame 和 EasingDoubleKeyFrame 代替。在XAML中大家最关注的最首要字应该是角度,在时间片的哪部分,圆点应该在何处,而又在几时,圆点应该会未有,我们假如随意截取四个点的关键帧就能获取上述全数新闻:

    一.二.壹 可视化树

金沙注册送58 28

    1.2.2 VisualTreeHelper类

金沙注册送58 29

    1.二.叁 遍历可视化树

 

    一.二.肆 可视化树应用示范:完结ListBox控件分页加载

  上面两张分别是圆点1和2折射率和岗位的关键帧截图,通过四个点我们1齐能够臆想全部点。出于个人喜欢,作者将反射率替换到了 Visibility 的切换,所以还会引进 DiscreteObjectKeyFrame 。篇幅原因,大家直接总括分析结果:

一.3 路由事件

  • 一开头全数点都以呈现的,然而地点分裂,从点1的-110度初叶,角度每种减陆;
  • 点1开头运动后,0.167秒(陆分一秒)后点二起来活动,所以各点动画延迟时间为百分之十6秒(那里不太能明确是否和圆点数量有关);
  • 以点一为例,旋转角度随时间变化图如下:

    1.3.1 Windows Phone事件

金沙注册送58 30金沙注册送58 31金沙注册送58 32金沙注册送58 33金沙注册送58 34金沙注册送58 35金沙注册送58 36

    一.3.二 路由事件的概念

  从地点七张图中得以见见,在一回巡回中式点心一是那般活动的:减速、匀速、加快、减速、匀速、加快,而且与之相应的角度地方也交给了,最终水到渠成,环形进程条就完事了。

    1.三.4 路由事件规律

 

    1.叁.伍 路由事件的效劳和示范

四、截图

一.四框架和页面

  通过安装差别的性质,能够兑现分裂的意义:

    一.四.壹 框架页面结构

  金沙注册送58 37

    一.四.二 页面导航

 

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

五、源码

1.5 UI线程

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

第2章 体制和模板

2.1 样式

    贰.1.1 创设样式

    二.壹.二 样式继承

    贰.1.叁 以编程格局设置样式

    贰.1.四 样式文件

    2.1.伍 系统宗旨

    二.壹.陆 主旨财富

    二.1.7 自定义大旨

2.2 模板

    2.2.1 控件模板(ControlTemplate)         

    2.2.2 ContentControl和ContentPresenter

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

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

    2.2.5 ItemTemplate、ContentTemplate和DataTemplate

    贰.二.6 数据模板的使用

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

第3章 布局原理

三.一 布局原理

    叁.壹.壹 布局的意思

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

    3.1.三 布局连串

    三.1.四 布局连串的重中之重格局和性质

    3.一.5 衡量和排列的经过

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

叁.二 自定义布局规则

    三.二.一 创造布局类

    三.2.二 完成度量进程

    叁.2.三 完结排列进度

    三.二.四 应用布局规则

第4章 图表绘图

四.一 图形原理

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

    四.壹.贰 画图相关的类

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

4.2 Path图形 

    4.二.一 二种Path图形的制造方法

    肆.二.贰 使用不难的几何图形来创造Path     

    4.2.3 使用PathGeometry来创建Path        

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

    四.二.5 使用Path完成自定义图形

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

4.3 画刷

    4.3.1 SolidColorBrush画刷    

    4.3.2 LinearGradientBrush画刷    

    4.3.3 ImageBrush画刷  

4.肆 图形裁剪

    4.肆.壹 使用几何图形进行剪裁      

    四.四.二 对布局区域展开剪裁 

第5章 图形编程

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

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

    伍.一.二 生成图形逻辑封装

5.二 达成饼图控件

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

    伍.2.2 封装饼图控件

五.叁 线性报表

    伍.三.一 完毕图形表格和坐标轴

    五.叁.2 定义线性数据图形类

    5.叁.三 达成图例

    五.三.四 完毕线性报表

5.④ QuickCharts图表控件库解析

    五.四.一 QuickCharts项目组织解析

    5.四.二 饼图图表PieChart的达成逻辑

    5.④.三 接二连三图形图表SerialChart的贯彻逻辑

第6章 改换特效和三Witt效

6.一 变换特效

    陆.一.一 变换的规律二维变换矩阵

    六.一.2 平移变换TranslateTransform

    陆.1.叁 旋转变换RotateTransform

    陆.1.四 缩放变换ScaleTransform

    六.壹.5 扭曲变换SkewTransform

    六.一.陆 组合变换TransformGroup

    陆.一.柒 矩阵变换MatrixTransform 

陆.二 三维特效

    6.2.一 三个维度坐标系列

    陆.二.二 三个维度旋转

    陆.2.三 三个维度平移

    6.2.四 用矩阵达成3Witt效

第7章 动画编制程序基础

7.一 动画原理

    七.1.一 通晓动画

    7.1.2 动画的目的属性

    7.壹.3 动画的类型

七.二 线性插值动画

    7.2.壹 动画的着力语法

    七.贰.2 线性动画的中央语法

    七.二.三 DoubleAnimation实现转移动画

    7.二.四 ColorAnimation完成颜色渐变动画

    七.2.伍 PointAnimation达成Path图形动画

七.三 关键帧动画

    柒.3.一 关键帧动画概述

    7.3.2 线性关键帧

    7.3.叁 样条关键帧

    7.三.四 离散关键帧

七.4 缓动函数动画

    7.四.一 缓动函数动画概述

    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.一 基于帧动画的法则

    7.5.2 基于帧动画的使用场景

    7.伍.三 基于帧动画的落到实处

第8章 卡通进阶练习

八.1 动画方案的抉择

    8.1.1 帧速率

    八.一.二 UI线程和构图线程

    8.壹.三 选取最优的动画方案

捌.二 列表动画

    八.贰.一 实现的笔触

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

    八.二.三 列表切换缓动动画完成

    8.2.4 退出页面包车型客车三个维度动画达成

    捌.二.伍 列表动画的示范

八.三 模拟完成微信的彩蛋动画

    八.三.一 完毕的思绪

    8.3.二 星星创立工厂

    8.三.三 达成单个星星的卡通轨迹

    八.三.四 封装批量星星飘落的逻辑

    8.三.伍 星星飘落动画演示

八.四 决斗游戏动画

    八.4.壹 完结的笔触

    8.4.2 起头页面包车型地铁布局

    八.四.三 人物走路动画

    八.四.肆 决斗开枪动画

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

九.一 系统控件原理分析

    九.1.一 系统控件分类

    9.一.2 系统控件的暗许样式

    九.壹.3 深度改造系统控件

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

    九.二.一 UserControl自定义控件的规律

    九.二.二 成立水印输入框控件

    九.二.3 添加水印输入框控件属性和事件的处理

    玖.二.4 使用水印输入框控件

九.三 从控件基类派生完毕自定义控件——全屏进程条控件

    玖.3.一 创制控件样式

    玖.三.二 加载样式

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

    玖.3.四 处理物理再次回到事件

    九.三.5 全屏进程条控件的运用

第柒章 Expression Blend工具的选取

10.1 Expression Blend概述

    10.1.1 视图

    10.1.2 工作区

拾.二 首要的面板

    10.2.1美工板

    10.二.二 资金财产面板

    十.2.三 工具面板

    十.二.四 对象和岁月线面板

    10.二.伍 属性面板

十.三 Expression Blend for Windows Phone的特征效益

    10.3.1 选用设备的意义

    10.3.2 预览 Windows Phone 样式

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

10.4 Expression Blend绘图

    十.肆.1 绘图基础

    十.4.2 使用“笔”绘制路径

    10.四.三 合并路径

    10.四.四 实例练习——绘制一个神情图片

十.五 Expression Blend制作动画

    10.5.一 情节提要

    10.5.2 时间线

    十.伍.三 Expression Blend的关键帧

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

第11章 列表编制程序

11.一 列表控件的行使

    1一.壹.1 ItemsControl落成最精简的列表

    1壹.一.贰 ListBox达成下拉点击刷新列表         

    1一.一.三 ListView完结下拉全自动刷新列表

    1①.1.四 GridView完成网格列表

    11.壹.5 塞马nticZoom完结分组列表

1一.二 虚拟化技术

    1一.二.一 列表的虚拟化

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

    11.2.三 完成横向虚拟化布局

    1一.二.四 大数据量网络图片列表的异步加载和内部存储器优化

第一2章 Toolkit控件库的技巧原理分析

12.壹 Toolkit控件库项目简介

1二.2 CustomMessageBox控件原理分析

    12.2.1 CustomMessageBox的调用逻辑

    1二.贰.二 CustomMessageBox的体制和弱引用的选用

12.三 PhoneTextBox控件原理分析         

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

    1二.三.2 PhoneTextBox的卷入逻辑

1二.4 ToggleSwitch控件原理分析

    1贰.4.1 ToggleSwitch的调用逻辑

    12.4.2 ToggleSwitch和ToggleSwitchButton的样式

    12.肆.三 ToggleSwitch对拖拽手势的判断

12.五 ListPicker控件原理分析

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

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

1二.6 WrapPanel控件原理分析

    12.陆.一 WrapPanel控件的调用逻辑

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

 

京东购得地方:

金沙注册送58 38

相关文章

网站地图xml地图