Transcription
Web Animationusing JavaScriptDEVELOP AND DESIGNJulian ShapiroForeword by David DeSandro, Founder of Metafizzy; Author/Developer of Masonry and Isotope
Web Animationusing JavaScriptDEVELOP AND DESIGNJulian ShapiroPEACHPIT PRESSWWW.PEACHPIT.COM
Web Animation using JavaScript: Develop and DesignJulian ShapiroPeachpit Presswww.peachpit.comTo report errors, please send a note to errata@peachpit.comPeachpit Press is a division of Pearson Education.Copyright 2015 by Julian ShapiroEditor: Victor GavendaDevelopment editor: Margaret S. AndersonProject manager: Margaret S. AndersonTechnical editor: Jay BlanchardCopyeditor: Gretchen DykstraProduction editor: David Van NessProofreader: Patricia PaneCompositor: Danielle FosterIndexer: Jack LewisCover design: Aren StraigerInterior design: Mimi HeftNotice of RightsAll rights reserved. No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher. For information on gettingpermission for reprints and excerpts, contact permissions@peachpit.com.Notice of LiabilityThe information in this book is distributed on an “As Is” basis, without warranty. While every precaution has been taken inthe preparation of the book, neither the author nor Peachpit shall have any liability to any person or entity with respect toany loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by thecomputer software and hardware products described in it.TrademarksMany of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Wherethose designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requestedby the owner of the trademark. All other product names and services identified throughout this book are used in editorialfashion only and for the benefit of such companies with no intention of infringement of the trademark. No such use, or theuse of any trade name, is intended to convey endorsement or other affiliation with this book.ISBN-13: nted and bound in the United States of America
I dedicate this book to people who play Counter-Strike.And to people who like the show Rick and Morty.
This page intentionally left blank
ACKNOWLEDGEMENTSI would like to thank Yehonatan Daniv for providing support to Velocity’s users onGitHub, Anand Sharma for regularly inspiring me with his motion design work, andDavid DeSandro for writing this book’s foreword. I’d also like to thank Mat Vogels,Harrison Shoff, Adam Singer, David Caplan, and Murat Ayfer for reviewing drafts ofthis book.Acknowledgementsv
This page intentionally left blank
CONTENTSForeword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiiIntroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xivChapter 1ADVANTAGES OF JAVASCRIPT ANIMATION . . . . . . . . . . . . . . . . . . . . . 2JavaScript vs. CSS animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Great performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Page scrolling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Animation reversal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Physics-based motion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8Maintainable workflows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10Chapter 2ANIMATING WITH VELOCITY.JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Types of JavaScript animation libraries . . . . . . . . . . . . . . . . . . . . . . . . . 14Installing jQuery and Velocity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15Using Velocity: Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Velocity and jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Chaining . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20Using Velocity: Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Duration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Easing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Begin and Complete . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Display and Visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Using Velocity: Additional features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Reverse Command . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Scrolling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Contentsvii
Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32Using Velocity: Without jQuery (intermediate) . . . . . . . . . . . . . . . . 33Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35Chapter 3MOTION DESIGN THEORY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36Motion design improves the user experience . . . . . . . . . . . . . . . . . 38Utility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Borrow conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Preview outcomes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Distraction over boredom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Leverage primal instincts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42Make interactions visceral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Reflect gravitas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Reduce concurrency . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43Reduce variety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44Mirror animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44Limit durations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Limit animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Elegance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Don’t be frivolous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Your one opportunity to be frivolous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Consider personality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47Go beyond opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Break animations into steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Stagger animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Flow from the triggering element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49Use graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53Chapter 4ANIMATION WORKFLOW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54CSS animation workflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56Issues with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56When CSS makes sense . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57Code technique: Separate styling from logic . . . . . . . . . . . . . . . . . . 59Standard approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59Optimized approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60viiiContents
Code technique: Organize sequenced animations . . . . . . . . . . . . 65Standard approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65Optimized approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66Code technique: Package your effects . . . . . . . . . . . . . . . . . . . . . . . . . . 69Standard approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69Optimized approach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70Design techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Timing multipliers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73Use Velocity Motion Designer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Wrappi
To install the UI pack, simply include a script tag for it after Velocity and before the ending /body tag of your page: script src ”velocity.js” /script script src ”velocity.ui.js” /script The specific UI pack feature discussed in this section is called sequence running.
