【Silverlight】时钟旋转等待动画
下面一步一步教你怎么用 Microsoft Expression Blend 4 制作这一动画。所有图片可以点击看大图
第一步:新建一个 Silverlight 项目,取名为 WaitClock
第二步:调整控件大小为 160*160,并挑选一张合适的背景图片
第三步:画好外圈,设置好填充颜色,并把填充颜色转换为资源。然后在连续拖两个椭圆进来,分别设置边距为 25 和 70,并应用 Brush。
先拖一个 Ring 到 LayoutRoot,并设置 ArcThickness 为 13
设置好 Ring 的 Gradient Brush(..),两个点分别是 #70FFFFFF #40FFFFFF。再把这个 Brush 转换为静态资源。
第四步:用 Path 画两个指针。Data 数据填入“M0,0C3,7 8,17 8,26C8,30 3,38 0,40M0,0C-3,7 -8,17 -8,26C-8,30 -3,38 0,40”。设置好填充颜色和布局。具体参数见图片。Data 可以参考路径标记语法。
第五步:制作动画。分别把两个 Path 的旋转中心设置到正确位置。再选择一个 Path,为其增加一个故事版。这时候按下 F6 快捷键可以切换为动画设计模式。
首先在时间的起始点设置旋转角度为记录当前值,再在 1 秒时间处设置旋转角度为 360。这时候点击播放按钮可以看到大指针旋转一周的动画。
相同的,可以给第二个 Path 设置旋转动画,与上面不同的是时间间隔为 12 秒,而不是 1 秒。
现在为了方便区分,非别给两个 Path 命名为 Bigger 和 Smaller。分别给两个故事版命名为 Big 和 Small。
第六步:给动画设置重复行为,设置为无限次。
第七步:增加触发事件。托两个 ControlStoryboardAction 到 UserControl 上,分别设置在 Loaded 事件触发是播放 Big 和 Small 动画。
第八步:完成,现在你可以按下 F5 快捷键在浏览器中看看效果。是不是很简单?