曲线背景图片的使用方法

mugeda

对曲线使用的一种场景是设置曲线的背景图片，实现的效果是，曲线图形内的部分会显示出背景图片，而曲线图形外不显示，这样就可以用图形来截取了部分图片显示。

我们通过制作一个动画来演示：

点击工具条上的曲线按钮后，在舞台上画一个曲线图形，如图：



选择该图形，设置属性：先给它设一个背景图片



然后，图片位置选中心，图片尺寸选原始尺寸，水平偏移和垂直偏移都为0，效果如图：



通过改变水平偏移和垂直偏移可以来平移背景图片在曲线图形内的坐标位置。比如，将水平偏移设为100，垂直偏移设为80，效果如图：



我们把水平偏移和垂直偏移设回0，在演示下改变图片位置属性来看各种设置的效果，当图片位置设为左时：



当图片位置为左上角：



图片位置设为：上



图片位置为右上角



图片位置设为右



图片位置设为右下角

图片位置设为下



图片位置设为左下角：

QQ图片20151027165233

以上是设置图片位置的效果图，现在我们把图片位置设为中心，然后改变图片尺寸，看下不同选项的效果。选择等比例覆盖：



图片尺寸设为填充：



图片尺寸设为平铺：



以上是各种属性设置的不同效果，在实际使用中可以结合使用达到自己想要的需求效果。

曲线背景图片的一个很重要的使用场景是配合前面章节讲过的变形动画实现简单的遮罩，这个很实用。

我们就在这个例子中插入变形动画，如图：



我在进度动画的中间一个修改了曲线图形的形状，从而实现动画播放是图片逐渐收缩有逐渐打开的效果，起到一种简单遮罩的目的。

变形动画的教程：http://support.mugeda.com/?page_id=2696

演示动画预览地址：

http://cn.mugeda.com/client/preview_css3.html?id=e9d9c399

演示动画编辑地址：

http://cn.mugeda.com/animation/edit/e9d9c399