Question

我正在尝试使用TweenMax库在javascript中的bezier路径中移动一个对象，但该对象没有移动。在他们的API文档（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>

Answer 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/

创造了一个小提琴

使用TweenMax和KineticJS在javascript中移动bezier曲线路径中的对象

1 个答案: