experiment_2

by blueshell

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineMax.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/KineticPlugin.min.js"></script>
<div id="canvas"></div>
<input type="button" value="test1" id="test1">
<input type="button" value="test1_reverse" id="test1_reverse">

JavaScript

'use strict';

var stage = new Kinetic.Stage({
    container: document.getElementById("canvas"),
    width: 400,
    height: 400 
});

var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
    x: 100,
    y: 100,
    radius: 40, 
    fill: 'red',
    stroke: 'black',
    strokeWidth: 5
});

layer.add(circle);
stage.add(layer);

var goToPlaces = new TimelineMax({ paused: true }); 
goToPlaces.add(TweenMax.to(circle, 0.5, { kinetic: { x: 120, y: 120 }}));
goToPlaces.add(TweenMax.to(circle, 0.5, { kinetic: { x: 140, y: 140 }}));
goToPlaces.add(TweenMax.to(circle, 0.5, { kinetic: { x: 160, y: 160 }}));
goToPlaces.add(TweenMax.to(circle, 0.5, { kinetic: { x: 180, y: 180 }}));

document.getElementById("test1").onclick = function() { goToPlaces.play(); };
document.getElementById("test1_reverse").onclick = function() { goToPlaces.reverse(); };