使用 GreenSock TweenLite 在画布中动画图像对象不透明度答案

【问题标题】：Animating Image Object Opacity in Canvas Using GreenSock's TweenLite使用 GreenSock TweenLite 在画布中动画图像对象不透明度
【发布时间】：2015-10-13 02:32:23
【问题描述】：

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

我似乎无法弄清楚如何使用 TweenLite 为画布中的不透明度值设置动画...事实上，我什至根本不知道如何为点上的不透明度设置动画，即使通过纯 JavaScript 也是如此。我没有'无法在谷歌上找到任何答案。这里有没有人知道如何达到这种预期的效果？（最好使用 TweenLite）

为了上下文，这里是我目前正在使用的代码的一个小sn-p：

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

【问题讨论】：

你试过opacity: 0或者alpha: 0而不是autoAlpha: 0？
你可以创建一个小的 jsFiddle 来演示这个问题吗？

标签： javascript canvas opacity alpha gsap

【解决方案1】：

我能够实现这种效果的一种方法是，将画布对象相互叠加，就像 Flash 中的图层一样。我基本上将我想在自己的画布对象上淡入和淡出的元素组合在一起，然后分别在每个画布上补间实际的画布 globalAlpha 属性..似乎可以解决问题..

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

【讨论】：