0

我正在 Animate CC 中创建一个滑动影片剪辑。我有一个 19200 像素宽的影片剪辑。当单击右箭头时，如何将动画剪辑 1920 向左 TweenJS 以及单击向左箭头时如何将相同的动画剪辑 1920 向右 TweenJS？

这是我目前在 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))
}
4

1 回答 1

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

上一页MouseClickHandler()

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

function prevMouseClickHandler() {
    /* Code */ 
}

2）to在两个函数中Tweens的方法上，在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));
}

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

于 2017-07-05T14:09:18.713 回答