使用 GreenSock 的 TweenLite 在画布中对图像对象不透明度进行动画处理

Question

我目前正在使用画布构建一个动画横幅。我已经将彩色SVG点图形设置为画布上的Image()对象。我一直在画布上沿着x,y路径动画点，我希望这些点在动画结束时淡出…

我似乎不知道如何使用TweenLite在画布中动画不透明度值…事实上，我甚至不确定如何在点上动画不透明度，即使通过普通的JavaScript。我在谷歌上找不到任何答案。这里有人知道如何达到这个预期的效果吗?(最好使用TweenLite)

为了上下文的缘故，这里是我目前正在使用的一小段代码:

function drawDot()
            {
                ctx.drawImage(orDt, orDtObj.x, orDtObj.y); //draw an orange dot in the canvas
            }
            function reAnimateDot() //set dot back to it's origin
            {
                orDtObj.x = xDotOgn; 
                orDtObj.y = yDotOgn; 
                animateDot();
            }
            function animateDot()
            { 
                var angle = Math.random()*(Math.PI*2);
                console.log('>> the angle : '+angle)
                var radius = 100;
                //find the end point for our dot
                var xEnd = orDtObj.x + radius * Math.cos( angle );
                var yEnd = orDtObj.y + radius * Math.sin( angle ) ;
                orDtObj.xEnd = xEnd;
                orDtObj.yEnd = yEnd;
                TweenLite.to(orDtObj, 2, {x:orDtObj.xEnd,  y:orDtObj.yEnd, autoAlpha:0, ease:Quad.easeOut, onUpdate:reDrawUnit, onComplete:reAnimateDot});
            }

Answer 1

我能够实现这种效果的一种方法是将画布对象层层叠加，就像Flash中的图层一样。我基本上把元素组合在一起，我想在它们自己的画布对象上淡入和淡出，然后分别在每个画布上渐变实际的画布globalAlpha属性。似乎奏效了…

如果你们知道任何其他可能有效的方法，请评论