源碼下載:http://yunpan.cn/cFJR5zcMNtBq6  访问密码 ac7a

使用Storyboard可以實現動畫效果。

1.仿照WINDOWS系統安裝時的等待畫面,不停更換背景顏色

        <Button x:Name="testBtn" Content="Button" HorizontalAlignment="Left" Margin="62,29,0,0" VerticalAlignment="Top" Height="53" Width="234">
<Button.Background>
<SolidColorBrush x:Name="testBtnBack" Color="Black">
</SolidColorBrush>
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Loaded">-----控件一加載就跑一個動畫
<BeginStoryboard>-----------表示開始執行
<Storyboard -----真正的動畫板
                RepeatBehavior="Forever"--------無限循環
                AutoReverse="True"------------自動反向變換,即動畫從A->B,後再B->A。
                >
<ColorAnimation
From="Red"-----------------------------|從紅色變到綠色,可以使用Binding, Converter分配一個隨機顏色
To="Blue" -----------------------------|
Duration="0:0:2" -------------------------變換時間,H:M:S,可以使用小數。
Storyboard.TargetName="testBtnBack" --------------這裡是應用於哪個控件
Storyboard.TargetProperty="Color" --------------屬性
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>

以上這段XAML代碼就實現了背景顏色從RED變化到BLUE的簡單動畫。

這個例子中,我們使用了單幀動畫 ColorAnimation ,Color 代表是屬性的類型,如上圖中,背景顏色屬性類型為Color,Animation代表動畫,所以這個東東就表示是一個顏色變化的單幀動畫。

2.單幀動畫

下面列出單幀動畫:

DoubleAnimation 屬性類型為Double或int的動畫。
PointAnimation 屬性類型為Point的動畫。
ColorAnimation 屬性類型為Color的動畫。

比如DoubleAnimation,我們可以改變字體大小,改變寬度,高度等等。

所以要改變控件的位置,XAML不支持使用Margin.Top這樣的屬性。必須使用RenderTransform。舉例說明,實現一個球上下彈動的效果:

        <Ellipse x:Name="ball" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="52" Margin="45,226,0,0" Stroke="Black" VerticalAlignment="Top" Width="52" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>-------------這裡要使用Render
<TranslateTransform />
</Ellipse.RenderTransform>
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames ------多幀,稍後討論。
Storyboard.TargetName="ball"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"------改變Y的位置
Duration="0:0:2"
RepeatBehavior="Forever"
EnableDependentAnimation="True"------這個玩意一定要設置為真。。
AutoReverse="True" >
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="240"> -----這種屬性多幀類型,稍後討論。
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard> </BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>

3.多幀動畫

DoubleAnimationUsingKeyFrames   全部使用Double類型單幀的動畫。
    - DiscreteDoubleKeyFrame   馬上變化,沒有漸變效果。如寬度從0到200,直接就變化到200,有一個跳變,一般會感覺比較突兀。
    - LinearDoubleKeyFrame   變化是線性變化效果,如寬度從0到200,是從0到10,到20,到50,再到200,有一個緩慢變化效果。
    - SplineDoubleKeyFrame  

貝塞爾曲線,具體可以查看貝塞爾曲線的定義,再進行理解。

具體參照博客:http://blog.csdn.net/tcjiaan/article/details/7550506

    - EasingDoubleKeyFrame  

緩動變化效果。

具體請參照博客:http://www.cnblogs.com/xwlyun/archive/2012/09/11/2680579.html

     
PointAnimationUsingKeyFrames   全部使用Point類型單幀的動畫。
     
ColorAnimationUsingKeyFrames   全部使用Point類型單幀的動畫。
     
ObjectAnimationUsingKeyFrames   可以使用任意類型單幀的動畫。
     
     

所要說明的是,每一種子幀類型都有4種,即Discrete、Linear、Spline、Easing。如,PointAnimationUsingKeyFrames就會有DiscretePointKeyFrame、LinearPointKeyFrame、SplinePointKeyFrame、EasingPointKeyFrame。

而ObjectAnimationUsingKeyFrames只能使用DeiscreteObjectKeyFrame,以及系統自定義主題動畫。待會再介紹這個東東。

DeiscreteObjectKeyFrame這個玩意可以使用任意類型,即不局限於double、color、point,但是你也看到了,它是使用Deiscrete,所以它只能立即改變。

每一個子幀都有 KeyTime、Value兩個屬性。

KeyTime即為顯示該幀的時間,Value即在DoubleAnimationUsingKeyFrames中設定的屬性的值。

好了,我寫了一個BUTTON,可以任意跳轉位置,而且可以轉換長度:

<Button x:Name="widthButton" Content="Button" HorizontalAlignment="Left" Height="100" Margin="251,413,0,0" VerticalAlignment="Top" Width="124">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Duration="0:0:2" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="widthButton" Storyboard.TargetProperty="Width">
<LinearDoubleKeyFrame KeyTime="0" Value="100" />
<LinearDoubleKeyFrame KeyTime="0:0:1" Value="200" />
<LinearDoubleKeyFrame KeyTime="0:0:2" Value="300" />
</DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames EnableDependentAnimation="True" Duration="0:0:9" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="widthButton" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="0,100,0,0" />
<DiscreteObjectKeyFrame KeyTime="0:0:1" Value="100,100,0,0" />
<DiscreteObjectKeyFrame KeyTime="0:0:2" Value="100,100,100,0" />
<DiscreteObjectKeyFrame KeyTime="0:0:3" Value="0,200,100,0" />
<DiscreteObjectKeyFrame KeyTime="0:0:4" Value="300,100,100,0" />
<DiscreteObjectKeyFrame KeyTime="0:0:5" Value="0,400,100,0" />
<DiscreteObjectKeyFrame KeyTime="0:0:6" Value="10,400,100,0" />
<DiscreteObjectKeyFrame KeyTime="0:0:7" Value="90,160,100,0" />
<DiscreteObjectKeyFrame KeyTime="0:0:8" Value="28,10,100,0" />
<DiscreteObjectKeyFrame KeyTime="0:09" Value="244,100,0,0" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>

4.系統主題動畫。

API 描述
AddDeleteThemeTransition 为控件添加或删除子对象或内容的情形提供动画的过渡表现方式。通常,控件是项目容器。
ContentThemeTransition 为控件的内容更改时的情形提供动画的过渡表现方式。可以在应用 AddDeleteThemeTransition 后再应用它。
EntranceThemeTransition 为控件第一次显示的情形提供动画的过渡表现方式。
ReorderThemeTransition 为列表-视图控件项目更改顺序的情形提供动画的过渡表现方式。通常它作为拖放操作的结果出现。不同的控件和主题可能具有不同的动画特征。
RepositionThemeTransition 为控件更改位置的情形提供动画的过渡表现方式。
API 描述
DropTargetItemThemeAnimation 应用到潜在的拖放目标元素的预配置动画。
FadeInThemeAnimation 控件第一次出现时应用到控件的预配置不透明度动画。
FadeOutThemeAnimation 控件从 UI 中删除或隐藏时应用到控件的预配置不透明度动画。
PopInThemeAnimation 控件的弹入组件显示时应用到它们的预配置动画。此动画结合了不透明度和转换。
PopOutThemeAnimation 控件的弹入组件关闭或删除时应用到它们的预配置动画。此动画结合了不透明度和转换。
RepositionThemeAnimation 对象重新放置时应用的预配置动画。
SplitCloseThemeAnimation 使用拆分动画显示目标 UI 的预配置动画。
PointerDownThemeAnimation 用于用户点击或单击项目或元素操作的预配置动画。
PointerUpThemeAnimation 在点击一个项目或元素后(指针不再悬停在上面)运行的用户操作预配置动画。
SplitOpenThemeAnimation

使用拆分动画显示目标 UI 的预配置动画。

上述表格從以下博客複製:

http://www.cnblogs.com/hebeiDGL/archive/2012/10/27/2742293.html

比如為GridView添加添加、刪除元素的動畫:

<GridView>
<GridView.Items>
<AddDeleteThemeTransition />
</GridView.Items>
</GridView>

為一個按鈕添加一個進入的動畫:

                            <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="69" Margin="-13,93,0,-117" VerticalAlignment="Top" Width="115">
<Button.Transitions>
<TransitionCollection>
<EntranceThemeTransition FromHorizontalOffset="500" FromVerticalOffset="500" />
</TransitionCollection>
</Button.Transitions>
</Button>

5.代碼控制動畫的播放與停止

上面介紹的都是自動播放的動畫,實際上我們可以手動開始、停止動畫。

我寫了一個單擊變化長度的動畫:

        <Grid.Resources>
<Storyboard x:Name="framesBoard"> ----標識一個名字進行操作
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="frames"
Storyboard.TargetProperty="Width"
Duration="0:0:2"
EnableDependentAnimation="True"
>
<LinearDoubleKeyFrame KeyTime="0:0:2" Value="500" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
        private void frames_Click(object sender, RoutedEventArgs e)
{
framesBoard.Begin();
}

【WIN10】Storyboard動畫板的更多相关文章

  1. vue動畫和過渡

    過渡: 插入.更新和溢出DOM時,提供不同的方式應用過渡效果: vue提供內置的封裝組件,用於包裹要實現過渡效果的內容. <transition name="a">&l ...

  2. jquery 動畫

    animate({param},speed,callback)/animate({param},speed)/animate({param}) param表示css屬性:屬性名必須是camel標識法: ...

  3. Win10 dell驱动触摸板安装

    Win10 dell驱动触摸板安装 在此之前安装驱动后要重启

  4. CSS製作動畫效果(Transition、Animation、Transform)

    CSS 2D Transforms https://www.w3schools.com/css/css3_2dtransforms.asp CSS 3D Transforms https://www. ...

  5. (译)Getting Started——1.2.4 Tutorial:Storyboard(故事板)

    该教程是基于你在前面的课程中构建的项目上进行的.学完本教程后,你将使用你前面学到的视图.视图控制器.动作.导航的内容,还会为应用创建一些关键的用户界面,并在场景中添加行为 以下就是本节课的内容: 1. ...

  6. 修复Win10下Synaptics触摸板双指触击无法打开右键菜单的问题

    从Win8.1开始,Synaptics触摸板驱动的键值就不能正确设置,使得双指触击失效,无法打开右键菜单. 解决方法1.打开注册表:2.搜索“2FingerTapAction”,或直接定位到以下两个路 ...

  7. nib、xib、storyboard(故事板)

    nib:NeXT Interface Builder的缩写 xib:XML nib的缩写 相同点: nib和xib都是Interface Builder的图形界面设计文档.Interface Buil ...

  8. 【WIN10】文本圖標

    在Storyboard動畫板中,我使用文本顯示了一個“心”形.在這裡,我將介紹一下文本圖標. 1.Segoe MDL2 Assets 首先,它必須使用字體:Segoe MDL2 Assets 其次,它 ...

  9. 配置editplus,讓其支持代碼自動格式化功能.

    使用editplus已經好多年了,累積了不少的東西,想換IDE比較麻煩,所以就研究了一下用editplus搭配gofmt.exe配置go語言代碼自動格式化的功能.還好功夫不負有心人,終於被我搞懂了,不 ...

随机推荐

  1. Java Spring boot 企业微信点餐系统

    欢迎关注我的微信公众号:"Java面试通关手册" 回复关键字" springboot "免费领取(一个有温度的微信公众号,期待与你共同进步~~~坚持原创,分享美 ...

  2. webconfig的配置解析

    <?xml version="1.0"?> <!--注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置.可以使用 Visual S ...

  3. struct msghdr和struct cmsghdr【转载】

    理解struct msghdr当我第一次看到他时,他看上去似乎是一个需要创建的巨大的结构.但是不要怕.其结构定义如下:struct msghdr {    void         *msg_name ...

  4. keepalived主备切换后的arp问题【转】

    使用keepalived的时候主机挂了,备机显示绑定了VIP.但是此时实际还是不能访问.其实就是网关的arp缓存没有刷新.   在服务器上执行一下就行了 arping -I eth0 -c 5 -s ...

  5. 001使用smokeping监控idc机房网络质量情况

    最近工作比较忙,也没有时间写博客,看到好友芮峰云最近一直在写博客,所以也手痒了,就先把之前的一些积累下来的文章分享给大家. 本文是介绍如何的使用smokeping来监控idc机房的网络质量情况,从监控 ...

  6. ps的各种参数

    1.CPU占用最多的前10个进程: ps auxw|head -1;ps auxw|sort -rn -k3|head -10 2.内存消耗最多的前10个进程 ps auxw|head -1;ps a ...

  7. C#+TaskScheduler(定时任务)实现定时自动下载

    C# /TaskScheduler /定时任务 /定时自动下载 3410 实现原理,客户是广电,在广电服务器创建一个FTP目录,然后每天自动从卫星上自动更新节目列表, 然后功能就是要每天定点一个时间自 ...

  8. tp总结

    不知不觉学tp也快一个月了,虽然还处于一个仅仅只会使用的阶段,但毕竟算是我详细接触的第一个脚本框架,tp还是让我收获了许多. 废话不多说,先列出几个对于我这种新手来说tp新奇而实用的地方. 1.连贯操 ...

  9. csu 1756(数论+去重)

    Prime Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 84  Solved: 12[Submit][Status][Web Board] Descr ...

  10. OpenSSL 给自己颁发根证书,由根证书签发下级证书的步骤。

    1.建立根证书 (1)生成私钥 openssl genrsa -des3 -out CAroot.key 2048.产生一个2048位的私钥,在安装的openssl目录下调用openssl命令. 需要 ...