滤镜效果

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程


编辑地址:
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

为了给元素添加滤镜,选中元素后,在属性面板选择想要添加的滤镜效果,然后点击“+”图标即可将指定的滤镜效果添加到元素上。

根据需要,可以添加1个或者多个滤镜效果。每一个添加的滤镜都可以通过调节滤镜参数来调整滤镜的渲染效果。例如,模糊滤镜可以调节模糊程度。其中,阴影滤镜包含有多个参数,可以将鼠标移动到阴影效果上显示参数并编辑。

如果不想要使用一个已经添加的滤镜效果,可以通过对应的滤镜效果右侧的删除按钮移除。

滤镜效果也支持动画。即:在关键帧上添加的滤镜效果,可以在关键帧动画时进行插值,实现滤镜效果的动画渲染。在动画插值过程中,如果某个关键帧上没有添加指定的滤镜,那么将会采用默认滤镜效果参数进行插值。例如:

如果第1个关键帧添加了100%的灰度,而第2个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认灰度(0%)进行插值;

如果第2个关键帧添加了8像素的模糊,而第1个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认模糊(0像素,即没有模糊)进行插值;

其它的以此类推。

目前滤镜效果的局限是,由于安卓和iOS手机上仅支持CSS滤镜,不支持Canvas滤镜,
因此手机上需要用Canvas进行渲染的部分(例如遮罩和截屏)暂时不支持滤镜,这一
点在使用中需要注意。

观看本节视频教程:
http://medu.mugeda.com/lesson/5948eb0f9aeb7060c44f03ec