Lecture examples:
Adapt quote to transition to new quote
* Adapt rects to move, "puff" using both Scriptaculous and transform w/opacity
Lab:
CuteRoulette?
* QuoteRoulette?
CoolRoulette? (random user-submitted photos, videos)
Scriptaculous
JavaScript-based animation
Use setInterval to slightly modify style properties of the object every few milliseconds, resulting in an animation effect
Visual effects
Adding effects
Effect options
Effect events
Limitations: no rotation, reflection, skewing/shear, 3d perspective, etc.
Inefficient: graphics cards are built to do affine transformations like this very efficiently; doing it programatically using JavaScript timers is much less efficient
CSS3 Transforms & Transitions
Transforms: adjusting size, scale, placement, distortion, rotation, etc. of an object
Transitions: animation ("tweening") between two states, triggered when state changes
Animations: arbitrary number of states, without needing to be triggered
(can in some cases do more than transitions, with more work; not covered here)
2d Transforms:
translate
rotate
scale
skew
moving the origin
3d Transforms
reflect (rotateX/Y 180°)
translateZ - "camera distance"
perspective - "camera distortion"
Transitions:
Animation between beginning and ending states
Change state by modifying CSS using JavaScript
- apply/remove a class
- change CSS properties
Specify which features should be transitioned, or 'all' for all properties
Some properties never animate
Specify lifetime of transition in seconds
Specify timing function
Varies speed of transition over its lifetime
Linear: no speeding up or slowing down
All others result in some fluctuation in speed
ease (default): quick start, gradual finish
ease-in: slow start, steady build to max speed
ease-out: start at max speed, steady slow to finish
ease-in-out: slow start, increase to max speed, slow to finish
custom: specify custom bezier curve function
Can be hardware-accelerated (and is on iOS devices, for example)