视差滑动长片动画CC和TweenJs

Question

我正在动画CC中创建一个滑动的电影剪辑。我有一个19200像素宽的电影剪辑。如何在点击右箭头时将电影剪辑1920向左移动( TweenJS )，并在点击左箭头时将相同的电影剪辑1920向右移动( TweenJS )？

这是迄今为止我在动画CC HTML5画布中所做的：

/* 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))
}

Answer 1

1)在你的代码中，你有两个同名的函数，但是里面有不同的代码。在添加侦听器的代码中指定了相同的名称。因此，两个侦听器将仅链接到其中一个函数(具体地说，是第二个函数，因为它是最后声明的)。

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参数中，在指定ease之前，需要添加createjs

nextMouseClickHandler()中的补间

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));
}

此代码在动画CC中工作，复制您指定的MovieClip名称。