求大佬给一个滚动列表动画的思路

Creator 2.x
#1

e07b3ca1-ec42-40d9-993e-f6d8a97750ed.gif800×600 119 KB

creator自带的左边这样的，但策划想做出右边那样的，有没有好的方法啊
我尝试着将节点提到和scrollview中content同级的位置，通过监听滚动层的scroll-ended事件，手动调用各个节点的runAction方法进行moveto操作，代码如下：

const {ccclass, property} = cc._decorator;

@ccclass
export default class ScrollViewAni extends cc.Component {
    scrollView:cc.ScrollView = null;
    maskChild:cc.Node[] = [];
    onLoad(){
        this.scrollView = this.getComponent(cc.ScrollView);
        this.node.on("scroll-ended",this.onScrollingEnd.bind(this));
    }
    start () {

    }
    startPos = cc.v2(0,0);
    onScrollingEnd(){
        if(this.maskChild.length<1){
            this.maskChild = cc.find("view",this.node).children;
        }
        let offset = this.scrollView.getScrollOffset();
        let index = 0;
        for(let i =0;i<this.maskChild.length;i++){
            if(this.scrollView.horizontal){
                let node:any = this.maskChild[i];
                if(!node.oldX){
                    node.oldX = node.x;
                }
                let posX = node.oldX+offset.x;
                let time;
                if(posX>0){
                    time = 0.1*(this.maskChild.length-index);
                }else{
                    time = 0.1*index;
                }
                node.stopAllActions();
                node.runAction(cc.sequence(cc.delayTime(time),cc.moveTo(0.2,posX,node.y)));
                index++;
            }
        }
        this.startPos = offset;
    }
}

但是效果并不是很好，哪位大佬有好的方法么？

#2

把策划拉出去砍了吧~

1赞
#3

拿刀架策划脖子上

#4

你这个是自动滚动的效果还是通过手指滑动的效果？

#5

手指滑动

#6

其实接到这个需求我想发二维码给策划的，但是没做出来就不好发了

#7

用 scrollview 挺麻烦的感觉，自己仿造 scrollview 重写个列表吧。

#8

mark 有没有大神

#9

这个还是自己重新写一个组件吧

#10

这好像是逐行往上拉的效果，支持那种可以随意滑动并且还带惯性滑动的么？要是支持，期望效果是？

#11

是不是就在刚拖动的事件里对这些item加一个放大缩小的action。。。

#12

有点难，效果调起来很麻烦

#13

没有吧，只是需要item一个接一个的位移就好了

#14

理论上不需要支持，策划自己也不确定，只是在网上找到这种效果觉得好就让我尝试下

#15

还是把策划打了比较好，那个列表看起来就不好用

#16

将scrollview移动一个节点，改成移动多个节点

#17

我的想法和这个差不多，监听scrollview移动的节点位置，然后自己操作多个节点的移动，就是效果太难调了，总感觉不对

#18

一个样例，只是给与借鉴效果部分，效果参数可以微调。这里也有bug，你需要自行判断是否在最顶部和最底部。

QQ截图20190724125644.png1072×833 28.2 KB
QQ截图20190724125657.png1235×936 43.3 KB

2赞
#19

mark，等一个大佬

#20

mySR.zip (755.2 KB)

我来抛砖引玉了，未完成版，还有些bug。

首先继承extends: cc.ScrollView,

重写
setContentPosition(position) {
if (position.fuzzyEquals(this.getContentPosition(), EPSILON)) {
return;
}
this.content.setPosition(position);

    var c = this.content.childrenCount;
    for (var i = 0; i < c; i++) {
        var pos = this.content.children[i].position;
        pos.y = ((-100 * i) +(-position.y)*i/10);
        this.content.children[i].setPosition(pos);
    }

    this._outOfBoundaryAmountDirty = false;

    
},
1赞