Jump to content
Search Community

Animate a Canvas Color

silverd test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi :)

i have a question maybe it's simple but maybe not :)

I would like animate a color of canvas shape but i don't understand how

in my draw ctx i have  this line

ctx.fillStyle = colorLogo;

colorLogo it's my variable

var colorLogo = "rgb(65, 190, 238)";

 but with css in tweeMax i don't understand how i have to proceed

can you help me ?

 

i have to create a function animate ?

 

Thanks :)

Link to comment
Share on other sites

This is exactly what the ColorPropsPlugin is for - it allows you to tween any color property of any object, regardless of the name. For example:

var obj = {color:"red"};
TweenLite.to(obj, 3, {colorProps:{color:"rgb(65, 190, 238)"}});

But in your case, you need to redraw the rectangle each time the fillStyle is updated, so you can use an onUpdate for that:

TweenLite.to(ctx, 1, {colorProps:{fillStyle:"rgb(65, 190, 238)"}, onUpdate:update});

function update() {
  ctx.rect(20,20,150,100);
  ctx.fill();
}

Notice we're just tweening ctx.fillStyle directly here. 

 

Here's a codepen that demonstrates this concept, animating the color to random values constantly:

http://codepen.io/GreenSock/pen/btfec

  • Like 2
Link to comment
Share on other sites

Yeah, that's pretty close, but you need ColorPropsPlugin too.

Take a look here:

 

http://codepen.io/GreenSock/pen/bncLo

 

// uses 
//TweenLite: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenLite.min.js
//ColorPropsPlugin: https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ColorPropsPlugin.min.js


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


//here is the yellow color that pacman starts with
var colors = {fillStyle:"rgb(255, 255, 0)"};




function drawPacMan() {
  ctx.fillStyle = colors.fillStyle;
  ctx.strokeStyle = "rgb(255, 200, 0)";
  ctx.beginPath();
  ctx.moveTo(195, 149);
  ctx.arc(150, 170, 50, 5.8, 0.5, true);
  ctx.lineTo(160, 170);
  ctx.lineTo(195, 149);
  ctx.fill();
  ctx.stroke();


}


//tween colors.fillStyle and use onUpdate to re-draw pacman
TweenLite.to(colors, 3, {colorProps:{fillStyle:"red"}, onUpdate:drawPacMan});
  • Like 1
Link to comment
Share on other sites

Thanks :)

 

but the render it's not very good with your example maybe it's better with svg ?

 

i have two functions and with that my design is perfect

        function init() {

          var canvas = document.getElementById("canvas");
          var ctx = canvas.getContext("2d");

          draw(ctx);
        }
function draw(ctx) {

          // fondCopie/Trac transparent
          ctx.save();
          ctx.beginPath();

          // fondCopie/Trac transparent/Trac
          ctx.moveTo(90.0, 113.5);
          ctx.bezierCurveTo(79.9, 113.5, 67.1, 111.3, 61.8, 106.7);
          ctx.bezierCurveTo(59.6, 94.5, 55.7, 85.9, 51.5, 75.7);
          ctx.bezierCurveTo(47.3, 65.6, 52.9, 56.0, 56.5, 49.6);
          ctx.bezierCurveTo(58.7, 45.5, 67.1, 40.7, 71.9, 38.7);
          ctx.bezierCurveTo(72.8, 38.3, 73.6, 38.0, 74.5, 37.7);
          ctx.bezierCurveTo(75.6, 37.7, 76.7, 37.8, 77.7, 37.9);
          ctx.bezierCurveTo(75.1, 40.7, 73.0, 42.5, 73.0, 43.7);
          ctx.bezierCurveTo(73.0, 44.8, 73.5, 47.0, 75.1, 48.9);
          ctx.bezierCurveTo(75.1, 48.9, 75.1, 45.2, 79.0, 46.0);
          ctx.bezierCurveTo(79.0, 46.0, 88.6, 49.9, 88.6, 51.6);
          ctx.bezierCurveTo(88.6, 51.6, 88.0, 55.6, 88.0, 64.7);
          ctx.bezierCurveTo(88.0, 73.5, 89.9, 101.7, 90.0, 103.6);
          ctx.lineTo(90.0, 103.7);
          ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7);
          ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7);
          ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7);
          ctx.bezierCurveTo(90.0, 103.7, 90.0, 103.7, 90.0, 103.7);
          ctx.lineTo(90.0, 103.6);
          ctx.bezierCurveTo(90.1, 101.7, 92.0, 73.5, 92.0, 64.7);
          ctx.bezierCurveTo(92.0, 55.6, 91.4, 51.6, 91.4, 51.6);
          ctx.bezierCurveTo(91.4, 49.9, 101.0, 46.0, 101.0, 46.0);
          ctx.bezierCurveTo(104.9, 45.2, 104.9, 48.9, 104.9, 48.9);
          ctx.bezierCurveTo(106.5, 47.0, 107.0, 44.8, 107.0, 43.7);
          ctx.bezierCurveTo(107.0, 42.5, 104.9, 40.7, 102.3, 37.9);
          ctx.bezierCurveTo(103.3, 37.8, 104.4, 37.7, 105.5, 37.7);
          ctx.bezierCurveTo(106.4, 38.0, 107.3, 38.3, 108.1, 38.7);
          ctx.bezierCurveTo(112.9, 40.7, 121.3, 45.5, 123.5, 49.6);
          ctx.bezierCurveTo(127.1, 56.0, 132.8, 65.6, 128.5, 75.7);
          ctx.bezierCurveTo(124.3, 85.9, 120.4, 94.5, 118.2, 106.7);
          ctx.bezierCurveTo(112.9, 111.3, 100.1, 113.5, 90.0, 113.5);
          ctx.closePath();

          // fondCopie/Trac transparent/Trac
          ctx.moveTo(48.5, 33.4);
          ctx.bezierCurveTo(54.4, 29.1, 60.4, 25.9, 74.4, 35.2);
          ctx.bezierCurveTo(74.4, 35.2, 56.2, 38.2, 48.5, 33.4);
          ctx.closePath();

          // fondCopie/Trac transparent/Trac
          ctx.moveTo(105.6, 35.2);
          ctx.bezierCurveTo(119.6, 25.9, 125.6, 29.1, 131.5, 33.4);
          ctx.bezierCurveTo(123.8, 38.2, 105.6, 35.2, 105.6, 35.2);
          ctx.closePath();

          // fondCopie/Trac transparent/Trac
          ctx.moveTo(179.9, 24.0);
          ctx.bezierCurveTo(178.8, 31.6, 176.2, 33.7, 171.0, 36.0);
          ctx.bezierCurveTo(165.2, 38.5, 162.2, 37.4, 155.7, 37.7);
          ctx.bezierCurveTo(154.6, 36.2, 153.5, 34.6, 149.4, 28.3);
          ctx.bezierCurveTo(149.4, 28.3, 155.9, 26.6, 164.2, 32.9);
          ctx.bezierCurveTo(163.1, 31.1, 161.9, 29.6, 159.8, 27.8);
          ctx.bezierCurveTo(157.6, 26.1, 152.0, 23.4, 147.7, 24.7);
          ctx.bezierCurveTo(146.2, 25.2, 145.1, 26.0, 144.1, 27.2);
          ctx.bezierCurveTo(143.5, 27.9, 143.5, 27.8, 144.1, 28.5);
          ctx.bezierCurveTo(144.3, 28.7, 144.5, 29.0, 144.7, 29.2);
          ctx.bezierCurveTo(148.4, 33.5, 158.6, 44.0, 161.8, 49.9);
          ctx.bezierCurveTo(164.9, 55.6, 168.9, 70.5, 168.8, 77.0);
          ctx.bezierCurveTo(165.4, 77.5, 161.1, 77.0, 153.6, 87.9);
          ctx.bezierCurveTo(150.0, 93.1, 145.2, 97.2, 138.1, 100.3);
          ctx.bezierCurveTo(136.8, 97.8, 137.2, 92.7, 139.7, 89.8);
          ctx.bezierCurveTo(134.3, 94.3, 131.5, 98.5, 132.5, 106.2);
          ctx.bezierCurveTo(128.7, 107.5, 124.0, 107.6, 122.3, 104.1);
          ctx.bezierCurveTo(120.6, 100.6, 122.0, 95.4, 125.8, 87.5);
          ctx.bezierCurveTo(130.5, 77.4, 132.8, 74.9, 133.5, 64.5);
          ctx.bezierCurveTo(134.0, 56.3, 130.3, 49.4, 127.1, 45.1);
          ctx.bezierCurveTo(124.3, 41.3, 117.2, 39.2, 112.8, 37.3);
          ctx.bezierCurveTo(127.8, 39.6, 140.0, 33.8, 140.0, 33.8);
          ctx.bezierCurveTo(135.3, 28.1, 131.3, 27.7, 131.3, 27.7);
          ctx.bezierCurveTo(132.9, 27.1, 136.1, 26.9, 136.1, 26.9);
          ctx.bezierCurveTo(123.8, 21.8, 114.6, 25.9, 110.2, 29.9);
          ctx.bezierCurveTo(108.5, 31.5, 104.9, 33.6, 102.0, 33.7);
          ctx.bezierCurveTo(99.1, 33.8, 98.5, 33.3, 97.6, 33.1);
          ctx.bezierCurveTo(97.6, 33.1, 94.6, 30.7, 90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.bezierCurveTo(90.0, 30.7, 90.0, 30.7, 90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.lineTo(90.0, 30.7);
          ctx.bezierCurveTo(85.4, 30.7, 82.4, 33.1, 82.4, 33.1);
          ctx.bezierCurveTo(81.5, 33.3, 80.9, 33.8, 78.0, 33.7);
          ctx.bezierCurveTo(75.1, 33.6, 71.5, 31.5, 69.8, 29.9);
          ctx.bezierCurveTo(65.4, 25.9, 56.2, 21.8, 43.9, 26.9);
          ctx.bezierCurveTo(43.9, 26.9, 47.1, 27.1, 48.7, 27.7);
          ctx.bezierCurveTo(48.7, 27.7, 44.7, 28.1, 40.0, 33.8);
          ctx.bezierCurveTo(40.0, 33.8, 52.2, 39.6, 67.2, 37.3);
          ctx.bezierCurveTo(62.8, 39.2, 55.7, 41.3, 52.9, 45.1);
          ctx.bezierCurveTo(49.7, 49.4, 46.0, 56.3, 46.5, 64.5);
          ctx.bezierCurveTo(47.2, 74.9, 49.5, 77.4, 54.2, 87.5);
          ctx.bezierCurveTo(58.0, 95.4, 59.4, 100.6, 57.7, 104.1);
          ctx.bezierCurveTo(56.0, 107.6, 51.3, 107.5, 47.5, 106.2);
          ctx.bezierCurveTo(48.5, 98.5, 45.7, 94.3, 40.3, 89.8);
          ctx.bezierCurveTo(42.8, 92.7, 43.2, 97.8, 41.9, 100.3);
          ctx.bezierCurveTo(34.8, 97.2, 30.0, 93.1, 26.4, 87.9);
          ctx.bezierCurveTo(18.9, 77.0, 14.6, 77.5, 11.2, 77.0);
          ctx.bezierCurveTo(11.1, 70.5, 15.1, 55.6, 18.2, 49.9);
          ctx.bezierCurveTo(21.4, 44.0, 31.6, 33.5, 35.3, 29.2);
          ctx.bezierCurveTo(35.5, 29.0, 35.7, 28.7, 35.9, 28.5);
          ctx.bezierCurveTo(36.5, 27.8, 36.5, 27.9, 35.9, 27.2);
          ctx.bezierCurveTo(34.9, 26.0, 33.8, 25.2, 32.3, 24.7);
          ctx.bezierCurveTo(28.0, 23.4, 22.4, 26.1, 20.2, 27.8);
          ctx.bezierCurveTo(18.1, 29.6, 16.9, 31.1, 15.8, 32.9);
          ctx.bezierCurveTo(24.1, 26.6, 30.6, 28.3, 30.6, 28.3);
          ctx.bezierCurveTo(26.5, 34.6, 25.4, 36.2, 24.3, 37.7);
          ctx.bezierCurveTo(17.8, 37.4, 14.8, 38.5, 9.0, 36.0);
          ctx.bezierCurveTo(3.8, 33.7, 1.2, 31.6, 0.1, 24.0);
          ctx.bezierCurveTo(-0.9, 16.2, 5.1, 8.3, 8.4, 5.0);
          ctx.bezierCurveTo(11.7, 1.7, 15.7, -0.4, 20.8, 0.1);
          ctx.bezierCurveTo(25.1, 0.5, 28.8, 1.1, 33.4, 4.8);
          ctx.bezierCurveTo(38.0, 8.4, 40.4, 11.0, 43.4, 12.0);
          ctx.bezierCurveTo(45.5, 12.6, 47.8, 12.5, 50.7, 10.9);
          ctx.bezierCurveTo(52.5, 9.9, 54.6, 9.0, 56.7, 8.6);
          ctx.bezierCurveTo(62.6, 7.0, 68.8, 9.1, 74.0, 11.9);
          ctx.bezierCurveTo(77.0, 13.5, 79.8, 15.4, 82.7, 17.1);
          ctx.bezierCurveTo(84.7, 18.4, 86.9, 19.6, 89.4, 19.8);
          ctx.bezierCurveTo(89.6, 19.8, 89.8, 19.8, 90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.bezierCurveTo(90.0, 19.8, 90.0, 19.8, 90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.lineTo(90.0, 19.8);
          ctx.bezierCurveTo(90.2, 19.8, 90.4, 19.8, 90.6, 19.8);
          ctx.bezierCurveTo(93.1, 19.6, 95.3, 18.4, 97.3, 17.1);
          ctx.bezierCurveTo(100.2, 15.4, 103.0, 13.5, 106.0, 11.9);
          ctx.bezierCurveTo(111.2, 9.1, 117.4, 7.0, 123.3, 8.6);
          ctx.bezierCurveTo(125.4, 9.0, 127.5, 9.9, 129.3, 10.9);
          ctx.bezierCurveTo(132.2, 12.5, 134.5, 12.6, 136.6, 12.0);
          ctx.bezierCurveTo(139.6, 11.0, 142.0, 8.4, 146.6, 4.8);
          ctx.bezierCurveTo(151.2, 1.1, 154.9, 0.5, 159.2, 0.1);
          ctx.bezierCurveTo(164.3, -0.4, 168.3, 1.7, 171.6, 5.0);
          ctx.bezierCurveTo(174.9, 8.3, 180.9, 16.2, 179.9, 24.0);
          ctx.closePath();
          ctx.fillStyle = colorLogo;
          ctx.fill();
          ctx.restore();
        }

it's my logo :) i would like that it is pixel perfect

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...