一镜到底实现效果思路求教

Creator 3.x
#1

https://resources.easy-h5.cn/WLZ/JiMu/index.html

如链接所示， 长图滚动的效果是应该用scrollView实现吗？

那如何控制到播放动画的节点 才播放动画呢？

求做过的大佬指教一下

#2

这根据滑动距离scrollTop就能做吧，动画的位置y都是固定的

#3

好像不太行呢，这个动画往上滚动 还会倒着播回来的

#4

update中处理，或者监听scrollview的content位置变化
contentY < 500, scale = 0;
contentY > 800, scale = 1;
scale = (contentY - 500)/300;

#5

感谢感谢 我试试

#6

目前看效果应该是自己根据相对位置调整帧动画或者其它动画或者替换图片达到的效果

#7

嗯， 就是在对应位置播对应的动画， 不太清楚位置怎么控制动画的

#8

cc.Canvas.instance.node -> scrollNode里几个page里有个pageXDialogbubbleY，看起来是自定义的class，但是有个cc.Animation属性，应该是根据scroll设置动画帧吧
可以在他js里搜一下

#9

有段这样的代码

bindAnimation: function(e, t, n, o) {
                if (void 0 === t && (t = 0),
                this._isNeedLoad(e))
                    return this._needLoadQuene.push(["bindAnimation", e, t, n, o]),
                    this;
                var r = i.formatNode(e);
                this._nodeArr.push(r);
                var a = r.getComponent(cc.Animation);
                a.play().speed = 0;
                var c = t + a._clips[0].duration;
                return this._judgeEndTimeOverflow(e, c),
                this._aniArr.push({
                    action: function(e) {
                        var t = s.call(this, e, n, o);
                        void 0 !== t && this.comp.setCurrentTime(Math.abs(t - .005))
                    },
                    endTime: c,
                    nodeOrStr: e,
                    node: r,
                    mgr: this,
                    startTime: t,
                    comp: a
                }),
                this
            },
            bindSpine: function(e, t, o, r) {
                if (void 0 === t && (t = 0),
                this._isNeedLoad(e))
                    return this._needLoadQuene.push(["bindSpine", e, t, o, r]),
                    this;
                var a = i.formatNode(e);
                this._nodeArr.push(a);
                var c = new n(a)
                  , h = t + c.getDuration();
                return this._judgeEndTimeOverflow(e, h),
                this._aniArr.push({
                    action: function(e) {
                        var t = s.call(this, e, o, r);
                        void 0 !== t && this.track.setTime(t)
                    },
                    endTime: h,
                    nodeOrStr: e,
                    track: c,
                    node: a,
                    mgr: this,
                    startTime: t
                }),
                this
            },

大概就是这个

void 0 !== t && this.comp.setCurrentTime(Math.abs(t - .005))
void 0 !== t && this.track.setTime(t)
#10

代码都贴出来了 哈哈， 大佬 太厉害了， 感谢感谢