O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Javascript Animation
JS + Canvas = <3
Introduction
Welcome to BocaJS! If you just walked in, this
talk is on Animation in Javascript applied to
canvas (and a li...
Introduction
Hello, My Name Is:
Gregory Starr
www.gstarr-ltd.com
www.STARRit.io
I do:
● Make Art(All Kinds traditional and...
Introduction
Street Cred:
===================================
FriendFinder.com (Adult communication Division).
Yahoo.com :...
Introduction
All That work was done in Adobe Flash!
I know, I know, flash is evil, nothing ever
became of flash….
Or did i...
Introduction
RIA: Rich Internet Applications
That’s what I specialize in. Bringing richness to
the world of internet appli...
Topics
1. Introduction (done)
2. Goals of this conversation
3. References: Who Uses animation?
4. Why is animation valuabl...
Goals of this conversation
1. Have a conversation about animation and some of its uses in js.
2. Provide a better understa...
References: Who Uses animation?
Everyone!
● CSS, JQUERY, Angular, React, etc...
● Google, Microsoft, Mozilla, & Apple, etc...
Why is animation valuable.
At first glance, Animation has no equateable
value in a business sense. However, animation
is a...
Why is animation valuable.
The most acutely attuned and relied upon sense that
mankind uses is the sense of sight.
Animati...
Ok, you get it...
So, lets get to it..
Animation in JS Basics (10,000 Ft).
Animation in javascript at the lowest level relies
on setInterval and setTimeout and t...
Animation in JS Basics (10,000 Ft).
Since animation is change in a property over
time, setInterval and setTimeout are the
...
Animation in JS Basics (10,000 Ft).
With that in mind, that’s why they added
animation into CSS…
But that’s not why why we...
What exactly is the canvas &
what is it to animate in it.
Quote from MSDN:
“Officially a canvas is "a resolution-dependent...
What exactly is the canvas &
what is it to animate in it.
Resolution-Dependent = Bad (What about responsiveness, I get
tha...
What exactly is the canvas &
what is it to animate in it.
The canvas can be thought of
much more like your laptop or
deskt...
What exactly is the canvas &
what is it to animate in it.
This is good because just like back-in-da-day with evil ole’ Fla...
What exactly is the canvas &
what is it to animate in it.
You want to make it rain?
No Sweat: It's Raining
Need interactiv...
What exactly is the canvas &
what is it to animate in it.
So, at a low level we can draw and animate inside the canvas usi...
Frameworks? Yea we got those!
● There is no one framework to rule them all. As usual, if
you’re looking for a golden hamme...
Frameworks? Yea we got those!
It’s all about structure, and if you are looking for quick
setup, low overhead, logical orgi...
Frameworks? Yea we got those!
So before we go to code, A note on Framewerx….
● Pixijs - Best I’ve seen
● GSAP - Big Dog on...
Lets talk Structure….
So like any good application there has to be
structure for control, logic flow, and IMO my
own sanit...
Lets talk Structure….
The way it’s different is in the inheritance. This
may sound obvious but alot of people miss the
ben...
Lets talk Structure….
It’s all about Thinking ahead and knowing what
you want to control, and how you need to
control it.
...
Tying in other players from our playground.
It’s easy to play with others in your sandbox!
● jQuery
● Angular
● FB React -...
Going further: Some resources =>
● https://developers.google.com/web/fundamentals/look-and-
feel/animations/css-vs-javascr...
Q & A
First Answer: No we aren’t going to
make a first person shooter today!
Email me: greg@starrit.io
www.starrit.io
Próximos SlideShares
Carregando em…5
×

Javascript Animation with Canvas - Gregory Starr 2015

980 visualizações

Publicada em

How and why to use javascript to draw and animate with html5 canvas. Some links to GSAP, Pixijs and Createjs libs

Publicada em: Tecnologia
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

Javascript Animation with Canvas - Gregory Starr 2015

  1. 1. Javascript Animation JS + Canvas = <3
  2. 2. Introduction Welcome to BocaJS! If you just walked in, this talk is on Animation in Javascript applied to canvas (and a little more)! Thanks for having me guys! You Rock! Keeping Knowledge Free!!!
  3. 3. Introduction Hello, My Name Is: Gregory Starr www.gstarr-ltd.com www.STARRit.io I do: ● Make Art(All Kinds traditional and digital) ● Produce Code( Baby, I got what you neeeed) ● Love Music(Produce and Spin EDM)
  4. 4. Introduction Street Cred: =================================== FriendFinder.com (Adult communication Division). Yahoo.com :-) (Maps Division) (maps.yahoo.com). ISO.com (Real Estate evaluation). Currently: Do Interesting things. ...
  5. 5. Introduction All That work was done in Adobe Flash! I know, I know, flash is evil, nothing ever became of flash…. Or did it?
  6. 6. Introduction RIA: Rich Internet Applications That’s what I specialize in. Bringing richness to the world of internet application development. Lets, checkout the topics we will cover today...
  7. 7. Topics 1. Introduction (done) 2. Goals of this conversation 3. References: Who Uses animation? 4. Why is animation valuable. 5. Animation in javascript Breakdown (10,000 Ft). 6. What exactly is the canvas & what is it to animate in it. 7. Lets talk Structure…. 8. Frameworks? Yea we got those! 9. Setting up for animation in OOP(ish). 10.Tying in other players from our playground. 11.CGooing Forward in js (Because someone is going to ask about it :) 12.Q&A
  8. 8. Goals of this conversation 1. Have a conversation about animation and some of its uses in js. 2. Provide a better understanding of canvas and how to use it. 3. Some of the ways to animate in canvas using javascript. 4. Setting up complex objects for animation (OOP oriented). 5. Integrating JS animation with other client side technologies/frameworks.
  9. 9. References: Who Uses animation? Everyone! ● CSS, JQUERY, Angular, React, etc... ● Google, Microsoft, Mozilla, & Apple, etc... ● Your mother may have sprinkled some on your easter meal and you didn’t know it...
  10. 10. Why is animation valuable. At first glance, Animation has no equateable value in a business sense. However, animation is a tool that has the ability to mostly closely convey ideas, emotions, intentions etc. in a manner that is best suitable for human consumption. VISUALLY
  11. 11. Why is animation valuable. The most acutely attuned and relied upon sense that mankind uses is the sense of sight. Animation provides a visual language that our brain naturally interprets understands. That’s why we upgraded to from books to youtube, right?
  12. 12. Ok, you get it... So, lets get to it..
  13. 13. Animation in JS Basics (10,000 Ft). Animation in javascript at the lowest level relies on setInterval and setTimeout and their clearing counterparts to make calls to object functions passed to them. At each specified interval the function is called and values are changed.
  14. 14. Animation in JS Basics (10,000 Ft). Since animation is change in a property over time, setInterval and setTimeout are the workhorses. Because this is POJO you can apply this concept to any obj, property, attr that you have access to in JS.
  15. 15. Animation in JS Basics (10,000 Ft). With that in mind, that’s why they added animation into CSS… But that’s not why why we are here… We are trying to animate inside the canvas, so...
  16. 16. What exactly is the canvas & what is it to animate in it. Quote from MSDN: “Officially a canvas is "a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly". In layman's terms, the canvas is a new element in HTML5, which allows you to draw graphics using JavaScript. It can be used to render text, images, graphs, rectangles, lines gradients and other effects dynamically. Drawing on the canvas is via the canvas 2D API.” I’m Sorry, I’m not sure I heard that right...
  17. 17. What exactly is the canvas & what is it to animate in it. Resolution-Dependent = Bad (What about responsiveness, I get that out of the box already with css) Bitmap canvas = Bad (You mean it’s always renders as a bitmap?)
  18. 18. What exactly is the canvas & what is it to animate in it. The canvas can be thought of much more like your laptop or desktop monitor. Much the same as applications control the output that ended up being “The Website Is Down” from Youtube on you monitor a while back. Javascript can be used to statefully control the output of the canvas.
  19. 19. What exactly is the canvas & what is it to animate in it. This is good because just like back-in-da-day with evil ole’ Flash we had no crazy, controlling, restrictive, mis-behaving things like The DOM. Layout did, EXACTLY what our code told it to. Canvas provides us that same freedom.
  20. 20. What exactly is the canvas & what is it to animate in it. You want to make it rain? No Sweat: It's Raining Need interactive fireworks: To easy: Boom! So You have complete control over everything. (Examples were searched from codepen, Not my work :-)
  21. 21. What exactly is the canvas & what is it to animate in it. So, at a low level we can draw and animate inside the canvas using the canvas2D api. Link: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D Or search for, you guessed it:> Canvas2d API Canvas2D is an amazing piece work done by a few companies you may have heard of, Mozilla, Adobe, Microsoft and Google. It was based on Adobe’s Flash Player C api’s and built to run in SpiderMonkey (Mozilla’s javascript engine implemented in C) and other browser js engines. Alot of the drawing and animating api’s are very very close to the flash player api’s from a few years ago.
  22. 22. Frameworks? Yea we got those! ● There is no one framework to rule them all. As usual, if you’re looking for a golden hammer… Go build it and let me borrow it please. ● They all focus on solving a similar goal… Animation ● Go through and use codepen and try them out… find one that fits for you… I like a little suite called CreateJS
  23. 23. Frameworks? Yea we got those! It’s all about structure, and if you are looking for quick setup, low overhead, logical orginaization that can scale and be performant. Check it out. I have worked with Grant and a couple of his ppl and they have always delivered top quality code and experience in an open source manner to the development community. I respect that! Plus it’s free...
  24. 24. Frameworks? Yea we got those! So before we go to code, A note on Framewerx…. ● Pixijs - Best I’ve seen ● GSAP - Big Dog on the block: But you gotta pay for the goods ● Velocioty - Replacement for jQuery .animate ● Web Animation API Specification (Go Ahead and bow… it’s that juicy, and native to the browser… ooooooh) ● A simple search of github will reveal more
  25. 25. Lets talk Structure…. So like any good application there has to be structure for control, logic flow, and IMO my own sanity. This is no different… ok Well it’s a little different
  26. 26. Lets talk Structure…. The way it’s different is in the inheritance. This may sound obvious but alot of people miss the benefit/effects inheritance has on how we can animate.
  27. 27. Lets talk Structure…. It’s all about Thinking ahead and knowing what you want to control, and how you need to control it. So maybe I’m a control freak… Don’t judge me Sample? Ok.. Freeze for code break...
  28. 28. Tying in other players from our playground. It’s easy to play with others in your sandbox! ● jQuery ● Angular ● FB React -- > Love what’s happening here btw, even though I don’t endorse your children being on facebook if under 21 :-)
  29. 29. Going further: Some resources => ● https://developers.google.com/web/fundamentals/look-and- feel/animations/css-vs-javascript?hl=en ● http://davidwalsh.name/css-js-animation ● A great article http://www.smashingmagazine.com/2014/11/18/the-state-of- animation-2014/ ● http://www.schillmania.com/content/projects/javascript-animation-1/ ● https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey ● http://createjs.com/Home ● http://www.pixijs.com/
  30. 30. Q & A First Answer: No we aren’t going to make a first person shooter today! Email me: greg@starrit.io www.starrit.io

×