Weird thing is it only flips for the very first time when I triggered this animation.<

Okey, here is the log I got from the tracer: <div class="highlight highlight-sourc

Thanks! The demo project is here: <a href="https://github.com/JmeHsieh/TestFaceboo

Same here, 0 is breaking the animation. <a class="user-mention notra

Spring with kPOPLayerScaleXY flips the image of UIImageView about pop HOT 12 CLOSED

facebookarchive commented on June 7, 2024

Spring with kPOPLayerScaleXY flips the image of UIImageView

from pop.

Comments (12)

kimon commented on June 7, 2024

The image can appear inverted if values go negative. This typically arises when a spring animation is seeded with a large negative velocity and overshoots it's destination. This doesn't appear to be the case with the above code, but could still be possible.

Could you enable tracing on your animation (see https://github.com/facebook/pop/blob/master/README.md#debugging) and post back with the output when your image is inverted?

from pop.

JmeHsieh commented on June 7, 2024

Okey, here is the log I got from the tracer:

2014-05-17 01:15:42.217 TestFacebookPop[42592:60b] events:(
    "<POPAnimationEvent:0.000000; type = didStart; animation = <POPSpringAnimation:0x8d8a0e0; from = (0.800, 0.800); to = (1.000, 1.000); currentValue = (0.800, 0.800); progress = 0.000000>>",
    "<POPAnimationEvent:0.016667; type = write; value = NSSize: {0.8108772, 0.8108772}; velocity = NSSize: {1.2831588, 1.2831588}>",
    "<POPAnimationEvent:0.033952; type = write; value = NSSize: {0.83982837, 0.83982837}; velocity = NSSize: {2.0338047, 2.0338047}>",
    "<POPAnimationEvent:0.050218; type = write; value = NSSize: {0.87527531, 0.87527531}; velocity = NSSize: {2.2711141, 2.2711141}>",
    "<POPAnimationEvent:0.067286; type = write; value = NSSize: {0.91186851, 0.91186851}; velocity = NSSize: {2.1786273, 2.1786273}>",
    "<POPAnimationEvent:0.083950; type = write; value = NSSize: {0.94449908, 0.94449908}; velocity = NSSize: {1.8891594, 1.8891594}>",
    "<POPAnimationEvent:0.100619; type = write; value = NSSize: {0.97261453, 0.97261453}; velocity = NSSize: {1.4848927, 1.4848927}>",
    "<POPAnimationEvent:0.117283; type = write; value = NSSize: {0.99337238, 0.99337238}; velocity = NSSize: {1.0666399, 1.0666399}>",
    "<POPAnimationEvent:0.117283; type = didReachToValue; value = NSSize: {1.0068176, 1.0068176}; velocity = NSSize: {0.70259351, 0.70259351}>",
    "<POPAnimationEvent:0.133265; type = write; value = NSSize: {1.0068176, 1.0068176}; velocity = NSSize: {0.70259351, 0.70259351}>",
    "<POPAnimationEvent:0.150636; type = write; value = NSSize: {1.015615, 1.015615}; velocity = NSSize: {0.36775044, 0.36775044}>",
    "<POPAnimationEvent:0.167295; type = write; value = NSSize: {1.0194494, 1.0194494}; velocity = NSSize: {0.11604345, 0.11604345}>",
    "<POPAnimationEvent:0.183954; type = write; value = NSSize: {1.0198306, 1.0198306}; velocity = NSSize: {-0.056457963, -0.056457963}>",
    "<POPAnimationEvent:0.200622; type = write; value = NSSize: {1.0178879, 1.0178879}; velocity = NSSize: {-0.16628926, -0.16628926}>",
    "<POPAnimationEvent:0.217301; type = write; value = NSSize: {1.0146939, 1.0146939}; velocity = NSSize: {-0.21739487, -0.21739487}>",
    "<POPAnimationEvent:0.233981; type = write; value = NSSize: {1.0110993, 1.0110993}; velocity = NSSize: {-0.22687726, -0.22687726}>",
    "<POPAnimationEvent:0.250622; type = write; value = NSSize: {1.0074533, 1.0074533}; velocity = NSSize: {-0.20806593, -0.20806593}>",
    "<POPAnimationEvent:0.267314; type = write; value = NSSize: {1.0043283, 1.0043283}; velocity = NSSize: {-0.17327371, -0.17327371}>",
    "<POPAnimationEvent:0.283812; type = write; value = NSSize: {1.0019022, 1.0019022}; velocity = NSSize: {-0.13316751, -0.13316751}>",
    "<POPAnimationEvent:0.300622; type = write; value = NSSize: {1.000042, 1.000042}; velocity = NSSize: {-0.091179259, -0.091179259}>",
    "<POPAnimationEvent:0.317096; type = write; value = NSSize: {0.99887323, 0.99887323}; velocity = NSSize: {-0.055046313, -0.055046313}>",
    "<POPAnimationEvent:0.333710; type = write; value = NSSize: {0.99824363, 0.99824363}; velocity = NSSize: {-0.026304759, -0.026304759}>",
    "<POPAnimationEvent:0.350623; type = write; value = NSSize: {0.99800551, 0.99800551}; velocity = NSSize: {-0.0037051465, -0.0037051465}>",
    "<POPAnimationEvent:0.366993; type = write; value = NSSize: {0.99807096, 0.99807096}; velocity = NSSize: {0.010766619, 0.010766619}>",
    "<POPAnimationEvent:0.383981; type = write; value = NSSize: {0.99833596, 0.99833596}; velocity = NSSize: {0.019404976, 0.019404976}>",
    "<POPAnimationEvent:0.400641; type = write; value = NSSize: {0.99869156, 0.99869156}; velocity = NSSize: {0.022592258, 0.022592258}>",
    "<POPAnimationEvent:0.400641; type = write; value = NSSize: {1, 1}; velocity = NSSize: {0.022592258, 0.022592258}>",
    "<POPAnimationEvent:0.400641; type = didStop; animation = <POPSpringAnimation:0x8d8a0e0; from = (0.800, 0.800); to = (1.000, 1.000); velocity = (0.023, 0.023)>; value = 1; velocity = NSSize: {0.022592258, 0.022592258}>"
)

from pop.

kimon commented on June 7, 2024

The animation looks like it's doing what I would expect based on your sample code. And there are no negative values which means something else must be going on. Do you mind creating a little sample app that reproduces and I can have a look?

from pop.

JmeHsieh commented on June 7, 2024

Thanks!
The demo project is here: https://github.com/JmeHsieh/TestFacebookPop

from pop.

grp commented on June 7, 2024

Ah, I found the issue. You're attaching an animation with the property kPOPLayerScaleXY to a UIButton. Because it's kPOPLayer..., it should be attached to a CALayer instead, like this:

  [object.layer pop_addAnimation:spring forKey:@"anything"];

That fixes the animation when I made the change in your demo app.

from pop.

JmeHsieh commented on June 7, 2024

You are right!
Didn't realize such difference, thanks guys.

from pop.

adamwaite commented on June 7, 2024

I've just had this problem too, posting here in case anyone else requires a solution:

This issue inspired the solution. It was in fact what @kimon mentioned -> "The image can appear inverted if values go negative". Changing the animation from a POPSpringAnimation to a POPBasicAnimation when animating the layer's scale back to 0 meant that the value never hit negative and therefore remained in the correct orientation. Didn't actually make sense using a spring animation come to think of it.

from pop.

mabmierau commented on June 7, 2024

I was having what seems to be the same problem. I clamped the end of the animation and animated to .05 instead of 0. I tried the basic animation but the curve didn't seem right.

It'd probably make sense for the framework to handle a 0 scale since it seems to be a really common case.

from pop.

benbonnet commented on June 7, 2024

Same here, 0 is breaking the animation.

@grp I have the problem adding this type fo animation on a uilabel. The animation is added on the uilabel layer, as it should be
Is there something that you could be aware about it ? (or that I should be aware of)

from pop.

grp commented on June 7, 2024

I would expect it would flip — springs animate past their final values before settling, and a negative scale is flipped. Usually, the easiest way to avoid this is by setting the clampMode on the animation so it doesn't go past the end.

from pop.

benbonnet commented on June 7, 2024

@grp can as ask you an example of this use ?

from pop.

mitchellporter commented on June 7, 2024

@bbnnt I was able to fix this by setting my animation's clampMode property to kPOPAnimationClampEnd. My animation was scaling a button's layer down to 0 and the spring must have caused the negative values.

from pop.

Spring with kPOPLayerScaleXY flips the image of UIImageView about pop HOT 12 CLOSED

Comments (12)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent