万彩动画大师使用技巧
Pas de Deux, Norman McLaren 1968
双人舞，诺曼·迈凯轮1968
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.
每个人都知道什么是动画，但是如何将动画与Web和移动设计合并以获得更好的体验呢？ 如今，尽管大多数网站都在某种程度上使用动画，但通常是出于艺术蓬勃发展的目的，而不仅仅是为了真正支持用户体验。
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.
在考虑代码之前，请考虑一下运动。 这将使您可以将更多的精力放在实际的动画概念化过程中。 当然，有可能不是您设计的所有内容都可以被编码为完美，但这是您在艺术上做出妥协的时候。
Chuck Jones' early Bugs Bunny sketches show the thought put into shape, weight, and movement.
查克·琼斯(Chuck Jones)早期的《虫子兔》(Bugs Bunny)草图显示了思想的形状，重量和运动。
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.
如果不对运动有深入的了解，很难很好地制作动画。 有效的动作动画很少会出现明显的边缘，停止或接缝。 好的动画的关键不在于纯粹的艺术诠释，而在于模仿现实生活动作的技巧。
Youtube provides variable payback speeds via the player settings panel.
YouTube通过播放器设置面板提供可变的回报速度。
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.
研究视频游戏界面-尤其是过去三年中发布的标题-并注意您作为用户的跟踪方式。 如果您不想观看游戏玩法，则只需观看各种动画电影和节目。 最重要的是，在开始将动画集成到复杂项目之前，请创建真实的测试。
Credit: Martin Drapeau – Backbone Game Engine.
图片来源： Martin Drapeau –骨干游戏引擎。
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.
进行诸如此类的小而重要的模型和测试可以通过谐波运动帮助加深您的总体信息。 有一些很棒的网站可以完美地做到这一点。 牧师的危险和每一滴都是用动画的小片段讲述他们的故事。
http://everylastdrop.co.uk/
http://everylastdrop.co.uk/
http://www.reverenddanger.com/
http://www.reverenddanger.com/
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?
您如何看待网络和移动设计中的动画？ 有什么喜欢的吗？
翻译自: https://www.sitepoint.com/4-tips-for-using-animation-in-design/
万彩动画大师使用技巧
相关资源：jdk-8u281-windows-x64.exe