2

TweenMax ライブラリを使用して JavaScript のベジエ パスでオブジェクトを移動しようとしていますが、オブジェクトが移動しません。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>
4

1 に答える 1

2

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/で遊ぶためのフィドルを作成しました

于 2013-06-02T19:33:19.830 に答える