Mark started in the developer world over 25 years ago. He began his career with a Bachelor of Science in Computer Science from St. Johns University. After spending 10 years on Wall Street working for Goldman Sachs, Lehman Brothers and other major investment banks, Mark became interested in animation and video game software.
Simple jQuery Animation Welcome to this module titled Simple jQuery Animation. jQuery makes animating DOM elements very easy. When we're surfing the internet, we always see content fading in and out, sliding up and down, and slowly animating into position. These simple animations are usually accomplished with just one line of code in jQuery, and in some cases you don't even need a new line of code. You can just use chaining on a jQuery object to append a simple animation method. In this module, we'll look at the simple yet powerful animation methods built into jQuery. We'll use a single method call to show, hide, and toggle DOM elements. We'll see how to fade our DOM elements in and out and slide elements up and down. Then we'll look at jQuery's animate method, which lets us perform more complex animations. We'll see how to animate the values of any numeric CSS property with this method. Animations can be chained together so that they're run sequentially. We'll take a look at creating more complex animations with chaining, and we'll look at how to stop a long- running animation gracefully.
Easing This module is all about easing and easing functions. When we animate a DOM element in jQuery, what we're doing is changing some value over time. Is that change constant over the given time or does it speed up or slow down at any point? Well, easing is what determines how the value changes over time. Easing into an animation determines whether we accelerate quickly or slowly at the start. Easing out of an animation determines whether we accelerate quickly or slowly at the end of the animation. Some cool effects can be created with easing functions such as having your DOM elements bounce or even have an elastic look and feel. The overall purpose of using easing functions is to give our animated DOM elements some more natural or a more whimsical feel. We want to break up the monotony of linear motion, which makes our animations look robotic and mechanical. We want our animations to be enjoyable to watch and move like natural objects. In this module, we'll take a detailed look at easing our animated DOM elements. jQuery only supports two different easing functions, so we'll look at how we can use jQuery UI to get access to many more easings. You may already be using jQuery UI for your project in which case you're set to go. If jQuery UI is too big a package to include in your project, we'll look at a jQuery plugin, which is specifically designed to give you more easing functions and nothing else. Finally, we'll look at how you can modify existing easing functions or create your own easing functions in jQuery.
Advanced jQuery Animation This module is titled Advanced jQuery Animation. We'll be looking at a wide range of jQuery animation methods, options, and techniques. Probably the most valuable part of this module is learning how to animate non-numeric CSS properties. This allows us to take advantage of 2D and 3D rotations and other operations such as animating colors. We'll first look at transforming DOM elements in two dimensions. We'll be mostly interested in the CSS transform property. This property will let us translate, scale, and rotate any DOM element. Next, we'll look at 3D rotations on DOM elements. This also uses the CSS transform property. Internet Explorer 10 is the first IE release to support the CSS properties which make 3D animation possible. So, now all the modern popular browsers are capable of animation with 3D rotations. We'll look at animating colors with the jQuery color plugin. We'll take a look at working with animation queues. An animation queue holds animation commands, which will be executed one after the other. We've already seen this when we chained animation calls to create a complex animation. We can actually create several animation queues and have them simultaneously influence a DOM object. This would be useful in a case where we want to apply some kind of fade out or resizing of an animation, which is already running. Finally, we'll look at promises as they relate to animation. A promise is an object, which will let us know when an animation has completed or if an animation was prevented from completing.
Building and Optimizing A Simple Sprite Engine Welcome to this module titled Building and Optimizing a Simple Sprite Engine. All of jQuery's animation methods work with some kind of duration or animation length. You need to know how long a DOM element will animate before you can kick it off. There are many cases where we're just not going to know the duration of an animation. We may need to animate objects dynamically based on user interaction or other factors. In this module, we'll be using jQuery to set up our DOM elements; however, we'll be using our own animation timer and loop to control our animated elements. A Spite is a visible object on the screen, and this term is usually used in video game programming. In a game, everything on the screen that moves could be considered a Sprite, but a Sprite can be used in more than just video games. If you wanted to create some cool special effects in an advertisement or you wanted to experiment with dynamic particles or other simulations, Sprites would be useful. We're going to create a simple Sprite engine that lets us easily create Sprites and set them in motion. Our Sprites will be displayed on a control that we'll call a GameSurface. Once we get our GameSurface operating, we'll take a look at optimizing our code. We'll use the profiler in the Chrome browser to take a look at our code in detail. We'll isolate the exact code which is slowing things down and fix it up to get better performance.