放慢补间动画

Question

我创建了一个函数，可以将图形添加到 canvas 舞台并通过补间对其进行动画处理，等待几毫秒然后生成另一个图形

有些事情我可以借助一些帮助来完成，

首先，我需要在资产以正常速度播放几秒钟后将其减速至停止（我正在为道路中间的线条设置动画）

其次当动画开始时屏幕上没有任何东西，因为它们是道路标记必须在开始时显示一些东西

以及关于我如何在动画完成后删除每个项目的任何想法

这是我目前所拥有的

    //this is called from the tick handler
    function lines(){
    duration = 1000;
    spawnCounter--;
    console.log(spawnCounter)
    if(spawnCounter == 0){
    spawnCounter = sNum//20
    bolt = new lib.Bolt();
    bolt.x=280
    bolt.y = 120;
    bolt.rotation = -66;
    stage.addChild(bolt);
    createjs.Tween.get(bolt).to({x:0,y:0, scaleY:.6, scaleX:.6},duration)

            }
        }

Answer 1

删除补间末尾的项目非常简单：

createjs.Tween.get(bolt)
    .to({x:0,y:0, scaleY:.6, scaleX:.6}, duration)
    .call(function(event) {
        stage.removeChild(bolt);
    });

按照您制作的方式放慢整个动画可能会很棘手，因为您可能希望资产以相同的速度放慢速度，所以您不能只更改补间的持续时间。您可能想考虑不为动画使用补间动画，而只是控制勾选中的 "visible" 项目，并在它们太远时将其移除。

我创建了一个快速示例来展示它是如何工作的。 http://jsfiddle.net/wj15awj4/

在某个 "distance" 过去后生成项目
移除超过边缘的项目
根据位置对项目进行缩放和 alpha。比例有点奇怪，因为这条路没有透视。使用 CSS 或 WebGL 转换 canvas 会更好地解决这个问题。

单击道路时，"speed" 向下补间（或向后补间），并且由于项目是根据 "distance" 经过多少创建的，因此它们将继续创建以大致相同的速度，尽管随着时间的推移移动速度变慢。

希望对您有所帮助！

放慢补间动画

Slowing down an animation tween

javascript

animation

createjs