Blend4精选案例图解教程(二):找张图片玩特效

简介: 原文:Blend4精选案例图解教程(二):找张图片玩特效      Blend中的特效给了我们在处理资源时更多的想象空间,合理地运用特效往往会得到梦幻般效果,本次教程展示对图片应用特效的常规操作,当然特效不仅限于使用在图片上,还也可以应用到动画和视频中。
原文: Blend4精选案例图解教程(二):找张图片玩特效

      Blend中的特效给了我们在处理资源时更多的想象空间,合理地运用特效往往会得到梦幻般效果,本次教程展示对图片应用特效的常规操作,当然特效不仅限于使用在图片上,还也可以应用到动画和视频中。

OK,开始本次旅程

1、 在项目中添加一张现有的图片

18

如果添加的图片大于250KB,会提示推荐把图片嵌入到XAP包中,这样图片在浏览器加载XAP文件时会一起被下载到本地。

19

2、把图片拖到UserControl中

20 21

3、在资源面板中,选择特效(Effect),先体验一下“漩涡”,双击应用。

22 效果:23

对属性进行微调

24 效果:24-1

特效的应用非常简单:应用特效,微调属性。

再看看其他的效果:

25 效果:25-1 (涟漪)

26 效果:26-1 (像素)

27 效果:27-1 (Mono)

其他的特效就不一一展示了,可以找些图片慢慢玩。

这里有一个问题:

我们在选择应用不同特效时,最后应用的特效会把前面的特效覆盖(单重特效),那如果我希望应用多重特效,该如何处理呢?

最简单的方式是为图片添加一个“容器”,在“容器”中再应用一重特效,如此嵌套可实现多重特效。下面来演示操作过程:

4、为图片添加一个容器Canvas

30

5、在容器中应用特效,文档结构如图

31

得到涟漪+像素的双重特效

31-1 

本次教程素材和源码下载

目录
相关文章
|
2天前
|
前端开发 JavaScript iOS开发
精选11款炫酷的前端动画特效分享(附在线演示)
分享11款非常不错炫酷的前端特效源码 其中包含css动画特效、js原生特效、svg特效等 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源
|
8月前
|
人工智能 JSON API
|
10月前
|
前端开发 JavaScript
Threejs入门进阶实战案例(3):视频贴图的解决方案
Threejs入门进阶实战案例(3):视频贴图的解决方案
232 0
|
前端开发 API
canvas深入浅出(三)| 小册免费学
所有的内容都是手动绘制还是有点麻烦,好在canvas支持导入图片,createPattern(image, type),该方法接受两个参数。Image 可以是一个 Image 对象的引用,或者另一个 canvas 对象。Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y 和 no-repeat。
71 0
canvas深入浅出(三)| 小册免费学
|
存储 前端开发 API
canvas深入浅出(四)| 小册免费学
之前三节我们铺垫了canvas的相关知识,这一节我们来“落地”,实现一个五子棋的小游戏
67 0
|
前端开发 API
canvas深入浅出(二)| 小册免费学
上一节最后我们说了一个绘制曲线的API——arc(那个API并不是专门用来绘制圆形,只是使用曲线可以绘制圆形),他还有一个兄弟——arcTo(x1, y1, x2, y2, r),根据当前描点与给定的控制点1连接的直线,和控制点1与控制点2连接的直线,作为使用指定半径的圆的切线,画出两条切线之间的弧线路径
64 0
canvas深入浅出(二)| 小册免费学
|
XML 前端开发 JavaScript
canvas深入浅出(一)| 小册免费学
canvas是为了解决页面只能显示静态图片而出现的一种可以使用JavaScript绘制的HTML标签,它可以接受两个参数width和height(原来有三个,还有一个moz-opaque控制透明度,已经废弃了)
62 0
|
前端开发 数据安全/隐私保护
前端炫酷特效合集
炫酷特效合集 更多可查看源码专区
前端炫酷特效合集
|
算法 Java 计算机视觉
Java实现图片滤镜的高级玩法
Java实现图片滤镜的高级玩法
347 0
Java实现图片滤镜的高级玩法
|
前端开发 Web App开发 HTML5
45个纯 CSS 实现的精美边框效果【附在线演示和源码】【下篇】
  边框效果常用来给图片添加照片效果或用于增强页面内容片断的整体性,在一些团购网站和使用瀑布流布局的网站也经常会使用边框效果。在以前,简单的边框效果使用 CSS 可以轻松实现,但是用到阴影、弯曲和旋转等复杂效果的时候,我们只能使用图片来实现。
2351 0