AS遮罩效果

最新推荐文章于 2025-03-12 08:51:54 发布

原创最新推荐文章于 2025-03-12 08:51:54 发布 · 792 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#图形 #function

图形动画设计专栏收录该内容

11 篇文章

订阅专栏

博客介绍了动态曲线的绘制方法。先通过半径配合三角函数扫描一周获取控制点，再取相邻控制点连线中点得到锚点坐标，接着用curveTo函数绘制曲线。要使曲线动态变化，使用onEner刷新，每次绘图前重新计算控制点和锚点。

点击浏览该文件（遮罩）

代码显得有些烦琐，其中绘制内框外框的部分完全可以不要
主要步骤：

先将所有控制点弄出来（和描点画圆的方法一样，用半径配合三角函数扫描一周），
然后根据控制点来求得锚点坐标（锚点必须位于相邻两个控制点的连线上，本例中用的是最简单的取中点的方法）
最后就是绘制曲线，curveTo(控制点x,控制点y,锚点x,锚点y）
要使曲线变成会动的，就是用onEner刷新了，每次绘图前都重新计算控制点，锚点

baseH=10;
sm=30;
r=100;
dt=2*Math.PI/sm
dot_p=[];//控制点数组
dot_m=[];//锚记点数组
//算出数据
for(i=0;i<sm;i++){
dot_p[i]={};
dot_m[i]={};
}
//用3个MC分别绘制三条曲线
this.createEmptyMovieClip("line_p",baseH++);//用于绘制外框
this.createEmptyMovieClip("line_m",baseH++);//用于绘制内框
this.createEmptyMovieClip("line_m2",baseH++);//用于绘制平滑曲线框
//随机变化
var j=0
var k=3
onEnterFrame=function(){
j++;
//鼠标跟随
for(i=0;i<sm;i++){
r2=r*Math.abs(Math.sin(j*Math.PI/180+i*i*Math.PI/6))+70;
dot_p[i]._x=r2*Math.sin(i*dt);
dot_p[i]._y=r2*Math.cos(i*dt);
}
for(i=0;i<sm;i++){
//曲线锚记点
if(i==0){
dot_m[sm-1]._x=(dot_p[sm-1]._x+dot_p[i]._x)/2;
dot_m[sm-1]._y=(dot_p[sm-1]._y+dot_p[i]._y)/2;
}else{
dot_m[i-1]._x=(dot_p[i-1]._x+dot_p[i]._x)/2;
dot_m[i-1]._y=(dot_p[i-1]._y+dot_p[i]._y)/2;
}
}
//清除图形
line_p.clear();
line_m.clear();
line_m2.clear();
//设置绘图模式
line_p.lineStyle(0,0x0033cc,50);
line_m.lineStyle(0,0x33cc00,50);
line_m2.lineStyle(2,0xcc3300);
//绘制图形
for(i=0;i<sm;i++){
if(i==0){
line_p.moveTo(dot_p[i]._x,dot_p[i]._y);
line_m.moveTo(dot_m[i]._x,dot_m[i]._y);
line_m2.moveTo(dot_m[i]._x,dot_m[i]._y);
line_m2.beginFill(0xaa5500,30);
}else{
//绘制外框(直线连接控制点）
line_p.lineTo(dot_p[i]._x,dot_p[i]._y);
//绘制内框（直线连接锚记点）
line_m.lineTo(dot_m[i]._x,dot_m[i]._y);
//绘制曲线（曲线连接锚记点）
line_m2.curveTo(dot_p[i]._x,dot_p[i]._y,dot_m[i]._x,dot_m[i]._y);
}
}
//
//环形的最后闭合
//绘制外框(直线连接控制点）
line_p.lineTo(dot_p[0]._x,dot_p[0]._y);
//绘制内框（直线连接锚记点）
line_m.lineTo(dot_m[0]._x,dot_m[0]._y);
//绘制曲线（曲线连接锚记点）
line_m2.curveTo(dot_p[0]._x,dot_p[0]._y,dot_m[0]._x,dot_m[0]._y);
line_m2.endFill();
//
}
//the end

点击浏览该文件