Silverlight初级教程-动画

Silverlight初级教程

动画

在这一节里将要用到在“认识工作区”中提到的时间抽了。这里将和学习flash的过程一样做一个最简单的动画。

silverlight中的动画是以“storyboard”的形式表现出来。“storyboard”你可以认为是flash中的时间轴。  flash中只有一个时间轴,而在silverlight中却可以有多个“storyboard”。

在flash中是有一个帧频的概念的,例每秒12帧、每秒30帧等。而在silverlight中则是完全的基于时间的,例完成一个动画所需的总共时间是10秒。

首先在舞台区域绘制一个圆形,我们将为他做一个移动的动画。  绘制好后调整颜色等属性。在“Objects and Timeline”面版中点击右侧的“+”这个按钮创建“storyboard”。

在弹出的提示框中选择默认选项起名“myStoryboard”。这个在后边控制动画的播放有用。

点击ok,这时大家所熟悉的时间轴出现了。现在的界面可能会有点挤,按“F6”进入动画编辑工作布局。

上图为新出现的时间轴。

这里有三个按钮需要记一下。一个是刚才提到的“+”(创建‘storyboard’),“×”(退出当前的‘storyboard’),最左边的(选择已有‘storyboard’进行编辑)。

下边开始制作动画。

选中刚才绘制的圆形。点击

。这个操作就相当于flash中的插入关键帧。(区别:flash中默认第一帧为关键帧而blend中没有需要手动的创建一个)

点击后在时间轴上回出现一个白色的小点。

白色的小点上有一个黄色的线。这个和flash中的指针是同样的一个东西。

将黄线移动到“2”的位置,并再次点击

,插入关键帧。

选中圆形向左拖动一段距离。

这里注意观察下面版。"0:02.000",意思为这段动画用2秒的时间来播放。你也可以修改播放的时间,就在时间轴面版的下边有一个缩放时间轴百分比的地方。

你可以将数值调大,这样方便操作。

这里我调整为300。在“2”个位置选中小白点并向前拖拽到“0.5”位置。  好了这样完成这个动画就只需要0.5秒了。

选中第一个小白点。点击右侧属性栏。

这个和flash中的缓动是一样的。可以自己调整曲线。

切换到“拆分视图”用鼠标选中代码部分的“myStoryboard”。这时注意右边属性栏发生的变化。(经过我多次试验才找出了可视化设置Storyboard属性的方法)

有两个属性  “是否自动回放”以及“循环次数”。

好了点击“x”退出动画编辑状态。按“F6”还原界面布局。

做到这里只是建立好了“Storyboard”。其不会自动的去播放的。   要让“Storyboard”播放有两个方法。一个是在XAML中描述(比较复杂)。另一个就是一句代码就好象flash中的“_root.play()”一样。

在初级教程中就介绍简单的。

打开右边的project选项卡

用记事本(或你喜欢的任意一款文本编辑器)打开page.xaml.cs文件。

        public Page()
        {
            // Required to initialize variables
            InitializeComponent();
            //增加下边的代码
myStoryboard.Begin();
        }

编辑好后回到blend中   按“F5” 编译预览动画。

你也可以在做移动动画的同时试试改变圆形的颜色等属性。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

用Mockplus教你使用属性面板的设置交互状态

使用Mockplus软件有段时间了,期间有很多使用者问我组件的设置交互状态怎么用(当然有很多人看了都会用),我就有想把怎样使用设置交互状态的方法记录下来,供初学...

2815
来自专栏前端架构与工程

利用max-height适应多尺寸屏幕的下拉动画

移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。比如我们要制作以下动画:红框2为详细内容,默认收起;红框1处...

1858
来自专栏向治洪

CollapsingToolbarLayout使用

我们来看一下CollapsingToolbarLayout的使用场景。 ? CollapsingToolbarLayout 可以看到,Toolbar的标题放...

2246
来自专栏猛牛哥的博客

快手( AAuto Quicker ) v6.5.06更新记录

1313
来自专栏程序你好

CSS: :before and :after 使用

1043
来自专栏Google Dart

AngularDart Material Design 复选框 顶

用户可以点击该复选框以选中或取消选中它。 通常使用复选框允许用户从一组中选择多个选项。如果您有一个ON/OFF选项,请避免使用单个复选框并使用material-...

1104
来自专栏练小习的专栏

css实现未知宽度的正方形需求

今天群里有哥们问了一下,百分比宽度的正方形如何用css实现。其实就是不定宽的正方形如何用css实现。 第一个方法利用图片的等比例缩放,用base64写一个1*1...

2366
来自专栏前端侠2.0

转:为什么 $("a").click()无效

我尝试过多次用jQuery模拟用户点击a标签的功能,但都没有成功,并且困扰了很久。前段时间的一次发呆,冒出了新的想法,于是就动手进行了测试。

4993
来自专栏施炯的IoT开发专栏

Windows Mobile上的HTML解析器

Matjaž Prtenjak提出这个移动设备上HTML解析器、并表现在HTML Label上的最初目的,就是为了能够在界面上实时地改变一些控件上的文字内容和...

2125
来自专栏小白课代表

必备!OCR文字识别、截图、贴图、取色、翻译、检查错误...这绝不仅仅是一款OCR识别工具!

手机端的OCR文字识别工具给大家推荐过白描和白描取字,PC端以前推荐过天若OCR,当时的感觉时这是一款ABBYY FineReader不错的替代品,但是经过几个...

1.1K2

扫码关注云+社区

领取腾讯云代金券