all right thank you thank you yes here's one
so yeah hello everyone i'm Maurice I work as a front-end web developer at longtail here
in perth there's a few of my co-workers. so before i go into some actual CSS and
JS code examples i'm going to take you a little journey and some words about
animation of why do you actually have animation in the first place
well why do we have animation the first place well *coughs* paint a picture this our
first UI screens kind of looked like this they were did not had animation and
you would go between screens and it would just jump cut to the next frame
right so scientists actually figured out that once you're working on these
screens your brain is just focused on this screen and once you go to another
state you jump cut to another state you're you kind of get brought out of
that processing power and you have to take where where did i go from where am
I now how did I get here Who am I so they
figured out that the frontal lobe of your brain which handles visual
perception is perfectly capable of offloading that that information so you
can just keep focus on what's important on that screen and let your your brain
handle the either fancy word for this this spatial awareness so yeah that
would takes a jump cutting between frames so fast forward a couple of years
the World Wide Web had matured and Adobe Flash has become super popular
animations were cute and colorful but they were just overused and just
fighting for user attention really the websites had fancy splash animations
buttons were shouting at you and I just really got distracted by the cont.. you
distracted from the content that really matters you weren't seeing the content anymore
so there will have to be come down a bit we had to learn where to apply what we
have learned from interface design to motion design as well
so just a little bit later when old mate Steve Jobs wrote an open letter to not
use Flash anymore we kinda had to step up the game to develop and standardize
CSS animations and specifications across all browsers so it took some time for
all browsers to to settle them one spec and that's the story on its own but as
flash was phasing out support for CSS was phasing in and as interface design
for mobile phones became really high in demand as we as it is like at its peak
right now I feel like motion design became important two to four interface
design so this week a great example of this is the material design guide Google
made around 2014 I think it really gives you an idea of how motion just tells a
completely different story like it just helps you keep track of how did you get
to that screen that color scheme for instance so yeah it really makes you
think about animation and to present information more meaningfully I have a
link available to the actual material design guides at the end of this
presentation if she interested so what are some ways to apply motion design as
an interface designer to make a more meaningful experience well here's a list
I found which i think is really helps you approach your problems approach your
website and see how what can you actually how can you hack your website
to make it more a meaningful experience and transition experience for instance
if you go between presentation slides like it's well shit it goes the wrong way
sorry didn't see that it goes in out of the left comes in from the right so it
keeps track of where you were and where you're going to that's a trend an
example of a transition animation another example here is this voice app
keep it keep your attention on the blue button there which is I think means
stands for record I just opens up this wall
another state if you will but you're traveling between states it's really our
to its low frame rate the Google inbox is an example of material design there's a
bit small there you go trick I just learned from Julie so when
you press play you're in a you start off in an email list but as you tap that
email there you kind of move all the other emails out of the way and you zoom
into the email itself it's like you're moving a stack of paper out of the way
which is exactly the metaphor material design is going is going for
supplemental is an animation as a it's a pattern which will add secondary
information to the main stage so this could be anything from notifications
alerts updates shopping carts updates auto suggestions etc but as you can
imagine these are easily overused mr. trick is to stay subs all of these
animations otherwise you might your user might confuse it for the one we're gonna
sign up for another newsletter which is just you get become blind to those kind
of things and this example is a when I was shopping for makeup there you when
you see it you can I'm adding this to my back in a shopping cart comes out from
the side let me actually paused out there if you didn't see there so the
shopping cart comes into screen which is a supplemental animation but then also
this progress bar fills up which is another supplemental animation which
tells you you're $12 away from standard shipping as you probably buy more makeup
in case you missed it in here is a cool is a different pattern called feedback
one because I clicked on this button and this sting starts drilling and this is
basically telling hey I I know I saw you clicked on this
button let me actually go back to the database and grab what you're looking
for and then put it back here on screen it's telling you you click this button
you don't have to yeah you have to wait for a second just it's the site is
working let me get back to you it's one of the best patterns that's not used as
much in our in the most website actually
it's another great example of a combination of the previous ones so you
click on the button and then thus accelerate information of the
percentages come with the screen seeing how far you're on and to this
downloading and then it tells you up check it's done it's all very delightful
animation as well it's very seamless this is probably one of my favorite like
very functional like we all been on Facebook before and the layout loads the
styling loads and the content takes a while I have to actually load in so what
you get is like a skeleton structure of the where the text is going to be and
the approximation where your profile picture is going to be so that's a
actually quite a recent trend compared to the other ones that's popping up just
to have like a in where it's going to be like that's where they're going to put
it we're expecting it to be demonstrations is basically well you're
just showing your product and how it works right it's a visual representation
of how something should work it could be your products or some action you just
did to give a a metaphor of what you just did is this when I did my tax
return in 2015 you just it the thing this the screen fades away puts things
in an envelope like as a metaphor for well we packed everything up we're
staying it off to the cloud I guess and then it arrives and it's checked and you
go back to the main screen it's like you were brought along the journey of
what happens after you click send an example of a product being put together
its system might be tiny so this is near the end of some burgerking website this
is a scrolling website and the burger is just being assembled as we scroll
through it it's pretty graphic so as you can imagine this works great for
scrolling websites or parallax websites or if you have a design like an
infographic you can just put all these things together as you scroll down the
page and make your point clear of your story you're trying to tell on this
website the key points for demonstrative animation is that they are insightful
they add something they don't add something they they put your story or
context into a perspective one example of soumada in contrast decorations
they're very similar to decorations very similar to demonstrations but really its
main purpose is to add flavor and delight
if decorations are the fats and sugars of the animation food pyramid they make
great flavor enhancers but moderation is key the flesh splash intro animation 5
year from 8 years ago four were some examples where it's just being overused
there's not to say that and having not having animations which don't fulfill a
purpose or since it's perfectly okay to add some delight to your project this is
an example that popped up quite recently on everyone's feet you might guys might
have seen this this is just amazing it's not obtrusive at all it's just I
mean let's see that again did the Yeti yeah once you focus on the
email screen it looks at it and once you start typing
and if the email is valid it's like super yay and it keeps following you
until the end and height puts ants for its hand its hands in front of its eyes
once you reach the password that's just an amazing I love that one
I love animations like this I think there you get a lot of these on a
dribble and there's a repository in line called UI animation all these links are
put on some Rick Mayer readme file somewhere at the end of the presentation
so using these approaches these patterns to figure out how you can make your
website more meaningful more engaging
you can also had bad user experience such as loading times or flashes of
onstyle contact your base is staying on the same page but you're doing some
sleight of hands basically to keep things working with back by wait for
things on the back end to come back to the front end
if you're considering implementing a complex animation keep a check on how
cpu-intensive your animation is because they do tend to get prettier to ramp up
the old fan sometimes on the laptop now if that happens you can be sure that if
you watch this website on your mobile your battery will be drained in like two
minutes or unless you get like a fancy new Windows Phone or any know what's
there it's the current good phone another thing to know hardware wise is
to keep your frames per second away make your code performant and optimized so
this way you're able to hit that sweet spot of 60 frames per second if you're
going through a website and it's just smooth it just feels like it's well
performed like you trust this website if you're going anywhere below let's say 30
frames per second you you start to notice jank
if you're unfamiliar with jank its that effect it happens when yeah your browser
needs to drop frames so no to keep up with your animation so it will start to
it will be stuttering juddering and just playing whole things sometimes
basically you went play any of these animations I guess this just smooth but
this could be jank so to speak if you like them oh no more but these come just
come grab me after there's a wall more theory about this
there's also reaching a very natural animation that's like an organic
movement before I bring out the extra code examples like to point out this
concept so let's say you laid up your animation you might face a challenge of
looking the more organic Disney animators have a thing called 12
principles of animation I won't go to all 12 of them but that's what they use
to make their work more organic it stems from the idea that you imply physics -
your movements elements have momentum and respond to forces like gravity so it
takes time for it to speed up or slow down and it travels in a curved lines
instead of straight ones I think an example is if you on a Mac and you use
the Stinger it kind of goes the fans that thing is called
so I'll just picked a few of them which added the most anima C to a project Wow
and entered a is in and out that's probably one you guys have used before
because it's a readily available in CSS and JavaScript it's basically just well
accelerating and decelerating at the start or end of the animation
imagine a shopping cart or a side bar just coming in from the sides and coming
back in and it doesn't go like this fit that's very robotic
just smooth squash and stretch you might see this and like tooltips or modal
pop-ups they just come up on the screen off or if you're on a Mac when you're
good notifications in your doctor might just pop up I've that all the time when
someone else like tries to D a meal and follow through and overlapping action
that's something you'll see on a lot of scrolling websites if you scroll down
content kind of just animates in from the button to like it fades in it's like
you're going for a stream or something some other websites if you scroll down
and up real fast you you'll see the you see the elements actually having some
kind of yeah ease or well follow through I guess anticipation is when you hover
over a button and it makes you it make gives you an indication that you can do
something with it like you yeah it gives you an idea that something can happen
after this I just explained arc of the cool fan so the other ones are super
important as well but I'm not going to go in all of them but the each single
one of them you can't apply to make a more like organic human or natural
movement let's see
you basically have three approaches when you make animations for from the web in
terms of coding CSS transistors and CSS animations with all they're both CSS I
guess but they do have different approaches why why you would use this
CSS transitions is usually when you have two states like a start or end State you
just slap a transition line at it and it will now transition on 250 milliseconds
between my badass color and this blue I'm gonna say this when you have more
keyframes if you will between core States between you want to animate you
have to upgrade to see us as animations as you can see at the bottom there it
goes to three different states on on the start middle and end in this case
I think I'm actually animating some rainbow I think you've seen it on my
buttons earlier the patterns when I hovered over it the cool thing is that
once the animation starts or ends or go through a loop you can actually catch
those events in JavaScript so if if a certain animation ends and you want to
make sure something else starts like a sound or like a it goes back to the
start of some other thing or our video starts you can catch that event in
JavaScript and just play that but you can also start more CSS animations and
gets very complex so yeah if it gets too complex you might consider upgrading to
JavaScript instead because she does have more control over how you create your
timelines this is an example from a very much the industry standard of tween max
by a green sock and then make up these names sorry green sock has been a around
the animation food web industry since a long time there this is basically the
same syntax of what he what his animation library was like in flash the
flash station extra strip ActionScript days so there was if you were actually
developing back then it was pretty easy to to make a jump to a Java Script
there's an actually an exciting new API coming out a new feature coming out from
upcoming browsers called the web animations API if if you haven't heard
of this just means that it's this kind of syntax is built into the browser so
you don't have to include any newer animation api's sadly edge is lagging as
usual so we're not quite there yet but as I was making this presentation I
figured out I read that Google actually has an amazing polyfill if able so you
can actually get your feet wet on web animations API which are probably
going to do tonight after this if you have some really fancy animation you
want to do like 3d or some some weird stuff yep but you're gonna have to
upgrade to canvas canvas is based on HTML element use you put on the page and
with JavaScript you have more company you have a broader graphics API
available there are some amazing libraries like 3jf d3.js which help
enables you to make amazing polygons everything for a relatively small I've
been for here before for relatively small kilobytes like the libraries are
really small I know where I'm going next let's just jump there so I'd like to
walk you through the approaches I made with these kind of examples this is a 3d
cube it's 99 percent CSS and the way you set this up is let's see if I can if
this is readable this is readable
let's imagine just this system main container and this is the first instance
of this cube which is just 0 0 pixels I need to have that there because I can
just move the entire thing around if I wanted to without having to worry about
offsets or anything the center point of this this diff will determine the
locations of these other six cubes now I will quickly move things around so it
faces me for what I'm about to tell you
it's so easy to just do this in the dev tools so the idea is that every diff
here is a face of this cube which I'm offsetting with transform so if I do
this you can see this is the front of the queue which are if translate see I'm
just moving it towards the camera if you will is the back of the queue obviously
it goes - for this side the thing you have to know is the transform property
it matters which order you put no that matters which order you put your
properties in so first it does a rotate X and then it does translate C so what
that means is that first I let's see which one is it so first it was facing
towards me and then I I twisted it and and then I applied the 150 pixels offset
again so every every face here has a 1 on a 50 pixel offset basically so you
have to apply this specific style here I hope that's readable it's preserved 3d
this basically says everything in this diff which is a child of of this diff
will have to like its 3d properties if I turn this
off it just becomes a flat like so what it's weird
the only JavaScript I really did was to keep track of my mouse position and have
a variable call if this top left is a zero zero AB on the right is 100 100
it's just some calculations you can do but apply them as the perspective origin
of this just its parent what that does is whatever you put on on your on your
canvas on your on your whichever HTML elements you put on your page they will
all move in unison with whatever the perspective origin is kind of imagine it
being a camera which you're pointing anywhere and all the elements will just
move in place in this way you don't have to move everything on interactional
Mouse move or on scroll you just change the perspective words in all right
one of my other favorite text effects is this one which is basically a SVG but
I'm chasing the the effect so that if CSS and I did not make a SVG of the
actual text and put it on the only on the on the screen I you can I just use a
I just use the here we go the the text fields for that and applying these
effects to it so what it means is I can use any font to what's popular font
cursive was that a smiley
already can you use any font here to apply this effect to of course
everyone's favorite papyrus see if I can grab the animation here so there's a
keyframe animation here I'm gonna get the code
texts as free text yeah
this is the hub using gets free by the way to make this thing but so it might
have been a bit up for skate it's hope you can get it so there's just text in
here like yeah SVG styles where are they
these are the GCSEs this eases things that are applied to it it's just the
offset I'm actually animating probably and every oh yeah and in the actual SVG
they all have a separate offset all this being handled there so that's a effect
that actually has quite a big can every browser actually can run this because
it's all an SVG time for one more demo along how am i doing
yeah okay just keep going again this is also a popular effect which I found
interesting to explain so these are really just two two divs and I'm
applying a SVG effect to it so you can see just two diffs and here's my SVG how
that works is if I go into the SVG there's just a definition and a filter
so I can apply this filter to any element I have on the page this
technique works that if I find a little overlap there how this works is every
circle there gets blurred and then it gets flattened again so it becomes a
circle again and then it's putting back the original image on top of that I hope
I can illustrate this by removing these for a second so the hair it is blurred
and here you can see the tea it's not unblurred it's kind of made Bowl again
it's really weird but you see these effects pop up every
now and then and just put it's highly performant and amazing if you don't ride
let's see the sprite sheet had an interesting technique I found the other
day this is the if you're on Twitter we'll who's still on Twitter nowadays
but if you're on Twitter if you press the like button it gets this cool
animation like this what you use did what you used to do with this is you
grab your sprite sheet and with JavaScript you keep offsetting the the
background position so every 200 milliseconds you go to the next frame
let's say we reach the end of this but you can do this in just CSS with
keyframes as well this is spreadsheets
with just a few lines like so this is the animation you're going from
background position 0 to 100 and magic number the magic property here is you do
it you're doing it in steps so it's it's not interpolating through the entire the
entire way just just showing 28 keyframes for the entire animation okay
I've got one more frame we want to show you though what was that didn't see that
yeah one more thing I want to show you I hope you can help me out with this one
it's my last frame thank you it's working
For more infomation >> Crimes (Increased Penalty for Providing Explosive to Commit Crime) Amendment Bill - Second Reading.. - Duration: 1:08. 
For more infomation >> 얼굴 작아지는 칫솔 마사지 방법 ► Skills for Life ► https://goo.gl/3ZQLoQ - Duration: 2:22. 
For more infomation >> High-School Students Build Prosthetic Hand For Injured Veteran - Duration: 1:33. 
For more infomation >> Social Security (Stopping Benefit Payments for Offenders who Repeatedly Fail to Comply with Commun.. - Duration: 10:03. 
For more infomation >> Crimes (Increased Penalty for Providing Explosive to Commit Crime) Amendment Bill - Second Reading.. - Duration: 3:02. 
For more infomation >> Refreshing Vegetable Raita Recipe | Raita Best For Summer | Raita Recipe By Pramilas CookBook - Duration: 6:44. 
For more infomation >> Crimes (Increased Penalty for Providing Explosive to Commit Crime) Amendment Bill - Second Reading.. - Duration: 10:15. 
For more infomation >> Social Security (Stopping Benefit Payments for Offenders who Repeatedly Fail to Comply with Commun.. - Duration: 10:13. 
For more infomation >> Social Security (Stopping Benefit Payments for Offenders who Repeatedly Fail to Comply with Commun.. - Duration: 3:05. 
Không có nhận xét nào:
Đăng nhận xét