coverFlow图片轮播

Creator 2.x
#8

感谢，研究下。

#9

感谢，有时间研究下。

#10

楼主实现了么？

#11

没实现creator的，找了一个jquery的插件

#12

在背景正中间定一个参照点，在update函数里面根据scrollView上各个子元素与该参照点的距离动态修改子元素的scaleX，具体公式要自己计算。我做过一个滑动时动态改变子元素大小的scrollView，与这个需求应该差不多，但是这里楼主的需求要改变的scaleX有正有负，公式要复杂一些。

2赞
#13

高人啊，确实可以变形效果。提供的是webgl模式的，我添加了一个native模式的，效果怎么不一样呢，变成了三角形？
修改后的代码：

    _use: function()
    {
        let _trapezoidal_frag = this.is_left ? _trapezoidal_frag_left: _trapezoidal_frag_right;
        this._program = new cc.GLProgram();
        if (cc.sys.isNative) {
            cc.log("use native GLProgram");
            this._program.initWithString(_default_vert_no_mvp, _trapezoidal_frag);
            this._program.link();
            this._program.updateUniforms();
            this._uni_scale = this._program.getUniformLocationForName("scale");
            this._program.setUniformLocationWith1f(this._uni_scale, this.scale);
            this.setProgram( this.node._sgNode, this._program );
        }else if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) {
            cc.log("use webgl GLProgram");
            this._program.initWithVertexShaderByteArray(_default_vert_no_mvp, _trapezoidal_frag);
            this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);
            this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);
            this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);
            this._program.link();
            this._program.updateUniforms();
            this._uni_scale = this._program.getUniformLocationForName("scale");
            this._program.setUniformLocationWith1f(this._uni_scale, this.scale);
            this.setProgram( this.node._sgNode, this._program );
        }
    },
    setProgram:function (node, program) {
        if (cc.sys.isNative) {
            var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(program);
            node.setGLProgramState(glProgram_state);
        } else if (cc._renderType === cc.game.RENDER_TYPE_WEBGL){
            node.setShaderProgram(program);
        }

        let children = node.children;
        if (!children) {
            return;
        }
    
        for (let i = 0; i < children.length; i++)
        {
            this.setProgram(children[i], program);
        }
    },

nativeflow.jpg1712×776 212 KB

webglflow.jpg2018×840 275 KB

1赞
#14

改成如下代码就可以了，同webgl的效果：

 _use: function()
    {
        let _trapezoidal_frag = this.is_left ? _trapezoidal_frag_left: _trapezoidal_frag_right;
        this._program = new cc.GLProgram();
        if (cc.sys.isNative) {
            cc.log("use native GLProgram");
            this._program.initWithString(_default_vert_no_mvp, _trapezoidal_frag);
            this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);//
            this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);//
            this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);//
            this._program.link();
            this._program.updateUniforms();  
            this.setProgram( this.node._sgNode, this._program );
        }else if (cc._renderType === cc.game.RENDER_TYPE_WEBGL) {
            cc.log("use webgl GLProgram");
            this._program.initWithVertexShaderByteArray(_default_vert_no_mvp, _trapezoidal_frag);
            this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);
            this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);
            this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);
            this._program.link();
            this._program.updateUniforms();
            this.setProgram( this.node._sgNode, this._program );
        }
    },
    setProgram:function (node, program) {
        if (cc.sys.isNative) {
            var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(program);      
            glProgram_state.setUniformFloat( "scale" , this.scale);//
            node.setGLProgramState(glProgram_state);
        } else if (cc._renderType === cc.game.RENDER_TYPE_WEBGL){
            this._uni_scale = program.getUniformLocationForName("scale");
            program.setUniformLocationWith1f(this._uni_scale, this.scale);
            node.setShaderProgram(program);
        }
        let children = node.children;
        if (!children) {
            return;
        }
        for (let i = 0; i < children.length; i++)
        {
            this.setProgram(children[i], program);
        }
    },
7赞
#15

感谢分享

如何实现弯曲UI？
#16

请问有用c++实现了吗？

#17

请问6楼的js怎么使用？

#18

cocos2djs的有么亲

#19

实现了么

#20

插眼。。。

#21

mark

#22

2.0上可以用吗

#23

MARK

#24

楼主这个效果实现了吗？这个轮播的效果，能提供一下思路吗？

#25

果断战略插眼

#26

mark

#27

新手，请问该如何在cocos creator中使用呢