# 滤镜效果 [想要了解更多Mugeda功能?>>>猛戳我,学习更多教程](Mugeda百科全书——文本教程目录.md) * * * * * 编辑地址: http://beta.mugeda.com/animation/edit/d76c44f6 演示地址:http://b13b5c18.u.mgd5.com/campaigns/509fedc14dcb68d851000007/20170506014321/590cb1728cd9465e6e6e5ba1/index.html 目前支持如下滤镜: 1) 灰度 Grayscle 2) 亮度 Brightness 3) 对比度 Contrast 4) 饱和度 Saturation 5) 色调 Hue 6) 模糊 Blur 7) 阴影 Shadow 8) 泛黄做旧 Sepia 9) 负片 Invert 为了给元素添加滤镜,选中元素后,在属性面板选择想要添加的滤镜效果,然后点击“+”图标即可将指定的滤镜效果添加到元素上。 ![](https://box.kancloud.cn/261e4301ac27e66440ac269b121375ff_376x318.gif) 根据需要,可以添加1个或者多个滤镜效果。每一个添加的滤镜都可以通过调节滤镜参数来调整滤镜的渲染效果。例如,模糊滤镜可以调节模糊程度。其中,阴影滤镜包含有多个参数,可以将鼠标移动到阴影效果上显示参数并编辑。 ![](https://box.kancloud.cn/1243401b0fb10e41eefe64b82d3ce2f7_253x168.gif) 如果不想要使用一个已经添加的滤镜效果,可以通过对应的滤镜效果右侧的删除按钮移除。 ![](https://box.kancloud.cn/fbabf4ae72a4bcb5d2761e6f24b70a9f_319x124.gif) 滤镜效果也支持动画。即:在关键帧上添加的滤镜效果,可以在关键帧动画时进行插值,实现滤镜效果的动画渲染。在动画插值过程中,如果某个关键帧上没有添加指定的滤镜,那么将会采用默认滤镜效果参数进行插值。例如: 如果第1个关键帧添加了100%的灰度,而第2个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认灰度(0%)进行插值; 如果第2个关键帧添加了8像素的模糊,而第1个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认模糊(0像素,即没有模糊)进行插值; 其它的以此类推。 目前滤镜效果的局限是,由于安卓和iOS手机上仅支持CSS滤镜,不支持Canvas滤镜, 因此手机上需要用Canvas进行渲染的部分(例如遮罩和截屏)暂时不支持滤镜,这一 点在使用中需要注意。 观看本节视频教程: http://medu.mugeda.com/lesson/5948eb0f9aeb7060c44f03ec