Add animation

[crutchcorn]

This should close #4

A preview of the animation:

[vonovak]

@crutchcorn thanks for this and the other PRs, there's now a conflict, can you please resolve it? Thank you!

[crutchcorn]

@vonovak conflict is now resolved and the TS usage was improved to add mention of the style prop

[crutchcorn]

All of the feedback that I was able to change without breaking the animation was made. README updated, the animation is now native, etc.

That said, I could move the variable out of useState with my demo code of two checkboxes as one was always true when it should have been false for an initial render. Likewise, I can't remove the second icon as it's the base to part of the animation to always have it displayed

[vonovak]

@crutchcorn I pushed some changes to your branch, can you please test it out? Thanks

[crutchcorn]

The animation isn't quite the same (as the one linked in the issue itself). Namely, the unchecked checkbox seems to move as well. Outside of that, it works for me 👍 I'm personally looking for the animation as I provided it, but if this library wants to move forward with the current animation, it's entirely understandable

[vonovak]

'm personally looking for the animation as I provided it

can you please record a gif and show me "checkbox seems to move as well" issue that you mentioned / show how it's different? I used the same animation logic as you did, I only added opacity animation to the view that shows border, because it seems to be present in the original issue too and looks a little smoother. Thanks

[crutchcorn]

Oooh that would be why. The opacity animation for what shows the border is the behavior shift I saw in the animation. It seems like the original linked ticket did not have the border fade out at all, which is why I saw it differently. I'd personally prefer the underlying border to always be present, but that's just me

[vonovak]

It seems like the original linked ticket did not have the border fade out at all, which is why I saw it differently

if you look at it closely, or watch the attached recoding slowed down, you'll see the border does fade out, which is why I added that part :) So if you want to have that animation more customizable, please add some way to do this, otherwise I'll probably marge as-is, thank you :)

Screen Recording 2020-04-15 at 09.35.49.mov.zip

[crutchcorn]

I think I see where the misunderstanding comes from. If you look at the animation, the entire selected item has an opacity lightened on the onPress styling:

But, if you actually darken the image (to count against the onPress opacity fade effect, you'll see that the outline is always present:

I'd argue that this effect is handled by an opacity: 0.4 or so is applied to the entire TouchableWithoutFeedback parent button that also contains the image, rather than applying opacity to the border itself and as such, the opacity should not be applied to the circle button itself but rather to the parent if an effect like this is wished to be recreated. (as you can see the image above the circle toggle being faded when they press on it as well)

[vonovak]

hello again 🙂

If you look at the animation, the entire selected item has an opacity lightened on the onPress

yes, that is true and I noticed that.

But, if you actually darken the image (to count against the onPress opacity fade effect, you'll see that the outline is always present.

I think I don't understand this point - yes, the outline is always present but it has some opacity applied to it. And yes, if some element has opacity, and you counter against that opacity, its effect is canceled. I think what you're saying is that the border does not have any opacity applied to it. (?). Let me share some screenshots from the video I uploaded previously:

before pressing

after pressed

after releasing - the border is barely visible (I can see it, but I bet people who don't have a good display wouldn't), the phone icon is more visible but the border is less visible, therefore there must be something that controls the border opacity other than the parent view

end. compared to the previous image, there is very little difference between the phone icons, but there is visible difference between the blue color of the checkbox, therefore it follows that color of the checkbox is also animated and it is not controlled only by the opacity of the parent view

does this make sense? Do you also agree that the border and button opacity is controlled also by something other than the parent view? Thanks.

I also adjusted the opacity range used by the border, it looks a little smoother now.