如何对同一节点使用kinetic.js补间

时间：2014-03-20 10:05:58

标签： kineticjs

我希望rect1，rect2和rect3对象在移动到新位置后在x轴方向上缩放。当我单击带有'activate'id的按钮时，会发生补间动作，并且rect1，rect2和rect3被移动到新的位置location.In在新位置，我想要在mouseover事件中沿x方向缩放的完全反向动作

    <!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>

<body>
How people voted for various US parties  <input type="checkbox" name="sample_size" id="sample_size">
<br>
<input type="button" id="activate" value=">">
<div id="container"></div>
<input type="hidden" id="orientation" value="horizontal">
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script defer="defer">
$(document).ready(function () {
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 1578,
        height: 500
    });


    var layer = new Kinetic.Layer();

    var group = new Kinetic.Group();
    layer.add(group);
    var total_length = 300
    var x = total_length * 20 / 100;
    var y = total_length * 30 / 100;
    var z = total_length * 50 / 100;


    var rect1 = new Kinetic.Rect({
        x: 35,
        y: 5,
        width: x,
        height: 50,
        fill: "red",
        stroke: 'black',
        strokeWidth: 4,
        opacity: 1,
        id: 'rect1'
    });

    var rect2 = new Kinetic.Rect({
        x: 35 + x,
        y: 5,
        width: y,
        height: 50,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 4,
        id: 'rect2'
    });
    var rect3 = new Kinetic.Rect({
        x: 35 + x + y,
        y: 5,
        width: z,
        height: 50,
        fill: 'blue',
        stroke: 'black',
        strokeWidth: 4,
        id: 'rect3'

    });

    var simpleText1 = new Kinetic.Text({
        x: rect1.getX(),
        y: rect1.getY(),
        text: '20%',
        fontSize: 24,
        fontFamily: 'Calibri',
        width: rect1.getWidth(),

        align: 'center',
        fill: 'black'
    });
    var simpleText2 = new Kinetic.Text({
        x: rect2.getX(),
        y: rect2.getY(),
        text: '30%',
        fontSize: 24,
        fontFamily: 'Calibri',
        width: rect1.getWidth(),

        align: 'center',
        fill: 'black'
    });
    var simpleText3 = new Kinetic.Text({
        x: rect3.getX(),
        y: rect3.getY(),
        text: '50%',
        fontSize: 24,
        fontFamily: 'Calibri',
        width: rect1.getWidth(),

        align: 'center',
        fill: 'black'
    });

    group.add(rect1);
    group.add(simpleText1);
    group.add(rect2);
    group.add(simpleText2);
    group.add(rect3);
    group.add(simpleText3);

    var total_length1 = 300
    var x1 = total_length1 * 20 / 100;
    var y1 = total_length1 * 30 / 100;
    var z1 = total_length1 * 50 / 100;

    var tween1 = new Kinetic.Tween({
        node: rect1,
        duration: 1,
        x: 35,
        y: 5,
        width: x1,
        height: 20,
        rotation:0,
        opacity: 1,
        strokeWidth: 4,
        scaleX: 1
    });
    var tween2 = new Kinetic.Tween({
        node: rect2,
        duration: 1,
        x: 35,
        y: 5 + 30,
        width: y1,
        height: 20,
        rotation:0,
        opacity: 1,
        strokeWidth: 4,
        scaleX: 1
    });
    var tween3 = new Kinetic.Tween({
        node: rect3,
        duration: 1,
        x: 35,
        y: 5 + 30 + 30,
        width: z1,
        height: 20,
        rotation:0,
        opacity: 1,
        strokeWidth: 4,
        scaleX: 1
    });

    var tween4 = new Kinetic.Tween({
        node: simpleText1,
        duration: 1,
        x: -10,
        y: 5,
        width: z1,
        height: 20,
        rotation:0,
        opacity: 1,
        strokeWidth: 4,
        scaleX: 1

    });
    var tween5 = new Kinetic.Tween({
        node:  simpleText2,
        duration: 1,
        x: 10,
        y: 35,
        width: z1,
        height: 20,
        rotation:0,
        opacity: 1,
        strokeWidth: 4,
        scaleX: 1
    });
    var tween6 = new Kinetic.Tween({
        node: simpleText3,
        duration: 1,
        x:40,
        y:65,
        width: z1,
        height: 20,
        rotation:0,
        opacity: 1,
        strokeWidth: 4,
        scaleX: 1
    });

    $('#sample_size').change(function() {
        if ($(this).is(':checked')) {
            rect1.tween.play();
            rect2.tween.play();
            rect3.tween.play();
            simpleText1.tween.play();
            simpleText2.tween.play();
            simpleText3.tween.play();
        } else {
            rect1.tween.reverse();
            rect2.tween.reverse();
            rect3.tween.reverse();
            simpleText1.tween.reverse();
            simpleText2.tween.reverse();
            simpleText3.tween.reverse();
        }
    });
    // var button=document.getElementById("change_graph").value();
    // alert(button);

    rect1.tween = new Kinetic.Tween({
        node: rect1,
        scaleX: 1,
        scaleY: 2,
        easing: Kinetic.Easings.Linear,
        duration: .75
    });



    rect2.tween = new Kinetic.Tween({
        node: rect2,
        scaleX: 1,
        scaleY: 2,
        easing: Kinetic.Easings.Linear,
        duration:.75
    });

    rect3.tween = new Kinetic.Tween({
        node: rect3,
        scaleX: 1,
        scaleY: 2,
        easing: Kinetic.Easings.Linear,
        duration:.75
    });
    simpleText1.tween = new Kinetic.Tween({
        node: simpleText1,
        scaleX: 1,
        scaleY: 1.20,
        easing: Kinetic.Easings.Linear,
        duration: .75
    });

    simpleText2.tween = new Kinetic.Tween({
        node: simpleText2,
        scaleX: 1,
        scaleY: 1.50,
        easing: Kinetic.Easings.Linear,
        duration:.75
    });

    simpleText3.tween = new Kinetic.Tween({
        node: simpleText3,
        scaleX: 1,
        scaleY: 2,
        easing: Kinetic.Easings.Linear,
        duration:.75
    });


  /*  rect1reversetween = new Kinetic.Tween({
        node: rect1,
        scaleX: 2,
        scaleY: 1,
        easing: Kinetic.Easings.Linear,
        duration: .75
    });

    rect2reversetween = new Kinetic.Tween({
        node: rect2,
        scaleX: 2,
        scaleY: 1,
        easing: Kinetic.Easings.Linear,
        duration:.75
    });

    rect3reversetween = new Kinetic.Tween({
        node: rect3,
        scaleX: 2,
        scaleY: 1,
        easing: Kinetic.Easings.Linear,
        duration:.75
    });
    simpleText1reversetween = new Kinetic.Tween({
        node: simpleText1,
        scaleX: 1.20,
        scaleY: 1,
        easing: Kinetic.Easings.Linear,
        duration: .75
    });

    simpleText2reversetween = new Kinetic.Tween({
        node: simpleText2,
        scaleX: 1.50,
        scaleY: 1,
        easing: Kinetic.Easings.Linear,
        duration:.75
    });

    simpleText3reversetween = new Kinetic.Tween({
        node: simpleText3,
        scaleX:2,
        scaleY:1,
        easing: Kinetic.Easings.Linear,
        duration:.75
    });*/

    rect1.on('mouseover touchstart', function(evt) {
        rect1.tween.play();
        simpleText1.tween.play();
     });
    rect1.on('mouseout touchend', function(evt) {
        rect1.tween.reverse();
        simpleText1.tween.reverse();
    });


    simpleText1.on('mouseover touchstart', function(evt) {
        rect1.tween.play();
        simpleText1.tween.play();
    });

    simpleText1.on('mouseout touchend', function(evt) {
        rect1.tween.reverse();
        simpleText1.tween.reverse();
    });

    rect2.on('mouseover touchstart', function(evt) {
        rect2.tween.play();
        simpleText2.tween.play();
    });

    rect2.on('mouseout touchend', function(evt) {
        rect2.tween.reverse();
        simpleText2.tween.reverse();
    });
    simpleText2.on('mouseover touchstart', function(evt) {
        rect2.tween.play();
        simpleText2.tween.play();
    });

    simpleText2.on('mouseout touchend', function(evt) {
        rect2.tween.reverse();
        simpleText2.tween.reverse();
    });

    rect3.on('mouseover touchstart', function(evt) {
        rect3.tween.play();
        simpleText3.tween.play();
    });

    rect3.on('mouseout touchend', function(evt) {
        rect3.tween.reverse();
        simpleText3.tween.reverse();
    });
    simpleText3.on('mouseover touchstart', function(evt) {
        rect3.tween.play();
        simpleText3.tween.play();
    });

    simpleText3.on('mouseout touchend', function(evt) {
        rect3.tween.reverse();
        simpleText3.tween.reverse();
    });

 /*   document.getElementById('rect1').addEventListener('mouseover', function () {
        if($("#orientation").val()=='horizontal')
        {
           alert($("#orientation").val());
        }
        else if($("#orientation").val()=='vertical')
        {
           alert($("#orientation").val());
        }
    }, false);*/


    document.getElementById('activate').addEventListener('click', function () {
        if($("#orientation").val()=='horizontal')
        {
            tween1.play();
            tween2.play();
            tween3.play();
            tween4.play();
            tween5.play();
            tween6.play();

            $("#orientation").val('');
            $("#orientation").val('vertical');


        }
        else if($("#orientation").val()=='vertical')
        {
            tween1.reverse();
            tween2.reverse();
            tween3.reverse();
            tween4.reverse();
            tween5.reverse();
            tween6.reverse();

            $("#orientation").val('');
            $("#orientation").val('horizontal');

        }

    }, false);

   // console.log($("#orientation").val());

    stage.add(layer);

});
</script>
</body>
</html>
The rectangles get scaled always in the same direction(y axis).I want to scale it x axis direction when rect1,rect2 and rect3 are in new location

1 个答案:

答案 0 :(得分：1)

Kinetic.Tweens不可修改，因此您需要创建更多补间以沿x轴缩放。

相关问题
最新问题