使用 TweenMax 和 KineticJS 在 javascript 中以贝塞尔曲线路径移动对象答案

【问题标题】：Moving an object in a bezier curve path in javascript using TweenMax and KineticJS使用 TweenMax 和 KineticJS 在 javascript 中以贝塞尔曲线路径移动对象
【发布时间】：2013-05-24 11:04:15
【问题描述】：

我正在尝试使用 TweenMax 库在 javascript 的贝塞尔路径中移动对象，但对象没有移动。在他们的 API Docs (http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html) 中，他们提到了像

这样的例子

    TweenMax.to(obj, 5, {bezier:[{x:100, y:250}, {x:300, y:0}, {x:500, y:400}], ease:Power1.easeInOut});

但这对我不起作用。这是html代码。任何输入都会有所帮助。

<html>
<head>
    <style type="text/css">
        body{
            margin:0px;
            overflow:hidden;
        }
        #container{
            background-color: #888888;        
        }
    </style>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    <script type="text/javascript" src="http://www.html5canvastutorials.com/libraries/kinetic-v4.5.0-beta.js"></script>
    <script type="text/javascript">
        //var imageObj;
        function init(){
            var imageObj = new Image();
            imageObj.src = "image.gif";
            imageObj.onload = function(){
                display(imageObj);
            }
        }
        function display(imageObj){
            stage = new Kinetic.Stage({
                container: "container",
                width: window.innerWidth,
                height: window.innerHeight
            });
            layer = new Kinetic.Layer();
            croppedImage = new Kinetic.Image({
                image : imageObj,
                crop : {
                    x : 0,
                    y : 0,
                    width : 100,
                    height : 100
                },
                x : 0,
                y : 0,
                width : 100,
                height : 100,
                draggable : true
            });
            layer.add(croppedImage);
            stage.add(layer);
            bezier_move();
        }
        function bezier_move(){
            TweenMax.to(croppedImage, 3, {bezier:[{x:50, y:50}, {x:75, y:75}, {x:500, y:500}], ease:Power1.easeInOut});
        }
    </script>
</head>
<body onload="init()">
    <div id="container"></div>
</body>
</html>

【问题讨论】：

标签： javascript html5-canvas kineticjs gsap

【解决方案1】：

您只需要使用setX 和setY 然后使用onUpdate: stage 刷新画布：

TweenMax.to(croppedImage, 3, {bezier: {values:[{setX:50, setY:50}, 
  {setX:175, setY:75}, {setX:300, setY:50}]}, 
   ease:Power1.easeInOut, onUpdate: stage.draw, onUpdateScope: stage});

我创建了一个小提琴供你使用http://jsfiddle.net/csxYR/2/

【讨论】：

谢谢...我在 kinetic.js 中设置 x 而不是 setX 时犯了错误