KineticJS и HTML

У меня есть ситуация, изображения, движущиеся слева направо и наоборот, после определенной связанной области, которую изображения должны скрывать (невидимые) со сцены и когда они возвращаются назад, должны быть видимыми. Мой tween выглядит так:KineticJS и HTML

var tween = new Kinetic.Tween({ 
      node: puzzle, 
      duration: 22, 
      x: puzzle.getX()+700,  
      easing: Kinetic.Easings.Linear, 
      onFinish : function(){ 
        this.reverse(); 
      } 
});

кто-нибудь, пожалуйста, помогите мне. Заранее спасибо.

источник

2014-01-13 Abhiram

Использование отсечения областей

Вы можете поместить ваш объект головоломки на группу и установить область отсечения на эту группу.

Когда ваша головоломка выходит из зоны отсечения группы, она не будет отображаться.

Демо: http://jsfiddle.net/m1erickson/hzTM7/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 

<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

    var group=new Kinetic.Group({ 
     clip:{x:50,y:50,width:100,height:100}, 
    }); 
    layer.add(group); 

    var bk=new Kinetic.Rect({ 
     x:50, 
     y:50, 
     width:100, 
     height:100, 
     fill:"blue", 
     opacity:0.10, 
    }); 
    group.add(bk); 


    var circle1 = new Kinetic.Circle({ 
     x:70, 
     y:70, 
     radius: 15, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 4, 
    }); 
    group.add(circle1); 
    layer.draw(); 

    var tween = new Kinetic.Tween({ 
       node: circle1, 
       duration: 2, 
       x: circle1.getX()+120,  
       easing: Kinetic.Easings.Linear, 
       onFinish : function(){ 
         this.reverse(); 
       } 
    }); 

    $("#myButton").click(function(){ tween.play(); }); 

}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <button id="myButton">Tween</button> 
    <div id="container"></div> 
</body> 
</html>

источник

2014-01-14 19:48:23 markE

отлично работает для меня. спасибо – Abhiram

KineticJS и HTML

ответ

Смежные вопросы