search

CreateJS / TweenJS

A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.
http://createjs.com/
MIT License
3.56k stars 967 forks source link

TweenJS Color Plugin #17

Closed mihhail-lapushkin closed 7 years ago

mihhail-lapushkin commented 11 years ago

Hi, I've created a plugin for the feature that I was really missing in TweenJS- color tweening. It can be used to tween colors in any format: RGB, HSL or Hex. Can tween fill color of: Shape, Text and Shadow, as well as other potential objects that might have the color property.

createjs.ColorPlugin.install();
...
shape1.graphics.beginFill("hsl(100, 50%, 80%)");
shape2.graphics.beginFill("#FA1122");
...
createjs.Tween.get(shape1).to({ h: 100, s: 90, l: 10 }, 500);
createjs.Tween.get(shape2).to({ r: 200, b: 250 }, 1500);
sam-song commented 11 years ago

hello color plugin is not working properly here up the code: createjs.ColorPlugin.install(); createjs.Tween.get(Map).to({ r: 200, g:100, b: 250 },1000);

mihhail-lapushkin commented 11 years ago

don't forget to declare a Ticker here is a working example:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="easeljs-0.5.0.min.js"></script>
    <script type="text/javascript" src="tweenjs-0.3.0.min.js"></script>
    <script type="text/javascript" src="ColorPlugin.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            createjs.ColorPlugin.install();

            var canvas = document.createElement("canvas");

            canvas.width  = window.innerWidth ;
            canvas.height = window.innerHeight;

            document.body.appendChild(canvas);

            stage = new createjs.Stage(canvas);

            var circle = new createjs.Shape();
            circle.graphics.beginFill("rgba(100,100,100,0.5)");
            circle.graphics.drawCircle(0,0,300);
            circle.x = 300;
            circle.y = 300;

            stage.addChild(circle);

            createjs.Ticker.addListener(window);

            createjs.Tween.get(circle).wait(2000).to({ r: 255 }, 2000);
        }, false);

        function tick() {
            stage.update();
        }
    </script>
</head>
<body>
</body>
</html>
sam-song commented 11 years ago

thank you, but how can i change the movieclip color exported from flash (createjs toolkit) !!!

shanecasey commented 11 years ago

This is a great plugin... thanks, it saved me hours!

Is there a way to pass a hex value to the Tween instead of rgb or hsl?

Also, worth noting: this will throw an error if you've called endFill() in your Shape graphics. That had me stumped for a while.

mihhail-lapushkin commented 11 years ago

thx!

nope, that's not possible

well, I guess that's a bit of a feature, since you can tween only single-color shapes and endFill is there just to draw the next shape with a different color

anyway, I've moved to another canvas library already and not going to support this, so have fun using (or improving) it!

mamzellejuu commented 10 years ago

Thank you for the plugin!

nigeman commented 9 years ago

Doesnt seem to work with the latest base ? Is this the case for anyone else?

gskinner commented 7 years ago

Thanks for the pull request. We've added an official ColorPlugin in the latest version of TweenJS that's a bit more general use (ie. not specific to EaselJS Shapes), and pairs well with our Graphics command model. Appreciate the inspiration!