Cocos creator 立体滚动Scrollview效果

效果如图

思路：

1.创建 Scrollview组件

2.编写 updateView 函数绑定在 scrollview 的 scrolling 事件上

3.每当 scrolling 的时候，遍历所有 item，根据椭圆函数设置每个 item 的大小

4.中间被展示的高亮，其余不亮，可以在 srollview 放一个AABB 盒，判断每个 item 的 AABB 和这个rect 是否相交

参考代码如下：

updateScrollView() {

    let items = this.scrollView.content.children;
    items.map(item => {
        let viewPos = this.getPositionInView(item);
        let scaleX = this.getScaleRate(Math.abs(viewPos.x), 1);
        let scaleY = this.getScaleRate(Math.abs(viewPos.x), 1);
        item.setScale(scaleX, scaleY);

        let isShow = this.isOnShow(item);
        if (isShow) {
            let itemIndex = items.indexOf(item);
            this.checkCanPlay(itemIndex);
            item.getChildByName('shadow').opacity = 0;
            this.currentItem = item;

        } else {
            item.getChildByName('shadow').opacity = 45
        }
    });
},

getPositionInView(item) {
    let worldPos = item.parent.convertToWorldSpaceAR(item.position);
    return this.scrollView.node.convertToNodeSpaceAR(worldPos);
},
getScaleRate(posX, rate) {
    return -rate * posX / 2000 + 1;
},

isOnShow(item) {
    return this.middleItemRect.intersects(item.getBoundingBoxToWorld())
},