用silverlight做动画-相机

用silverlight做动画-相机

适合初学者学习

做一个相机的动画

和做flash动画一样,准备好素材

将素材放入项目中

开始正式制作前为了方便以后重用,就把这个动画做成usercontrol(和flash中的‘MovieClip’概念是一样的)

创建一个UserControl

图片放入舞台中并且调整好位置

用钢笔在最上层画一个图像做遮罩使用,和flash中的概念一样。

讲上边的小图放入一个Canvas容器中

选中Canvas容器和刚刚画出的图形制作遮罩 将刚刚遮罩过的Canvas容器再复制两个以便做动画使用

创建StoryBoard

按快捷键F6调整布局

结合图层的视觉效果,巧妙的控制图片的位移

设置StoryBoard的循环属性为永远循环

为了增强动画效果,可以上相机上的小灯闪一闪,在相机的上方画出一个红色渐变的圆形

选择刚才制作好的StoryBoard,将其加入进去,并制作动画

控制其整体的透明度属性

将制作的相机UserControl放入放入Page页面中

为相机起名字,以便程序控制

在Page.cs文件中写入代码

至此动画制作完毕,按F5编译运行。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏守候书阁

CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

66140
来自专栏GreenLeaves

CSS-DOM介绍

三位一体的网页: 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体: 1、结构层: 结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些...

19780
来自专栏葡萄城控件技术团队

给萌新的Flexbox简易入门教程

近几年,CSS领域出现了一些复杂的专用布局工具,用以代替原有的诸如使用表格、浮动和绝对定位之类的各种变通方案。Flexbox,或者说是弹性盒子布局模块(Flex...

9620
来自专栏前端知识分享

第54天:原生js实现轮播图效果

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

58710
来自专栏小筱月

分享一次纯 css 瀑布流 和 js 瀑布流

现在百度图片,360 图片搜索,都是以一种瀑布流的形式展示,那么接下来,分享一波纯 css 瀑布流 和 js 瀑布流

34640
来自专栏超然的博客

css 定位

正常文档流模式下,后面的dom元素覆盖前面的,如果将前面的元素设置了relative将提升它自身的层级

27110
来自专栏葡萄城控件技术团队

React Native基础&入门教程:初步使用Flexbox布局

14050
来自专栏小狼的世界

不同浏览器对于换行的处理

在一个容器中,如果设定了宽度,一般来说自动换行都是比较正常的,但是如果遇到了连续的英文字符,这个问题就会让人头疼。这不,我们部门的用户在测试的时候输入连续的字符...

14220
来自专栏九彩拼盘的叨叨叨

前端文章收藏

15120
来自专栏袁佳平的专栏

周杰伦读心术背后的技术实现

前言   在技术细节的内容开始之前,您可以先通过下方的二维码再次体验这个魔术。 image.png image.png 一、HTML 1.设置meta <m...

76980

扫码关注云+社区

领取腾讯云代金券