Presentación
HTML (pincha para descargar)
Vídeo
Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
yes good morning everyone I'm Jeremy con and then it title this talk is 60 frames per second or bust bleeding edge web animation so this is going to be kind of a zero to 60 talk to make kind of a bad pun whereas when we're going to talk about like
everything from the basics all the way to the more advanced stuff and my goal with this talk is to kind of reframe how we look at animation on the web and how we approach doing it so let's get into it first I'll introduce myself again hello again my
name is Jeremy Khan I'm a frameworks developer at a company called jelly vision in Chicago jelly visions elevation is an interactive company that communicates via interactive conversations we do some really cool stuff so check us out when I'm not doing
stuff in my day job I spent a lot of time making open source stuff on putting on github and sharing my thoughts on Twitter both as Jeremy C Conn in both places I want to highlight this bottom part here in that I am NOT an animator I am an engineer so why am
I here talking to you guys about animation which is a creative thing that you know I you wouldn't wanna let me near any well you wouldn't want to let me near any place close to you know design tools cuz that's just it's not going to work out
well but I think that you know the intersection of art and science as it's commonly referred to you get something really magical there I think when you get people who are really good at design and you put them if people are really good at like finding
the science behind things you can get us get the best results so I like to focus on the science side of things the engineering components and let the the creatives focus on the art stuff and it's a pretty good team I find animation interesting because
it's a really powerful communication tool I think that animation helps us connect the dots and that's kind of how our brains work as humans static images are pretty good and text is ok but when we see things see things move we can make sort of like
a an intrinsic connection with it we can really understand what it's trying to communicate communicate to us it's important to get this kind of thing right so I've got this talk you know organizing the three sections methodology api's and tooling
but let's take a look at methodology first now this is not an official way of looking at things is just how I've kind of come to see it but there's predefined in algorithmic animations in algorithmic animations kind of deal with not knowing necessarily
what the next frame of the animation is going to be it's it can be unpredictable so it basically just every frame just takes a bunch of input variables and then renders those to the screen and you don't necessarily know what those input variables are
going to be because those could come from user input or network activity or any number of things so this example this is like you know kinematics like physics and you know just responding to the changing state of a simulated environment or reactivity where
again where it deals with like responding to events of some kind such as user input so that would be more of like more like a game so the video games would be more like algorithmic algorithmic animations predefined animations I think are a little bit easier
and that's where you can you can mathematically determine what the entire state of the animation is from any given point and this is probably pretty familiar to people who are you know who might come from a flash background so tweening is just a way of
defining a singular motion just from start to end with an easing formula and key frames are little more than just sequential tweens so a tween that begins as soon as the last one completed and one little one little last piece of methodology is easing and that's
easing is important because nothing in reality works nothing in reality moves at a linear rate of speed there's always some sort of acceleration and deceleration sometimes intermixed but it's not you know it's not perfectly smooth all the way across
there's a lot of using formulas out there these is just a screenshot of easing net which is a useful resource for this sort of thing there's no limit to the types of easing curves you can have but there's a a set of common curves that are there
were many of which were developed by Robert Penner who is uh who was an Adobe engineer and now he's doing other stuff but you'll know them if you see them because they're all over the web they're become more or less standardized so that's
methodology let's look at how we can actually use code to make this stuff real let's take a look at CSS so CSS really just gives us to AP is for for making things move in the web transitions and animations there's nothing new here but it's
kind of interesting to look at how these really you know work together I see transitions as being this reactive approach to animating things and animations being active meaning that transitions they respond to a change in state in the Dom but animations create
[ ... ]
Nota: se han omitido las otras 2.593 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.