search

Digitalminion / DM-ng-legacy-foolish-endeavor

0 stars 0 forks source link

Animate JellyFish Artboard #23

Open alyons-dm opened 7 years ago

alyons-dm commented 7 years ago

mujellyfish-01

dataminion commented 7 years ago

This is good I think at some point one of the next things we will need to talk about is how to move an element across the art board without hiding it but by actually repositioning it

alyons-dm commented 7 years ago

So, we had this issue before but the colors from this svg are bleeding into the poppy svg. I tried making divs around each but it only fixed the poppy’s background. The foreground looks CREEPY. My poppy svg look slike it has an eyeball in the middle of it...

jfn6030217 commented 7 years ago

Unfortunately, there were no commits made against this branch, so I was unable to evaluate the code and offer any feedback. If you could please commit the code in its current state, I will figure out what is up and get back to you.

jfn6030217 commented 7 years ago

This article refers to what I mentioned about having to rename things in the SVG, and is what Austin mentioned, as far as I can remember. If you load two svg's into the same controller: and the second svg uses elements named the same as the first svg, then the css for the second svg will overrule the css in the first svg, and it'll look weird. The solution is you have to label stuff explicitly in Illustrator (apparently).

http://stackoverflow.com/questions/38030920/two-separate-svgs-are-colliding

alyons-dm commented 7 years ago

started to organize this last night but did not start animating. wanted to talk over with jeremy about best course of action.

jfn6030217 commented 7 years ago

I feel that in this case, because the three images are different (or at least #1 and #3 are different from #2), and because this ticket has an added new component (fading in and out), it would be appropriate to have three static images, and to use this as an opportunity to demonstrate cross-fading. We can find another ticket that would be a useful place to do real animation (such as taking a single entity, and changing its (x,y) coordinates incrementally)

alyons-dm commented 7 years ago

I have completed the basic animation, but am now working on the fading aspect!

alyons-dm commented 7 years ago

https://docs.angularjs.org/api/ngAnimate

Trying to get this to work

alyons-dm commented 7 years ago

I believe I have completed this ticket

jfn6030217 commented 7 years ago

I agree that you have successfully implemented a means to switch between the objects in the SVG, using the same pattern that is being used for the poppy.

The description of the ticket uses the phrase "fade out" and I was a big fan of that, because that (coordinating the opacity of multiple objects, aka, "fading") seems the next step to learn after mastering switching between elements in an SVG. I did some google searching, and it appears you can create fading animations directly in CSS (no javascript required), such as in https://css-tricks.com/animating-svg-css/.

Because I feel that learning cross-fading is important, I'd like to have a discussion about whether cross-fading should be covered under this ticket, or if we should open a new ticket for it.

jfn6030217 commented 7 years ago

The previous comment was premature. There were some commits that implemented the fading that were synced after I wrote the comment, and I withdraw the observation. Everything looks good now.