zoukankan      html  css  js  c++  java
  • 【Silverlight】时钟旋转等待动画

    下面一步一步教你怎么用 Microsoft Expression Blend 4 制作这一动画。所有图片可以点击看大图



        第一步:新建一个 Silverlight 项目,取名为 WaitClock

    image

        第二步:调整控件大小为 160*160,并挑选一张合适的背景图片

    imageimage

        第三步:画好外圈,设置好填充颜色,并把填充颜色转换为资源。然后在连续拖两个椭圆进来,分别设置边距为 25 和 70,并应用 Brush。

          先拖一个 Ring 到 LayoutRoot,并设置 ArcThickness 为 13

          设置好 Ring 的 Gradient Brush(..),两个点分别是 #70FFFFFF #40FFFFFF。再把这个 Brush 转换为静态资源

    imageimageimageimage

        第四步:用 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 可以参考路径标记语法

    imageimageimage

        第五步:制作动画。分别把两个 Path 的旋转中心设置到正确位置。再选择一个 Path,为其增加一个故事版。这时候按下 F6 快捷键可以切换为动画设计模式。

          首先在时间的起始点设置旋转角度为记录当前值,再在 1 秒时间处设置旋转角度为 360。这时候点击播放按钮可以看到大指针旋转一周的动画。

          相同的,可以给第二个 Path 设置旋转动画,与上面不同的是时间间隔为 12 秒,而不是 1 秒。

          现在为了方便区分,非别给两个 Path 命名为 Bigger 和 Smaller。分别给两个故事版命名为 Big 和 Small。

    imageimageimageimage

        第六步:给动画设置重复行为,设置为无限次。

    image

       第七步:增加触发事件。托两个 ControlStoryboardAction 到 UserControl 上,分别设置在 Loaded 事件触发是播放 Big 和 Small 动画。

    imageimageimage

        第八步:完成,现在你可以按下 F5 快捷键在浏览器中看看效果。是不是很简单?

    完整代码下载地址:https://files.cnblogs.com/Aimeast/SLWaitClock.zip

  • 相关阅读:
    Linux 用户和组管理
    Bash 基础特性
    Linux 中常用的基础命令二
    Linux 中常用的基础命令一
    Linux 获取帮助
    Linux 基础入门二
    Linux 基础入门一
    计算机基础
    python 操作元组 列表===python中三大宝刀(字典已经再上一遍 说过)
    mysql 创建数据存储过程的申明
  • 原文地址:https://www.cnblogs.com/Aimeast/p/2197890.html
Copyright © 2011-2022 走看看