Nrthugu

I'm trying to make a simple interaction using canvas and Anime.js, using a modified version of one of Julian's examples. The idea is that a circle would enlarge on screen, then the user clicks anywhere on the screen and the circle would contract. I can't get the second animation to play, not sure if this is because my target is not valid or something to do with the timeline? Here is the example.

//Canvas set up



var canvas = document.querySelector('.gameCanvas');

var ctx = canvas.getContext('2d');

var pointerX = 0;

var pointerY = 0;

var circle;

let basicTimeline = anime.timeline();





function setCanvasSize() {

  canvas.width = window.innerWidth * 2;

  canvas.height = window.innerHeight * 2;

  canvas.style.width = window.innerWidth + 'px';

  canvas.style.height = window.innerHeight + 'px';

  canvas.getContext('2d').scale(2, 2);

}



//Objects and animation



function createCircle(x,y) {

    var p = {};

    p.x = x;

    p.y = y;

    p.color = "#fff";

    p.radius = anime.random(16, 32);

    p.alpha = .5;

    p.draw = function() {

      ctx.globalAlpha = p.alpha;

      ctx.beginPath();

      ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);

      ctx.fillStyle = p.color;

      ctx.fill();

    }

    return p;

}



function renderParticle(anim) {

  for (var i = 0; i < anim.animatables.length; i++) {

    anim.animatables[i].target.draw();

  }

}



function createExpandCircle(x, y) {

    circle = createCircle(x, y);

    basicTimeline.add({

        targets: circle,

        radius: anime.random(80, 160),

        alpha: {

            value: 1,

            easing: 'linear',

            duration: anime.random(600, 800),  

        },

        duration: anime.random(1200, 1800),

        easing: 'linear',

        update: renderParticle,

        offset: 0

    });



}



function contractCircle(){

    basicTimeline.add({

        targets: circle,

        radius: 20,

        easing: 'easeOutExpo'

        update: renderParticle

    });



}



//Mouse Events



var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown';



function updateCoords(e) {

  pointerX = e.clientX || e.touches[0].clientX;

  pointerY = e.clientY || e.touches[0].clientY;

}



document.addEventListener(tap, function(e) {

  updateCoords(e);

  contractCircle();

  }, false);



var centerX = window.innerWidth / 2;

var centerY = window.innerHeight / 2;



createExpandCircle(centerX, centerY);

setCanvasSize();

window.addEventListener('resize', setCanvasSize, false);

So I was able to solve this by adding the following:

ctx.clearRect(0, 0, canvas.width, canvas.height);

To p.draw, and

basicTimeline = anime.timeline();

To contractCircle.