Question

我目前正在使用Canvas构建动画横幅。我在画布上将彩色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属性..似乎可以做到这一点..

如果你们知道其他任何可行的方式，请发表评论..

使用GreenSock的TweenLite在Canvas中制作动画图像对象不透明度

1 个答案: