带缓冲的滚动条-教程

作者：袖梨 2022-07-02
普通的滚动条在内容移动的时候看上去很生硬，怎么让它看上去舒服一点呢？加上缓冲！这样看上去会非常流畅舒服。
总共只有两个元件和一个动态文本框（为了能使用遮罩把字体都嵌入了）：
1，滑块，实例名move_bar；
2，一个遮罩元件，用来控制显示内容区域的大小，实例名mask；
3，动态文本实例名为txt。
下面是代码，写在桢上就行了

首先定义滑块的移动范围
barUp = 67;
barDown = 204;
barPos = 446;
//然后是缓冲的程度，速度值越大缓冲越明显
speed = 6;
//然后这个是计算比例，也就是滑槽和内容的可移动长度之比
prop = (txt._height-mask._height)/(barDown-barUp);
//记录下内容的最初位置
txtOrigin = txt._y;
//在滑块上按下的时候开始拖动，down用来判断是否处在拖动中
move_bar.onPress = function() {
move_bar.startDrag(0, barPos, barUp, barPos, barDown);
down = 1;
};
//鼠标松开的时候停止拖动，down变为0
move_bar.onMouseUp = function() {
move_bar.stopDrag();
down = 0;
};
//这个是关键，enterFrame加上if(down)，也就是在拖动的时候不停地执行if里面的程序
this.onEnterFrame = function() {
if (down) {
//将此时滑块的y值减去滑块上限，计算出滑块向下移动的距离，乘以之前算出的比例，就得到了文本内容应该向上移动的距离
txtMove = (move_bar._y-barUp)*prop;
//原来的位置减去距离，得到文本内容现在应该在的位置，也就是目标位置
txt.m_y = txtOrigin-txtMove;
}
//文本内容y值的每一次变化量=（目标位置-当前位置）除以缓冲速度。注意这一句不能放在if循环里面，否则鼠标一松开缓冲就停止了
txt._y += (txt.m_y-txt._y)/speed;
};

相关文章

精彩推荐