Parallax Sliding long movieclip Animate CC和TweenJs

时间:2017-07-04 15:05:01

标签: jquery-animate animate-cc tweenjs

我在Animate CC中创建滑动动画片段。我有一个19200像素宽的影片剪辑。当点击右箭头时,如何将动画片段1920向左移动到左边,当单击左箭头时,如何将同一动画片段1920向右移动?

以下是我目前在Animate CC HTML5 Canvas中所拥有的内容:

/* Mouse Click Event
Clicking on the specified symbol instance executes a function in which you can add your own custom code.
*/

this.next.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    createjs.Tween.get(this.movieClip_1).to({x:-1920}, 500, Ease.getPowIn(2.2))
}

this.prev.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    createjs.Tween.get(this.movieClip_1).to({x:1920}, 500, Ease.getPowIn(2.2))
}

1 个答案:

答案 0 :(得分:1)

1)在您的代码中,您有两个名为equal的函数,但内部代码不同。在侦听器添加代码上指定了相同的名称。因此,两个侦听器都只链接到其中一个函数(特别是第二个函数,因为它们是最后一个函数)。

this.next.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    /* Code */
}

this.prev.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    /* Code */
}

要解决这个问题,更改两个函数的名称就足够了。当然,您必须更改侦听器添加代码中的名称。

nextMouseClickHandler()

this.next.addEventListener("click", nextMouseClickHandler.bind(this));

function nextMouseClickHandler() {
    /* Code */
}

prevMouseClickHandler()

this.prev.addEventListener("click", prevMouseClickHandler.bind(this));

function prevMouseClickHandler() {
    /* Code */ 
}

2)在两个函数的补间的to方法中,在ease参数中,在指定简易性之前,您需要添加createjs

nextMouseClickHandler()

中的Tween
createjs.Tween.get(this.movieClip_1).to({x:-1920}, 500, createjs.Ease.getPowIn(2.2));

prevMouseClickHandler()

中的补间
createjs.Tween.get(this.movieClip_1).to({x:1920}, 500, createjs.Ease.getPowIn(2.2));

解决这两个问题将产生以下代码:

this.next.addEventListener("click", nextMouseClickHandler.bind(this));

function nextMouseClickHandler() {
    createjs.Tween.get(this.movieClip_1).to({x:-1920}, 500, createjs.Ease.getPowIn(2.2));
}

this.prev.addEventListener("click", prevMouseClickHandler.bind(this));

function prevMouseClickHandler() {
    createjs.Tween.get(this.movieClip_1).to({x:1920}, 500, createjs.Ease.getPowIn(2.2));
}

此代码适用于Animate CC,复制您指定的MovieClip名称。