Jump to content
Search Community

TweenMax Kinetic setScale

stanlyyuen 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

hello, there is something wrong happen while i using the Kinectic's setScale method in TweenMax:



var tl = new TimelineMax();
tl.to(group_b, 1, {setY: 0, setScale: {x: 0.95, y: 0.95}, ease: 'Back.easeOut'}, 0.0);
tl.to(bp2, 1.5, {setY: 120, setScale: {x: 0.7, y: 0.7}, ease: 'Back.easeOut'}, 0.0);

there is an exception in the console:
Uncaught TypeError: Cannot read property 'x' of null

and here is where the exception happen:


getTransform: function() {
var m = new Kinetic.Transform(),
attrs = this.attrs,
x = attrs.x,
y = attrs.y,
rotation = attrs.rotation,
scale = attrs.scale,
scaleX = scale.x,
Uncaught TypeError: Cannot read property 'x' of null
Uncaught TypeError: Cannot read property 'x' of null
scaleY = scale.y,
offset = attrs.offset,
offsetX = offset.x,
offsetY = offset.y;
Link to comment
Share on other sites

GSAP is built with the special ability to work with getters/setters for simple values, like:

 

yourObject.getScale(); //returns a number
yourObject.setScale(0.5); //accepts a numeric value as the only argument
TweenLite.to(yourObject, 1, {setScale:2}); //tweens scale, using getScale() to get the starting value, and passes a number to setScale() on every update. 

The problem is that you're trying to use a method that needs a complex value passed in, like {x:0.5, y:0.5}. 

 

You can, however, use a proxy object and an onUpdate to pass it in:

 

var scaleProxy = group_b.getScale(); //assumes it returns something like {x:1, y:1}
TweenLite.to(scaleProxy, 1, {x:0.95, y:0.95, onUpdate:function() {
        group_b.setScale(scaleProxy);
}, ease:"Back.easeOut"});
 

So it tweens the proxy values and then on each update, you pass it into the setScale() method. Does that help?

Link to comment
Share on other sites

tks, it works. But,  on the other hand, codes became much longer and only change the scale in such long codes, and i have to setY in another 'to' method.

besides, I wonder if TweenMax has some way to chain all the operations like jQuery, just like this:


TweenMax.to(...).to(...)

Link to comment
Share on other sites

Hmm I guess you could try your hand at GSAP plugins, but depending on how often you do this a little bit of extra code might be the simplest bet.

In regards to chaining, TweenLite.to() / TweenMax.to() return the instance of the tween that was created so it's not chainable. This is a good thing though, as being able to save a tween and pause, play rewind it etc, or add it to a timeline is what makes GSAP awesome.

GSAP has chaining with the TimelineLite and TimelineMax classes though. Most of the Timeline functions return the Timeline instance so you can chain to your hearts content. Something like this:

TimelineLite.to(element, 1, { x:50 })
            .to(element, 1, { y:100 })
            .to(element, 1, { x:0, y:0 })
Link to comment
Share on other sites

An additional note.

 

I noticed that KineticJS offers for sizing: setSize(), setWidth(), setHeight() methods.

 

For positioning,  setPosition(), setX(), setY() methods.

 

Yet for scaling there is no way to change scale along a single axis.

 

I think it might be worthwhile to inquire with the KineticJS folks why this is. Perhaps there is something intrinsic to scaling that makes this problematic. 

 

It probably makes more sense for them to implement setScaleX() and setScaleY() methods in their API then for us to create a plugin for a singular method of a library.

 

KineticJS is a very solid library and it appears the author cares a lot about maintaining a performant and intuitive API. Might be worth a shot.

Link to comment
Share on other sites

I whipped together a KineticPlugin that should make this easier. It handles all the basic properties like x, y, scaleX, scaleY, rotationDeg, opacity, etc. and it calls the layer's draw() method after each update for you (unless you specify autoDraw:false).

 

So here's the code with and without the plugin: 

 

//OLD (without plugin) (couldn't handle scaleX/scaleY well):
TweenLite.to(rect, 2, {setX:100, setY:300, setRotationDeg:45, setOpacity:0.5, onUpdate:layer.draw, onUpdateScope:layer});

//NEW (with plugin) (notice scaleX and scaleY work!):
TweenLite.to(rect, 2, {kinetic:{x:100, y:300, rotationDeg:45, scaleX:0.5, scaleY:0.8, opacity:0.5}});

It still works fine if you use the longer names, like setX, setY, etc. I just figured the shorter ones are a nice convenience.

 

And of course it handles the scale, scaleX, and scaleY values just fine because it does some fancy footwork behind the scenes to ensure it's feeding the appropriate values to Kinetic's rather unconventional setScale() method.

 

Does that help?

KineticPlugin.js.zip

  • Like 3
Link to comment
Share on other sites

  • 9 months later...

Hello. for all.

 

I have problems with the scale, the center of the object it is in 0.0, and scale respect this position with a group object and not the center of the object or the corner of the object in worst case.

TweenLite.to(iconos_bases[j].group ,0.3, {kinetic:{scale:0} ,ease:Strong.easeOut});

Sorry my bad english.

Thank you

Link to comment
Share on other sites

Hi isdito

 

Welcome to the GreenSock forums.

 

I'm not really sure what you mean. An example would really help.

 

Please fork this CodePen demo and add your own code:

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

 

It uses v5 of KineticJS and our latest KineticJS plugin.

 

For more info on how to use CodePen, please watch: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

UPDATE: to make the object rotate or scale around center, set its offsetX and offsetY values as shown here:

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

 

      var rect = new Kinetic.Rect({
        x: 239,
        y: 75,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4,
        offsetX:50, 
        offsetY:25
      });
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...