experiment_1

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="test2" id="test2">

JavaScript

'use strict';

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

var layer = new Kinetic.Layer();

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

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

layer.add(circle1);
layer.add(circle2);
stage.add(layer);

// No intermediary steps shown on repeat.
var goToPlaces1 = TweenMax.set(circle1, { kinetic: { x: 300, y: 300 }, immediateRender: false, repeat: 4, yoyo: true, repeatDelay: 1, paused: true });

// This one goes as normal.
var goToPlaces2 = TweenMax.to(circle2, 0.5, { kinetic: { x: 350, y: 300 }, immediateRender: false, repeat: 4, yoyo: true, repeatDelay: 1, paused: true });

document.getElementById("test1").onclick = function() { goToPlaces1.play(); };
document.getElementById("test2").onclick = function() { goToPlaces2.play(); };