Date post: | 26-Dec-2014 |
Category: |
Technology |
Upload: | sencha |
View: | 9,199 times |
Download: | 1 times |
CSS AnimationsWith Sencha Animator
MICHAEL MULLANY, SENCHA
Session OutlineWhy animations?
Transforms & transitionsAnimations
Browser supportSencha AnimatorCrazy CSS Hacks
Roadmap Interface
Animation Building BlocksTransforms: 2D and 3DMove (Relative)Scale, Rotate, Skew, OpacitySpecify a transform origin
TransitionsTweening between statesEasing curveDiscrete state changes
ElementsBlock + In-Line Elements
Only animation technology that works on Android, iOS, RIM, Meego
GPU ACCELERATED!
CSS TransformsTransforms transform the ENTIRE coordinate grid.- Nested transforms accumulate coordinate grid transformations
Scaling by 150% Adjusts EVERYTHING by 150%
Move 10pxMove 10px
Transform Origin
100%100%
0%100%
100%0%
0%0%
100%100%
100%0%
0%0%
0%100%
PERCENT OR PIXELS
50%, 50% is implied default
CSS Transition Properties background-colorbackground-image (gradients)background-positionborder-bottom-colorborder-bottom-widthborder-colorborder-left-colorborder-left-widthborder-right-colorborder-right-widthborder-spacingborder-top-colorborder-top-widthborder-widthbottomcolorcropfont-sizefont-weightgrid-*height
leftletter-spacingline-heightmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-widthmin-heightmin-widthopacityoutline-coloroutline-offsetoutline-widthpadding-bottompadding-leftpadding-rightpadding-toprighttext-indenttext-shadow
topvertical-alignvisibilitywidthword-spacingz-indexzoom
stop-colorstop-opacityfillfill-opacitystrokestroke-dasharraystroke-dashoffsetstroke-miterlimit
CSS AnimationsOnly e!ect properties during execution of the animation
- keyframe duration (secs,%)- easing curve- delay- pause/restart- fill-mode (property over-ride)- iterations- forward/back
http://dev.w3.org/csswg/css3-animations/
Easing Curves
Built-In Functions - Ease (default) - Ease-in/Ease-out - Ease-in - Ease-out
Custom bezier- custom-bezier (p1x,p1y, p2x, p2y)
Errata and Vendor Prefixes-moz and -webkit-webkit-box-shadow etc.
No gradient transitions
Fonts, line-height tweened at increments of font value
Chrome vs. SafariChrome interpolates missing frame values
Chrome applies a transition when two transforms are applied to an object
Chrome drops anti-aliasing, and lacks GPU acceleration for 3D
Safari uses intrinsic values (correct)
Safari applies only the last transform (correct)
Safari & mobile Safari often retain anti-aliasing & have GPU acceleration
Sencha Animator
Animator Productivity TipsNEST NEST NEST NEST- Wrapper divs are a huge productivity boost
Watch your transform origins- Losing track of them can cause much pain
Watch base object vs. keyframe animations- keyframes over-ride base object - ....until you disable keyframe values !
Overflow:hidden can work as a poor-man’s mask
Scale text to maximum size that you need
Crazy CSS3 Hacks
Gradients, Clipping & Masks
slight background gradientbackground-clip: text
2 radial gradients: multiple color stops radial gradient: multiple color stops
box-reflect on underlay DIV
CSS Hack for Shape BlursFind a character that looks like the shape you need
Set fill to opaque
Set shadow with 0,0 o!set and an appropriate color and blur
Scale, rotate & skew to get desired results
Find a web font with a shape you need!
What You Can’t Do...Direct Motion PathsCombine wrapper divs and custom easing functions to get thereHuge need for a pathing tool
Advanced Text ManipulationText on a curve/pathSub-pixel kerningHand-animated text is possible but very time-consuming
Sub-Element Animationse.g “typewriter”-style animations are very time consuming
Filters (on the CSS wish-list since 1998!) - would enable blurs etc.
3D Transforms-webkit-preserve-3DWithout this, child divs are flattened into the plane of their parent div
-webkit-perspectiveAutomatically applies a perspectiveUsed poorly = crazy foreshortening
Poor desktop performanceQuite smooth on iPhone 4/iPad
Roadmap
Check It Out
www.sencha.com/products/animator