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

Question

我目前正在使用Canvas构建动画横幅。 我在画布上将彩色的SVG点图形设置为Image（）对象。 我一直在沿着x，y路径设置画布上的点的动画，我希望这些点在动画结束时逐渐消失...

我似乎无法弄清楚如何使用TweenLite对画布中的不透明度值进行动画处理……实际上，我什至不知道如何对点上的不透明度进行动画处理，即使通过普通JavaScript也是如此。能够在Google上找到任何答案。。这里的任何人都知道如何实现这一理想效果吗？ （最好使用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属性。

如果您知道其他可行的方法，请发表评论。