Animation is not the art of drawings that move but the art of movements that are drawn. – Norman McLaren
Everyone knows what animation is, but what about how to merge animation with web and mobile design for a better experience. While today most sites employ animation on some level, often it's as much for the sake of artistic flourish than it is for genuinely supporting the user experience.
As with traditional design, there are concepts, principles, and the willingness to think outside of the box that will make animation work for you. If you start with these four handy tips you should be able to use animation to improve your site.
Think about movement before you even consider your code. This will allow you to put more focus into the actual animation conceptualization process. Of course, there's a chance that not everything you design can be coded to perfection but that's when you'll make your artistic compromises.
在考虑代码之前，请考虑一下运动。 这将使您可以将更多的精力放在实际的动画概念化过程中。 当然，有可能不是您设计的所有内容都可以被编码为完美，但这是您在艺术上做出妥协的时候。
Beginning with a "code focussed" mindset is more likely to undermine the personality of your animation due to worrying over possible coding constraints.
It's a little like planning an illustration based on the colors of the pencil you have available (and don't). It’s the wrong starting point.
This undermines your reasoning for adding animation in the first place. Try to focus more on how you want your animation to move and look. Implementation details will work themselves out later.
首先，这会破坏您添加动画的理由。 尝试将重点更多地放在希望动画如何移动和外观上。 实施细节将在以后解决。
At the end of the day, the coding will just be ‘a means to an ends’. It's your design process and mental execution that is going to make your animation human.
If your animation doesn't have a purpose, then you should question its need to be there. For instance, animated spinners that serve as loading indicators have an innate purpose yet some designers probably don’t think much beyond ‘everyone else is doing it‘ and ‘it looks pretty cool‘.
如果您的动画没有目的，那么您应该质疑它的存在。 例如，用作加载指示器的动画微调器具有先天的目的，但是某些设计师可能不会想到“ 其他所有人都在做 ”，“ 看起来很酷 ”。
Loading animations are designed to give the user load time feedback (or, at least, some sense of progress). Other menu animations might be useful for indicating to the user where a menu goes when it is closed. These are both examples of animations that deliver practical benefits to the user.
加载动画旨在为用户提供加载时间反馈(或至少某种程度的进步感)。 其他菜单动画可能对向用户指示菜单关闭时的位置很有用。 这些都是动画的例子，它们为用户带来了实际的好处。
On the flipside, unfurling navigations and spinning logos have been the poster-boy examples of a more decorative, less functional type of animation. Remember that your animation is built for the benefit of the user, not its creator. This isn't your show-reel for Pixar.
另一方面，展开式的导航和旋转的徽标是更具装饰性，功能较少的动画类型的典型代表。 请记住，您的动画是为用户而不是其创建者的利益而构建的。 这不是您对Pixar的表演。
Let's take a look at decorative, flashy animation versus something more purpose-function influenced.
As you see here, you can achieve virtually the same outcome without going all out on flashy, decorative animation. It gives a clean look and doesn't leave the user asking "whoa.. what just happened?". What’s more, busy animations feel slower the more often you use them.
如您在此处看到的那样，几乎不需要花哨的装饰性动画就可以实现几乎相同的结果。 它看起来很整洁，不会让用户问“哇...刚才发生了什么？”。 而且，繁忙的动画使用得越频繁， 感觉就越慢。
It's difficult to animate well without having a solid understanding of movement. Effective motion animations rarely have tell-tale edges, stops or seams. The key to good animation is less about pure artistic interpretation and more about the skill of mimicking real life motion.
如果不对运动有深入的了解，很难很好地制作动画。 有效的动作动画很少会出现明显的边缘，停止或接缝。 好的动画的关键不在于纯粹的艺术诠释，而在于模仿现实生活动作的技巧。
If you’re unsure about a movement, search the web for video of a real-world equivalent and study the motion at quarter speed. Lower playback speeds often reveal wonderful touches. Many people are unaware that Youtube provides variable playback speed controls via the player settings panel.
如果不确定运动，请在网上搜索与现实世界相当的视频，然后以四分之一速度研究运动。 较低的播放速度通常会显示出奇妙的触感。 许多人不知道Youtube通过播放器设置面板提供了可变的播放速度控制。
Movement is typically understood as up, down, left and right, but just because your animation moves in these directions doesn't mean your motion will feel natural. Factors like materials, speed, acceleration, bounce and reflection should always be taken into account. It's important to creation seamless motion to maintain the illusion and fantasy. In other words, try to keep your animation almost "invisible".
通常将运动理解为上，下，左和右，但是仅仅因为您的动画在这些方向上移动并不意味着您的运动会感觉自然。 应始终考虑诸如材料，速度，加速度，反弹和反射之类的因素。 创建无缝运动以保持幻觉和幻想很重要。 换句话说，请尝试使动画几乎“不可见”。
It is easier to create 'invisible animation' when you understand how people view movement. It's a good idea to study the world around you.
Study video game interfaces – particularly the titles put out in the last 3 years – and pay attention to how you, as the user, track them. If you're not in the mood to watch gameplay then simply watch various animated films and shows. Most importantly, create real tests before you begin integrating animation into a complex project.
研究视频游戏界面-尤其是过去三年中发布的标题-并注意您作为用户的跟踪方式。 如果您不想观看游戏玩法，则只需观看各种动画电影和节目。 最重要的是，在开始将动画集成到复杂项目之前，请创建真实的测试。
Try to refrain from sporadic or flashing movement. Keep it steady. Allow the viewer to enjoy and take in what they are seeing especially if the animation is crucial to digesting information. Movements the follows curves opposed to points are ideal, and soft movement over hard sharp twists and turns unless necessary.
尝试避免出现零星的或闪烁的运动。 保持稳定。 允许观看者欣赏并欣赏他们所看到的内容，尤其是在动画对于消化信息至关重要的情况下。 与点相对的跟随曲线的运动是理想的，除非有必要，否则在剧烈的急转弯中进行柔和的运动。
Synchronization is key in animation. It is easy to want to design one element after the other all for the sake of trying to generate as much animation as possible, but this isn't the way to go. All of your animation – no matter how big or small – should be one homogeneous unit.
同步是动画中的关键。 为了试图生成尽可能多的动画，要一个接一个地设计元素很容易，但是这不是走的路。 您的所有动画(无论大小)都应是一个同构单元。
The best way to do this is by sitting down and creating something close to an animatic. These are animated storyboards composed of still images/drawings that have been edited and paced to match as close as possible to the final product.
Trust me when I say these are extremely helpful whether working on a website or a film. The image below is a storyboard I had put together for a music video. Needless to say, this wasn't the final structure but it kept me on track.
当我说这些对网站或电影工作都非常有帮助时，请相信我。 下图是我为音乐视频拼凑的情节提要。 不用说，这不是最终结构，但它使我步入正轨。
By creating rough sketches of your desired animation, you can see how everything will look which will allow you to catch inconsistencies early in the process. For example, your loading animation is a mix of spinning movement and blocked elements yet your navigation menu is a dropdown fading animation using circles. By seeing this disconnect, you can make the necessary changes or try something different altogether.
通过创建所需动画的粗略草图，您可以看到所有内容的外观，这将使您能够在过程的早期发现不一致之处。 例如，您的加载动画是旋转运动和受阻元素的混合，而导航菜单是使用圆的下拉淡入淡出动画。 通过查看此断开连接，您可以进行必要的更改或尝试完全不同的操作。
Doing small yet critical mockups and tests such as this can help fuel your overall message through harmonic motion. There are some great websites that do this perfectly. Reverend Danger and Every Last Drop use small snippets of animation to tell their story.
进行诸如此类的小而重要的模型和测试可以通过谐波运动帮助加深您的总体信息。 有一些很棒的网站可以完美地做到这一点。 牧师的危险和每一滴都是用动画的小片段讲述他们的故事。
While both sites animate in very different ways, each element of their site has been crafted to not only tell their story but help move it along, literally.
Animation encompasses a vast variety of styles and approaches, but that doesn't mean there aren't key concepts to go by. To get the most out of your animation:
动画包含各种各样的样式和方法，但这并不意味着没有关键的概念可以通过。 要充分利用动画，请执行以下操作：get yourself out of the "code brain" mentality, 让自己摆脱“代码大脑”的思想， keep your animations practical and useful, 保持动画的实用性和实用性， and take the time to truly understand movement and how stories are told. 并花时间真正了解运动以及如何讲故事。
Most importantly, have fun while designing.
What do you think about animation in web and mobile design? Have any favorites?