Angular 2 Animations Explained by Matias Niemela

Angular 2 Animations Explained by Matias Niemela

Transcript

0:00
just a second edition just like last year but now about anger there to janet
0:15
was between us I work at Google and California with the anger their team and
0:21
I’ve been working on the framework for about three years though the slides so
0:26
for us which the slides be sure to copy that down that will be available at the
0:31
end of the talks so talk about animation is the thing that I’m passionate about
0:38
their love working on the future for you there too so if we think about websites
0:43
we think about four things that made it easier for things that will have to run
0:48
away and this is really nice and cool that we have these features in a browser
0:52
but they’re sitting tradeoffs with each one so transitions between classes and
1:01
her state stuff like that it’s very it’s automatic styles are picked up but
1:05
anything programmatic and controllable is very difficult reforms on the other
1:10
hand are tricky because you do have more programmatic access but you have to do
1:15
all the styles of front and this in turn is a little bit more performant the
1:20
transitions and that leads us to have animations which is the child’s
1:24
conversion of keyframes but what’s tricky about this is we don’t have
1:28
access to the style she
1:30
so there really isn’t one day and that sort of fits everything and the reason
1:36
i’m talking about this is because these three different things are combined in
1:41
there to help her do that let’s talk about a new one so regular ones approach
1:47
to doing animations was to rely heavily on the browser you had a CSS class you
1:52
wait for that to happen then emissions done the framework really didn’t know
1:56
what was going on with the animations and with that in mind everything falls
2:02
down to the dump state if we were to have a different platform say native
2:07
rendering we want to be able to do this regularly so with that in mind you there
2:13
too does it differently and we have to do differently to support all this
2:17
criteria and the biggest changes that we don’t use transitions are confirms that
2:21
all that scary we still borrow the philosophy that transitions bring to the
2:27
table but we do it with weather animations and this whole ecosystem
2:33
gives us a timeline based automation system and everything is triggered from
2:37
important states
2:40
so before searching demos and hopping into things you don’t like it appeared
2:46
she liked the first think the repositories issues Eng comp demos
2:50
instructions on how to run those one key thing is that we have the AP reporting
2:55
seeing you there too and there’s an older version of its debt we’re
2:58
experimenting with that has been most first s staggering incurring but all
3:03
that will be available in the final product but the democrats are in there
3:06
and I’ll go over them and slides so they’re too let’s go over the basics but
3:15
it looks like you have some HTML elements and instead of touching a
3:20
property or a class or events you are attaching an animation you I states what
3:27
this means is when the expression changes to tell you we can estimate the
3:33
arc in between so effectively were setting States Code and animations can
3:39
be activated in between so we’ve we’ve never animation by innovation and
3:46
insight of Arc importance we reference that may amend it my animation code and
3:51
we specify the transition between states so this example we are at a meeting from
3:55
the passage of 0 to the paucity of one
3:59
but you might be looking at this point in the sexual affair but of course it’s
4:03
more complicated than CSS so bear with me you’ll see the power soon here for
4:09
example we have application that has the stuff working where we specify the main
4:15
mission code and we made it so when we click it’s going to target from open to
4:19
closed so we had to my animation code above and when that changes where
4:25
they’re going to be at the open or closed state but we’re gonna animate the
4:29
arc in between so both of these animations are gonna happen for a second
4:32
between the two go from 0 to 100 102 can already see that each had a mission ends
4:39
in a UI states that we have total control the animation from one state to
4:43
the other hand the component itself is still the same so important you I states
4:52
like I said before we’re using the at sign to declare those and what’s nice
4:56
about this is the styling is persisted classes like NGN turn in Julie vinegar
5:01
12 passes removed and the styling was removed from there as well
5:05
here the stunning stays if you specify and then state so take a look at this
5:12
year we have an inbox friends there too we have some very important content in
5:18
the same box as we jump between email messages we can see that emissions
5:23
happening over at a meeting different parts of the page and things are moving
5:28
smoothly
5:30
once again this is in that demo report card so looking at this this is what the
5:38
code looks like HTML template we have a left-hand column in the right hand
5:42
column and we’re using the state value in the middle of the code to change the
5:48
state whether it becomes active hidden and we do that again
5:52
further down on the right hand column and then are components then taps into
5:58
the state changes for being active to hidden and there’s also something called
6:02
avoid state which is very useful one element has been ripped out of the
6:06
picture you think about NGF has been ruled out the page it’s considered white
6:10
so we had to make the transition from one state to the other and if you notice
6:17
in the second transition or actually adding additional styling and then we’re
6:20
doing me destination state animation so this brings to mind
6:26
performance why do we do this new refactoring what we have such a
6:29
different system that deviate so far away from CSS well the biggest reason is
6:33
we don’t want to have to rely on the dog we don’t have to rely on computers style
6:36
because get confused styles tricky and causes brother Jack and we really want
6:41
to use what that emissions finally having the ability to coach in this
6:47
which basically means taking their complicated addition to making simple
6:50
understatements also use a lot of performance and this all works with what
6:54
workers so continuing forward then the only 10 see you do need is the web
6:59
animations polyfill now there is aw three see polyfill which doesn’t work it
7:03
has been used and dirty perpendicular lightweight poly fill which you can use
7:09
directly thank you there as well which is smaller and only has the code that we
7:13
need for regular to work with animation
7:16
so let’s talk about the styling capabilities of this new API
7:21
you might be wondering what happened to classes what happened keyframes how do
7:24
we use those well the good news is that we have a CSS parser built in to the
7:29
framework that means that we can define stuff in a style she whether it be CSS
7:34
classes or keyframes so if you’re familiar with the ultimate CSS library
7:38
that is a bunch of key fares right so we reference in a component that’s how
7:44
we’re defining inline style and that’s how we can actually use the CSS class
7:48
directly in our coat this is really nice because you could have a completely
7:52
external style sheet has nothing to do with the can tap into the city has
7:56
classes fully you can also use the key frames for CSS and we can also generate
8:04
a key from directly within the API so this will generate a key frame with four
8:08
steps but occur for one second
8:13
we can also have a really cool teacher called auto salaries so the dreaded
8:18
height auto things has been resolved the finger there too
8:22
let’s take a look at a demo that does this so here I have a few entries a few
8:28
stars and she’s a competent xvideopedia and this is an accordion animation that
8:34
emits out and then they took out one and if it’s one o’clock on another and it’s
8:39
not there now the animation itself isn’t anything stellar but if I were to tell
8:44
you that this is only about five lines of code just for the animation keys and
8:48
it’s fully able to detect the height so if I change it it’s able to detect what
8:53
the final height value is automatically and the way that it does that is
9:01
automatic styling so if you pass the CSS property with a star it will
9:07
automatically pick up that value from concluded so you don’t need to the
9:10
destination so anything that extends contracts is far easier to do with
9:15
Indiana made negative too so
9:25
what happened to all the jobs because this is still here so we have to have
9:33
JavaScript for the sequencing and stuff like that
9:35
well i think is that the judge your quote isn’t entirely necessary with the
9:40
safety because if you want to have dynamic properties so here for example
9:45
we want to have a model that shows up on a page where you want to be bound to the
9:48
X&Y coordinates you can register transformation function that will figure
9:52
out that dynamic styling is hostage directly into the intermission also you
9:58
can have this isn’t working just yet but we have time to do this will be able to
10:03
have complete access so we can directly pull data from the component passing
10:07
style into the intermission sequence so what about cost us like we’re running
10:13
out of patience in parallel with performing easing well let’s take a look
10:18
at our Author demo here we have a moral its gonna appear on page we could come
10:22
in contact us and that has a bunch of elements within the Monon animating and
10:29
animation typing in parallel we exit what does this look like here we have
10:36
usage of career work for selecting elements within the model are playing
10:40
styles and we are at a meeting in parallel if you notice the group as the
10:46
top of the container and the inner items so what’s that this is a feature that
10:54
wasn’t another one but it was limited to what CSS can do a staggering which was
10:59
hacked together with Angie animated but we have full support we can either use a
11:04
collection of existing staggering capabilities weekend even create our own
11:09
certain capabilities
11:11
so let’s see Giffords up I was collecting all the energy for that
11:15
update on a page like an acceptable to be hidden in a staggered over them and
11:20
animate them in a piece to pass that should actually be a passive one so for
11:29
example I have my own custom stickers method that somehow figures out the
11:34
duration or delay based on some environment settings in the done so if
11:38
you think about a window or wrote you click on a routes and ago the right-hand
11:42
page click and select time did you could have a stagger that could correspond to
11:47
what direction you’re going so far as set forth here we have a bunch of boxes
11:54
that are all staggered with a specialization and this is available in
12:02
the ghetto so component access this is a very powerful future what what would you
12:09
say if I were to create animation but I want to tap into on the done event
12:13
happens my component or I want to be able to control it
12:16
well you can inject well not inject but you can pass and annotation into class
12:25
and have access directly to the animation so therefore we define the my
12:30
animation quarter and its mission code we can ask for a directly under
12:34
component that we can tap into the done events and stuff like that and we can
12:40
also control the animation frame-by-frame even if the animation is
12:44
gigantic sequence that touches multiple elements so here we have a demo of that
12:48
so let’s refresh so I clicked bottoms boxes moving around but in my component
12:55
I’m accessing it directly frame-by-frame and this is what we do and you do not
13:01
have to do anything else besides asking for the animation getting the active
13:04
player and setting its position percentage
13:08
if you notice as I continue to continue to rate is done callback happens and we
13:13
are ready
13:24
so that was that was happening there we had a keyframe animation spread across
13:29
multiple steps and the weather conditions player is able to consume
13:33
that and allow us to animate it piece by piece so customer enters custom
13:40
rendering is a special feature in there too or you can swap out the vendor code
13:44
with a different API and then over to do this we had an enemy message directly
13:51
enter render which looks like this that contains the element and a bunch of
13:56
other properties and all your code is implement this and have autonomy so all
14:01
that stuff with him at this step and make this step all that choreography
14:05
code is handled by angular all the CSS code is parsed by angular it’s all
14:10
delivered to the platform so with the folks in a descriptor a nice enough to
14:15
put this together for what they were doing was there using get a Michigan
14:20
note that this is older version the Ingenico there was an apprentice that I
14:24
had and they’re running on iOS and Android instance of this using these
14:31
animations directly and running it on a native level but this is nice because
14:37
you don’t have to do any missions in the way that iOS or Android to them you just
14:40
do them in the way they used to using CSS
14:50
and it is very close to having the foundation in which involves the dynamic
15:01
styling the CSS parser and the ability to sequence animations to get there so
15:07
please wait a few weeks it will have the same here the API is vital we know that
15:12
this is definitely going in and it’s going to be exciting what’s it’s done
15:15
thank you to each of these talented programmers you guys helped me a lot
15:19
with a presentation next bunch to Robert he helped to the demos and Thomas and
15:24
the three of us have been planning this API for a long time
15:27
special thanks Alexander need a script who helped put the video together
15:31
putting that out there and also for taro for including Indiana Volunteer talks
15:37
the middle Martin is helping me put together the weather division so this is
15:43
a collective effort and you guys that are wonderful job thank you
AngularJS 4U is a development blog and Angular Community where you can share your latest ng development tips, articles, demos, plugins, modules and more.

8 thoughts on “Angular 2 Animations Explained by Matias Niemela

Leave a Reply

Your email address will not be published. Required fields are marked *