silverlight中"制作逐帧动画"/"播放gif"收集

“逐帧动画”与“播放GIF”貌似二个风马牛不相干的问题,其实不然!

因为silverlight中的image控件不支持直接把gif动画做为source,所以象做动画常用的"走路的小人","加载loading小动画"...这类经典gif素材,无法直接使用,只能转化为逐帧动画来处理。 

nasa(silverlight MVP)给出于二种经典的办法: 

1.类似老式电影放胶片的原理,用storyboard机制实现

原文:https://cloud.tencent.com/developer/article/1021058

将gif中的素材用photoshop,fireworks之类的工具把各层提取出来,拼接成一张图,然后拿一个矩形做为蒙版,图片每隔一定时间向左移动一定位置即可。

示意图(颇有css中背景定位的意思):

2.用ImageBrush定时填充指定矩形

原文:https://cloud.tencent.com/developer/article/1020644

同样将各帧素材先准备好,用timer定时按顺序切换矩形的imageBrush

3.跟2中所提到的方法原理差不多,定时更换Image的source属性

出自 http://www.cnblogs.com/024hi/archive/2009/09/14/1566653.html

这里用到了园子里另一位mvp jillzhang的开源gif处理库,借助这个工具类,将gif各帧取出形成一个WriteableBitmap数组,然后用timer定时按顺序取出该数组元素做为image的source轮换

不错的在线示例 http://joestegman.members.winisp.net/SL3/GIFDecoderSample/Default.html

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Nian糕的私人厨房

《精通CSS:高级Web标准解决方案》 知识点汇总

本篇的内容到这里就全部结束了,常用的 CSS 样式重置文件我已经发到了 GitHub Reset.css,本篇文章知识点来源 精通CSS:高级Web标准解决方案...

953
来自专栏JackieZheng

可视化工具solo show-----Prefuse自带例子GraphView讲解

  2014.10.15日以来的一个月,挤破了头、跑断了腿、伤透了心、吃够了全国最大餐饮连锁店——沙县小吃。其中酸甜苦辣,绝不是三言两语能够说得清道的明的。校招...

4906
来自专栏华章科技

10个非常实用的Excel技巧

Excel可以说是MS Office系列中最神奇也最重要的软件。对于专业的职场人士,工作中经常需要用到Excel来分析数据。亲们别再傻傻地用鼠标点来点去啦,用这...

1568
来自专栏葬爱家族

Android高级动画(3)

上一篇文章我们讲了Android中的矢量动画,虽然文中展示的Demo并不多,但是相信大家还是体会到了矢量动画的强大。这里再做一个温故总结:

1431
来自专栏十月梦想

CSS3动画animation

        animation和上次说的transform动画有点不同,需要进行定义动画规则,而animation则无需受体,自动执行动画,translat...

973
来自专栏牛客网

新鲜出炉的百度-春招-前端面经

1. 自我介绍 2. 项目经验,我说项目名说错了,然后又说了一遍,面试官不知道什么心态的鬼魅一下 3. Html5不同于以前版本的特点 4. Html5新增ap...

37211
来自专栏程序员互动联盟

【专业文章】六种常见的HTML5写法误用(二)

四、figure元素的常见错误 figure以及figcaption的正确使用,确实是难以驾驭。让我们来看看一些常见的错误, 不是所有的图片都是figure 上...

2865
来自专栏Java3y

AJAX应用【股票案例、验证码校验】

股票案例 我们要做的是股票的案例,它能够无刷新地更新股票的数据。当鼠标移动到具体的股票中,它会显示具体的信息。 我们首先来看一下要做出来的效果: ? 服务器端分...

44610
来自专栏tkokof 的技术,小趣及杂念

HGE系列之三 渐入佳境

前两次“乱七八糟”的讲述了一些HGE的基础知识,不知看过的朋友有何感想,反正我自己都觉着有些不知所谓(!),但本着坚持到底的原则,今天继续献上拙文一篇,如果有朋...

852
来自专栏Google Dart

Flutte部件目录-基本部件(一)

一个容器首先用padding包围子组件(由decoration中出现的所有边框填满),然后将附加constraints应用于填充范围(将width和height...

3532

扫码关注云+社区

领取腾讯云代金券