Animate the Web with Ember.js

Video in TIB AV-Portal: Animate the Web with Ember.js

Formal Metadata

Animate the Web with Ember.js
Title of Series
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this license.
Release Date

Content Metadata

Subject Area
Were you a fan of animated cartoons as a kid, and wondered if one day you could create your own? Here's the great news: you can! Using open web standards and Ember.js you're able to create frame-by-frame animations—and even to make them interactive! This talk will explain why open web standards are more important than ever for creating animated content. We'll see how we can leverage the power of HTML5 Canvas in Ember efficiently and how to make animations interactive with the support of actions.
Boolean algebra World Wide Web Consortium Electric generator Connectivity (graph theory) Plotter Software developer Bit Basis <Mathematik> Mereology Element (mathematics) Hand fan Latent heat Exterior algebra Tower Different (Kate Ryan album) Energy level Website Self-organization Figurate number Spacetime
Classical physics Frame problem Plotter Image resolution Multiplication sign Computer-generated imagery Computer animation Mereology Machine vision Element (mathematics) 2 (number) Sequence Force Medical imaging Frequency Mathematics Latent heat Visualization (computer graphics) Computing platform World Wide Web Consortium Forcing (mathematics) Software developer Interactive television Sound effect Maxima and minima Sequence Frame problem Digital photography Frequency Visualization (computer graphics) MiniDisc Pattern language Codec Musical ensemble Electronic visual display Reverse engineering
Software developer Flash memory Content (media) Website Insertion loss Multimedia Web browser Game theory Information security Computing platform Modem Spacetime
State observer Context awareness Group action Euclidean vector Structural load Code Length Multiplication sign Source code 1 (number) Sheaf (mathematics) Set (mathematics) Stack (abstract data type) Mereology Computer programming Medical imaging Hypermedia Different (Kate Ryan album) Object (grammar) Core dump Cuboid Error message World Wide Web Consortium Clique-width Software developer Sound effect Instance (computer science) Flow separation Category of being Vector space Right angle Summierbarkeit Spacetime Point (geometry) Functional (mathematics) Clique-width Computer file Consistency Connectivity (graph theory) Similarity (geometry) Web browser Drop (liquid) Graph coloring Field (computer science) Element (mathematics) Power (physics) Number Latent heat Spreadsheet Term (mathematics) Computer-assisted translation Computing platform Default (computer science) Context awareness Addition Graph (mathematics) Demo (music) Consistency Physical law Content (media) Group action System call Frame problem Graphical user interface Video game Object (grammar) Library (computing)
Conic section Context awareness Group action Euclidean vector State of matter Code Decision theory Multiplication sign Disk read-and-write head Medical imaging Mathematics Different (Kate Ryan album) Semiconductor memory Computer configuration Cuboid Chi-squared distribution World Wide Web Consortium Touchscreen Software developer Constructor (object-oriented programming) Electronic mailing list Sound effect Bit Control flow Computer cluster Right angle Pattern language Cycle (graph theory) Asynchronous Transfer Mode Reverse engineering Point (geometry) Dataflow Game controller Software developer Connectivity (graph theory) Web browser Code Attribute grammar Element (mathematics) Number Sound effect Local Group Latent heat Goodness of fit Spreadsheet Iteration Energy level Hydraulic jump World Wide Web Consortium Default (computer science) Boolean algebra Dependent and independent variables Key (cryptography) Inheritance (object-oriented programming) Line (geometry) Cartesian coordinate system System call Web browser Frame problem Computational complexity theory Component-based software engineering Commitment scheme Synchronization Object (grammar) Family
Mathematics Spreadsheet Single-precision floating-point format Object (grammar)
World Wide Web Consortium Standard deviation Theory of relativity Software developer Sound effect Control flow Power (physics) Medical imaging Mechanism design Word Latent heat Goodness of fit Different (Kate Ryan album) Nichtkommutative Jordan-Algebra Right angle Contrast (vision) Object (grammar) World Wide Web Consortium
and a few other people hi everyone I'm very excited to be here and today I want to talk with you about how we can bring animations to the way what he could should go home with after this talk is actually to have a better understanding of reanimated the coming from and how the history looks like also which tools and API you can actually currently used to transport animations the web today and how we can create our own animated components as to actually leverage and create these animations today and before we get into the full topic i want to sharply yeah tell me a little bit more about myself as for example what accounted for work and she actually has the really great joy to also work with and on a day-to-day basis stresses regrets when my with the company that is costly figure which offers an online lead generation tool for it seems to better understand who was of the web site and how they can help their customers also what is interesting for me is what I actually do after work and so I'm from Boolean him the background you can see the very beautiful and Alexander tower and what I like to do here is jointly and vegetarian alternatives to the end of the city in plot and should also be very famous for that so I'm looking forward to this this week I am also I'm a big fan of art and I like to draw myself and would also like to do is engaging the taxi and so I'm 1 of the commenters and organizers of different workshops of old texts Lillian in which tries to offer free access to learning resources about technologies and also just easily are started with 2 other and that developers space in the land that Kinsman just kinship to realize our and and Bible ingest need up so if you ever happen to be in town and excellent to say hi to so the be really happy to see you there that's there's also a really great passion of mind that brings us much closer to the topic of the sexual talk and this Saskatchewan so there was a kid I really like to incest probably many of those of you as well and if we think about animations and consumes on a more abstract level we realize this is nothing else than actually animations that we see on television or in the cinema of and the interesting part about this we as developers actually thing about so many other different things when it comes to animation you might think about something like UI elements that have a specific
animations 1 we want to have a over and the patterns that we just created for wet or we might think about something like seems pensions issues with an electric fire which we already saw in the former talk also what comes to mind are things like data visualizations as so this is something that also helps all users to better understand what is happening in and that at that building and by the way if interested in this specific topic highly recommended to check out John reverse talk on a CG animations interactions to moral but summing this up all these elements that we can describe under the category of of informative you X so everything that informs our users actually what is happening on the website and whether should be heading is something that I won't talk about today today I want to talk you about how we can create stories and actually 10 narratives on the web using any nation so with that said that's many of look was an animation is actually consists of How can get define an animation and what are the basics of actually creating traditional and nations probably the most well known and very 1st example of classic animation like frame-by-frame animation is what we see here in the background it's as a sequence of images taken by the photographer you what rich already in the and end of the 19th century in which the in very strenuous work actually had to take 12th different images of a writer uh riding on a force along the Pollard to track and he would collect images put them onto a disk and a specific device that you use back then and I'm century to actually create animation and here's the reconstruction that you can see all of this kind of like the impression that get looking through this device that if we see these images in rapid succession it seems as if this is right on the last actually literally rewriting a the cross attract although it's just the composition of different still images it should be
I take a look at this example realize an animation is not much and is much more than just for the kind of images that is shown in a specific frequency and the light on creating the illusion of motion to and this effect is something that is not inherently and the EU and essence of animation itself of something that actually is mostly plot powertrain what our brain and she does this it has a specific resolution for like changes in our vision perception and so and an interesting and an interesting work by at psychologist called max timer described this phenomenon is the phenomenon and you realize that with images that we see that and has been have been shown in a certain delay that is lower than to 1 of seconds or an optimally around 60 ms it will give us a solution that they are not 2 distinct images this actually motion between these 2 images that perceived and this is quite interesting you can use of actually to create animations just as still images that we show in this certain time frame today but so with that sentiment thing no OK this is like 150 years ago how is this relevant to us today but the good thing as the story of animations continues on so today and we as developers might find really interesting can we also bring this to almost laugh platform that you know actually the platform of that and yes actually can do and in the next part I want to show you which kind of tools in a GIS can be commonly used and have been very little reuse in the past to achieve this bands there's really no
pun intended right that's probably many of
you you in the audience can still vividly
remember that there was a specific tool used for or or
indicates to create animation on the land
and you might also
the remember when it 1st release loss was what
actually mystery 20 years ago and the end of 1969 the 1st release of flash was out and this kind of like multimedia platform enabled us to create games animations many other multimedia content and also delivered to the web but as many of the as if you know the popularity for flash decreased many developers abstained fractures so implementing that in the web sites and they where we are kind of like shifting to another space where well like a KB countries anymore there's a lot of controversy around security issues as this platform and also the browser support is not really given because minerals opted out of still supporting them but luckily already quite a while ago about and to some 14 really officially accredited by the w 3 c we have a new here on the rise in and what as many of you know I know of no already gone
away and this 0 this quality of life that's right and attention if I can get a lot of this very lovely things that we use to do and to create and slashed and also out of the box we get like many elements we get access to nor API and also we get animations just out of box implemented for us to use and create new features on the browser if I talk about additional 5 animations and I use the term revenues so although the addition of practices specific to a certain features uh around specification I will also includes all the core features that you get from Caesar's 3 I will also include all source JavaScript libraries that are based on of specifications and many others that I cannot really go into further death in this talk that's um just to reactive assurance um summary of what we can use to realize that many things out there that can be used to create all wet summer powers and a she's and the big advantage of already son obviously that they open the section means fast developers we achieve insight and how the specifications are made and you might even have the power to influence whole they offer their progressing in the future what lots get as a certain consistency as these technologies mature alright different browsers over the years we realize the features of the bill now and this whole retina will put way forever long time in the future we get a lot of reliability in our code and realize this is something that is meant to last and also the really great thing is because the web so omnipresent we can actually reach all users with the animations we create based on this what works on us on any device any time anywhere you want so relevant answers around this concept of embracing open that connects to create content and specific animations and interestingly with their regards to other things that we use before or example Flash to create animations in I think what about what about actually but what the experience for all the people that had don't have really strong background in programming people are maybe not so familiar with the Web as Platform and that will allow us to use graphical user interfaces to create the concerns and also tell the stories that the them just to town the past and if we have a look at that we've the I'm here might kind of further investigates holders actually unfolds and In this regard that I found really really powerful a quote from a region of wars and about winning cartoonists and also that animations at cats in the community and she's talking about the concept of an end of kind which kind of describes the possibility to create animations and tell stories on this almost endless possibilities that we have on the web and she describe such as mission from coming from traditional media to actually create consumes stories to the it's very empowering because you realize that all the new suspects that coming out of a special occasion of expects there actually quite approachable to her although she was not really familiar with the ones behind it but she was really in to try them out and to me I didn't understand what vector talking about and actually doing something with Emma and the circus well that's maybe have a specific look and yeah and demo or something that is actually also based very similar call to an and and especially in a specific alleviation of from 5 come most API use the number all the the action of have come as elements this 1 element that we can just drop into our and now it's comes with the canvas stack and what we gain from that is actually the access to a very colorful weapon API that they can use for many many things so if you for example interested in that field he might or fluid but we can also do traditional frame-by-frame animations that so that's pretty excited so let's have a look at that the the content objects is very crucial for understanding how we can actually achieve 1st the context object is something like a toolbox once we actually get a reference to the agent elements that contains can thus be can then get the context object with the guy context method and once we have this we can actually draw on the canvas we can set colors and backgrounds and images to the converse and get all the great things from the HEI and what is also interesting to note here the browser pathways effect can bust and the and here I would say basic from basic features from that I have a really great transport so this might not be relevant to you and this is the last like users relying on his 7 reagent something but if you do it might be worth noting that you might have to pull the full features or think about the fallbacks for anything that you do on the canvas
so let's may never look on on your specific example and how we can actually create an animated component 1st of all we would have to create the components so we could have a common component let's call like that with a certain width and height and later on we could just yet just described Technion on this components to actually create our h element later on once the component renders then interestingly we would have to think how do we achieve this effect of the frame-by-frame animation we learned that you want to show you certain images of the animation in rapid succession what would like to do is 1st of all a spreadsheet like a collection of different images into 1 single file which helps us a lot later on in the back up to and you just note 1 file and not tend to I'm reloads with several requests as several subtypes for this animation and what we can do here is think about getting set frames off each other and actually putting them on a specific destination of all kind of filaments when asked each other and indeed asian of outcome as HIV have a ready honey Troy Mich methods which enables us with the coordinates of the upper left corner of the error of the source image that you want to Mac and the origin of you ever come must space that we want to actually are contrarians image and the width and length to map this onto the destination of Our elements and if you have to look at this how this might some might unfold we also realize me where directed of image of right so we would 1st have to build this and what we can do here is actually creates an yeah an instance of an image in our I'm a component once it's actually initialize and then we can say OK we graph like like Baha'is and the wizard of spread to because of the the we also want to know where where does the next frame actually start and where does it stop and we can only deduct those from the yeah the length of the light sheet and also from the number of frames that extra contains and later on he would like to yellow does image and 1 suspect is than we set this object sense of quot similar image and on as a property on our component then they move on we I would also like to actually draw something and also just as a disclaimer i can we go through the full code so if you realize that sum to 1 OK there's some gap so something I will also link to the original revolve today most so you can still look everything up that you wonder about and also proofread to us afterwards but yeah if you do this and we create the drop ChEBI would define all the different coordinates of our spreadsheet and also become of object that we want to map and what we can do here is 1st of all a clear everything that drawn reformist this comes in and it's only the actually you through our joint function which we have to do to actually creates a succession of frames and then also you would actually have to draw the image with dry function that explained earlier and if you do this you can finally get all contigs object we can as set a context property that can be reused in other functions in our component as well and then you can actually draw and the interesting thing here is as well we and you want to wait before World until the image is loaded right that we preloaded all he i in the initialization so it might be come in handy to actually for that because for example do the sperm with an observer so with that with that sad OK now we have drawn image to come as OK cool them I could have just use an image tactile that's me yeah we actually want to make a move so let's do that right now and then if you want to run something there's something really handy that we can use Ambrose about to the um actually iterates over something at all 1 over again and this is called the and ember run later methods and here we can actually say OK you have some function that actually draws everything and is everything what they promise for and we can a call it again again after 100 ms which we already realizes that quite put into law to actually create this the illusion of motion to our human and also what we do is called a function that x incremental frame number because everything in our drunk functions also dependent on the frame number and will then recalculates which part of the spreadsheet to the actual to that and I want you to this code example but you can look it up a little on the repro and also what we have to do if we click on the play but later on it would be cool to me also Paulson's at some time point I mean image of the really cool but they shouldn't be there forever right so recently we just set a reference to the current ground new as a property owner component and then later on we can cancel this again and some other parts in powerful action and yet if you do that so let's maybe have a look at the demo so what we can do vendors I could
Ch um you just like plant and the pulsar pulses so however could die finally can jumble of the building and actually save a gentleman from getting his hand that by rubber so the saved the co but
also good to know that its effect canister you performance-wise get like a lot of advantage by it and not having to rely on DOM objects being loaded in the background to actually create this animations the into the 1st kind and the ice low levels so this means everything that we do on the combustion if you create a lot of different layers on it is not powered by specific DOM objects and a lot of Sec memory browser that has to be used up so this is really good for performance if you do something more heavy and this probably also 1 of the main reasons why regulatory realize nation of outcome we also get a lot of control as a developer respond on what's actually happening in our many nations which involves regret created incisor realized we have to do a lot of kind of like lifting before we get like just uh 6 frame Animations kind of running also they are kind of like intractable with us so I think this is something that might be quite approach of that may be altered to improved and also accessibility wise realize there's some obstacles we have to jump over to actually make it accessible because we actually just rendering images into a flat objects in our browser that doesn't give us access to any kind of attributes that might be used by screen readers for any other accessibility devices so this is just like a summary and for getting this and better context on how we can as compared to other browser API said let's have a look at another API that's maybe not so many of you might be familiar with but I would like to know it's like a hands up who has ever heard before about the bet animations API like anyone here at Acadia action by the cool so maybe some of the things now will be a bit of a decision for you but I see a lot of hands go out so this might be really interesting for some of the people yeah the but animations API is something that is quite cutting and I believe is actually the animation and of the future the future of the intonation and so we you know we get from the they die a lot of like controls actually synchronize animations and altogether play that control the box which is really exciting so we don't have to do any of the listed for that and you have if we if you then think OK are cooler than let's have a look at the browser port and then realize OK we go to can I use of consequentialism this morning and realize well a lot of friends a bit of all is lots of good right of like the stuff we're up here so OK that's that means that's no right we can't really use again but luckily for the weapon API we are really have really really well maintained wholly fault
there which is the greatest and this actually enables us to use features of the animations already today to create animations on the web and also for many features that are not even in this kind of like accepted trusted yet but just like still in a very kind of like a discussion of all modes we even get another really cool and wet API and police so called a bad image of Mexico missile and this of course also that so you can just install and Menzel and animation explore flow and you get all the kind of features that are commonly in draft state out of the box in your application so let's have a look how yeah this looks cold Weiss some debate but initially guy largely depends on keyframe effects thinking for effects if you look at them the agrees similar to the cue phrase you already know users respect which I think is really cool because it means if for example I'm a design of someone who's cycle family was used as we are we kind of know where this is coming from all of this is about and we also very similar to the key frames and is as we get that all the key frames and list up and in 1 single lists will be distributed evenly across the animation span so 1st 3 they will all be triggered at time point 0 33 % and them a solid 1 present so pretty straightforward we can kind of get our head around that and the other to look how we can actually create also animated component of that's a lot of examples for if you want to do that you can 1st of all have a work of commitment component again and we also created new spreadsheets that we actually want any major in this component and we would actually create created keyframe effects and for this to happen we would 1st of all have to have keyframes defined we already saw some of them and what to also needs essentially for every animations our animation options so these are the definitions usually you know from CSS to actually find how long an animation is what kind of time in front you want to use is also the occupants animations we actually don't want to the animation to use we actually want to step wise goes through the animation and we can use is when had that's function that enables us to just put in the number of frames that want to stroll and then later on actually animated through its infinitely as we have defined here we can pass this in in our panel component and once you have actually done that we can already very easily starts all animation with just a few lines of codes 1 so 1 component has rendered to just say you get all the key frames we get all the animation of that this person the component and the only thing that annoys to call this element for the in this uh dollar reference to the element that long and then an 8 and this is set so we already have an animation running out of the box just with this you that changes but it is certainly yeah this is really not cells of exciting because I Ising consumes most of the cantons usually didn't involve the comic character just like running in front of a blank screen there was stuff going on behind also actually want this as well so let's it's a local actually creating what other components this is also possible that whether an image of the how would is actually look like if we want to create several layers it might make sense to actually create some components we could for example imagine that we have comic internally components that are embedded in all our comic panel and what they can actually was taking care of binding the key frames to themselves as elements that should be animated because the weather anyways API so we just have elements that are animated with the key frames and then later on if we ever have created as a comically I could call frame action that kind of like to friends to the pattern component so the comic panel and so just told us like to educators view from effects we can use the keyframe effect constructed and this will actually and wait a key from effect that can later use that can later use the better animation API to be played back to us also India parent component the comic panel b can then very easily injustice a few lines of code say OK correct the timeline so a global object in the web images API that list to give us feedback on which animation that kind of learning and it should give us access to them to play possum and we can't energy from affected dropping get from comic layers and later on User Group of Ten constructor uh 1 of the features by the way with for which you would actually be better animation next colorful and with this we can say OK please come together all of the animations in 1 single instance and if I call player or a pause or in reverse this also comes out of the box for the Web enemies API its then please do so for all these animations that I embedded in this group effect this is really great and what we can easily do we need yet creates elections went to the created play action of course action what they do is really simply calling the play and pause methods that we get from the recommendations API and you already good to go this only fascinating so yeah just have a look of looks like
so we have a background that is
already rendered as a single layer and then the character and if we get us set the play button and if we had the balls button we can actually iterates through the different key frames if you've already provided with the spreadsheet which is an exciting we can do a lot more things than that we can't at war layers the foreground it could also create a single DOM objects that the foreground just imagine that some leads that could also be there at which is quite exciting and pretty straightforward to do if you look at this instance of API so that's
bad excited and I really like to you and check it out with the consent this example of also to know with the mechanism maybe
I as a contrast relation of economists realize that it actually has acquired approachable create experienced so even if I'm not a JavaScript grew yet so I kind of like understand everything is coming from and it's very easy to set up once I actually usable useful for right now but it will be even easier in the future and a son of a lot of people that control I can define how many objects I actually want to render imagination and that can also easily and gain access to different ways to animated with the key effects and also accessibility was it's really straightforward for us to make this accessible because it's so much words like Don last but least also something to consider the would have like thousands of different objects that you want to animate this might be and yeah kind of like a difficult performance-wise competitive edition of kind of these because realize for everything that we try to any in the web images API we would have to know a specific DOM object that is actually created so and yes quite hard to argue about that but for something that is not too complex I think it's really so the interesting thing to look into the so yeah we almost at the end and that's just like get a conclusion of what they found with this example that the on so far so 1st of all we realize the stories about animations and how we can create and deliver animations not override achieves book continues until today and we have even more than ever about tools and methods to actually do this and you have a good thing as with emperor and also with the powerful right standards we actually pretty good to go and with that that I would say at the end of the worst is actually now used to be animated and we're looking forward to see what you were created in the future so thank you very much for your attention and yeah I have have have great fun you
know how stored