来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。
动画早就不是早期人们印象中的低龄向玩物了，从早年的卢卡斯影业到今天的工业光魔，动画技术证明了它可以实现无限的可能性；从70年代的高达、 EVA到之后的宫崎骏、皮克斯，动画的深度和内涵也早已不弱于电影和文学作品。而随着技术的积累，网页中的动画也已经是遍地开花，它时尚，有趣，也人性 化。不断涌现的新技术和新工具令网页动画设计的门槛逐年降低，高速网络也使得漂亮的动效和纯萌的GIF几乎是无缝地加载到网页中。今天，我们可以斩钉截铁 地说，动画已经是最常见也是最实用的网页设计工具之一了。
将静止或者二维平面上的物体赋予生机与活力，让它们以符合或者贴近物理定律的方式来运动，这就是我们所熟知的动画。Mac 桌面上那个著名的图标跳动动画就是最典型的例子之一，那种模拟皮球在地上弹跳的效果显得真实而有质感，这种动画设计是遵循著名的动画设计12原则的。
对动效或者说动画最熟悉的，无疑是迪士尼。Frank Thomas 的《生命的错觉：迪士尼动画》中，就详细总结了创造今天动画的12个原则：
挤压和拉伸预期登台连续动作和姿态对应缓进缓出弧形运动次要动作时序夸张立体刻画吸引力文末相关链接中，会附上关于这12原则的相关文献。
网页动画的实现方式很多，最常见的是使用Gif图，CSS，SVG，WebGL 以及视频。但是和动漫不同，网页中的动画可以是任何元素，小到下划线，大到背景和整个页面，它可以随着页面加载而出现，也可能是鼠标移动到某个位置上之后 被触发。和其他的设计手法相似，动画可以是非常微妙、触动人心的，也可以是开门见山、清晰直观的。所以，最重要的是看你怎么运用动效，是在合适的时候给人 会心一击，还是摆在显眼的位置，令人不会错过。
当我们谈及网页动效的时候，它和动漫、CG、电影、游戏中的动画，是截然不同的。当我们在网页的语境之下提及动画和动效的时候，它作为一个典型的设 计趋势和设计手法，节制是是最关键的因素。小巧简单的动效在网页中会更具吸引力，也更加有趣，那些真正“隐形”的动效会让用户难以察觉，却更好地让他们有 更好的体验。但是显著而抓人眼球的复杂动效也很重要，它们会强化设计感。不过在动画和动效的设计上，一致性很重要，过于复杂的规划可能会让整体效果混乱。
让动画成为设计趋势，其实是整个设计圈的走向造成的。扁平化和极简风的流行开来，网页设计确实简约了很多，但是用户需要更多的信息来告诉他们应该怎么做，而动画就是最好的方案——无需影响整体美感就可以给用户以足够的引导。即使是最简单的设计，动画的存在都能给予用户以说明和指引，这样前提下诞生的动效，在简单和易用性之间达成了平衡。
动画其实在后端和用户端和有很多不错的影响。首先是大家再也不需要用Flash来事先复杂的动画了，它的实现方式也相当的自由和多样，今天的动画不会像曾经的Flash等技术那样拖慢网站的呈现速度甚至影响服务器，加载速度飞快，体验优异。
大和小的竞争无处不在，即使是动画的领域也同样是如此。
规模较大的动画常常是以视频的形式存在的，它们通常会占满整屏或者一个比较关键的部位，循环、简练是它们的特色。这些动画为整个设计创造了焦点，用户即使没有执行任何操作，也能看到它们。以Studio Meta的网站为例，当你阅读文案的时候，没一张大图都会逐步缩放。
小动效会出现在网站的各个角落，当你同网站进行交互的时候，会发现它们的存在。这些动效可能会在光标悬停的时候触发，可能是一个指引性的标识，也可 能以更加微妙的方式呈现。这些微小的动效会对整体的美感产生影响，在 Henry Brown 的这个案例中，动画就非常的小而微妙，仔细观察，你会发现人物的眼睛在闪烁。
当我们谈及每一种设计趋势的时候，都需要探讨一个重要的问题：什么时候才能使用它们。动画可能是一种非常讨巧的设计手段，它有用，但是并非适用于每一个设计项目。动画应该是平滑无缝的，而非滞塞机械的，它的服务对象是用户，并且和其他内容的呈现形式不一样。
使用动画和动效的首要目的是提高网页的可用性。简单的动效可以有效的引导用户，帮助他们了解点击之后会去怎么样，即使是需要使用复杂的视差滚动动效，设计师也会搭配一些简单的动画来作为引导和辅助之用。
可用性的呈现形式：
解释功能，展示网站的运作呈现变化，比如展示可点击的元素，或者表单那的正确填写方式创建流程，或者引导用户执行动作召唤类的操作使用动效的第二个理由是出自美学需求。动画和动效无疑是拥有强装饰性的元素，如果某个动效是出于视觉装饰的作用而进行设计的话，无疑是可以接受的。 这种装饰性的动画不仅有助于讲述故事，而且可以建立用户界面之间的情感联系，它可以通过视觉上的变化引发用户的兴趣，在不断的交互中让用户停留更长的时 间，不断回来。
如果你要创建纯粹的动画，那么你楈枒仔细思考它能做什么，会带来什么。你希望用户有什么样的反馈？想分享一些独特的内容，还是用动效给用户带来愉悦的体验？这很重要。
准备为网站加入动画和动效么？接下来的一些文章或者网站可能会给你一些帮助。(这些文章都是英文的，恩)
《生命的错觉》会告诉你一些关于动画的12个基本原则
《网页动画的运作》是一个列表，其中的资源会告诉你网页动画是如何运作的
《CSS动效新手指南》是告诉你如何运用CSS属性来制作动画的
《弹性SVG元素》是教你如何使用SVG组件的教程
《UI动画的艺术》是Mark Geyer 的文章
《创建优秀动画的15个HTML5工具》，如果你掌握了基础知识，这个工具列表会非常有用
《动画师的急救包》这篇文章也是介绍各种形式动画的基本原理的
评判动画和动效其实并不难，只要看它是否为用户带来更好的体验，就知道了：它能否产生情感联系，能不能让人会心一笑，能不能让网站更好使用。
动画是一种有趣的技术，它的运用范畴会越来越广，如果你对它有兴趣，就持续研究下去，它就是未来。
译文来自： 优设
原文地址： designshack
优设译文： @陈子木
现在视频网站火的不要不要的，不过它的门槛也不低，自拍得有绝活或者会表演、分享科普要会找素材、申请授权，会编辑等等，把很多小伙伴挡在了门外。不过没关系，小编最近发现一个不错的办法，那就是用动画表达，特别适合科普、故事类的讲述。它只需要相对简单的背景、人物等，加上来画视频就可以搞定了。
我们在登录网站后需要注册，才能使用其功能。登录/注册后会有VIP收费提示，如果你不太熟悉的话，还是在注册后赠送3天的免费试用期内体验一下吧。咱们今天主要使用的是来画动画，点击首页的相应图片进入。
在来画动画页面中，点击“开始创作”即可进入制作页面。也可以先下拉页面，看一看其他功能，比如最方便的就是导入PPT制作视频，但是根据小编的体验，部分PPT导入时会卡死，所以从头做起是个更好的选择。
我们可以先在来画动画页面中根据视频类型找一些已有素材，在素材底部注明了价格和是否能商用。点击页面左侧的“新建作品”可以从头制作动画。选择空白草稿或导入PPT，这里我们当然还是选择空白草稿了。如果是新手的话，进入创作页面后会弹出教程指引，建议大家去看一看。
在制作页面中，点击“场景库”可以快速添加一个模板，平台提供了很多可供选择的模板，根据自己需求选择即可。选中自己喜欢的模板后，点击右侧的“替换背景”进一步修改样式，比如我们需要背景中带有LOGO，就可以从这里选择加载自己带有LOGO的背景图片。而且我们还能够在这里修改背景颜色，一切即可根据自己喜好定制。
在动画设置页面，我们只要双击文字就可以进行修改，这看起来有点像PPT，操作极为简单。你也可以通过左侧的“文字”添加自己需要的文字，包括文字框、样式、颜色、字体都可以定制。
我们如果需要为动画内容中添加角色内容，更拟人化的卡通形象来加强动画效果，点击左侧的“角色”即可。来画视频预置了许多特定动作的卡通人物，我们只需要选中就可以将其添加到动画页面中，而且可以自行调整大小、位置，甚至动作等等。
当然，这时候添加的卡通人物是位于图层最上一层，如果不需要它这么“抢镜”，点击卡通人物，右侧弹出菜单就可以调整图层位置，比如把它放置在图层最底层，这样不至于喧宾夺主。
只有动态影像是不够的，我们还需要添加声音。来画视频提供了三种方式，第一种是AI合成，输入文字就可以自动生成动画语音，也可以自行录制的文件（如mp3格式）上传，或者利用电脑直接现场配音录制（需要电脑带有麦克风）。
有了影像和声音，我们接下来需要进行时间轴的对应管理，这里要使用页面底部的时间轴。还是以卡通人物“串场”的形式来说明，点选卡通人物，拖动下方的时间轴起始图标，拖拽调整，就可以改变它的“入场”时间。这个时候我们还能对动画的速度进行调整，可以使用倍速、匀速、慢速三种方式，而且进入的方式也可以进行选择。同理，我们也可以拖动“出场”时间轴，以及“出场”方式，点击对应的结束轴图标即可调整。
调整完毕，我们就可以点击“播放”按钮来预览动画效果，根据自己的要求，看看是否还有需要调整的地方，从开始制作到出现成品，稍加学习5分钟就可以制作一个动画，非常方便。
其实，来画视频不仅仅可以使用预置的模板、素材，我们还可以根据自己的需要，上传自己手头已有的素材文件，方法是点击左侧栏中的“我的”然后点击“上传”就可以了。
来画动画非常简单易用，如果是简单的动画，1天就足够了，最终效果远比PPT简单的过场动画来得精良。如果对动画表达不太了解的小伙伴，则可以参考一些目前视频平台，比如仅在B站，就有历史类的“嘉佑生宣”、科普类的“这知识好冷”，讲故事的“进击的金厂长”等up主，精细立绘或是粗糙造型，都能做出受欢迎的视频。
另外说一下，目前来画视频加入了用于互动视频制作的“来画视频”，还有来画视频编辑（来画视频办公室），都同样以简洁易用为设计主旨，up主小伙伴可以在这个周末试一试，做出满意的视频作品一定要分享一下哦。
相关问答
动漫设计分为:2D动漫软件,3D动漫软件和网页动漫软件。2D动漫软件包括:ANIMO、RETASPRO、USANIMATION。3D动漫软件包括:3DMAX,MAYA、LIGHTWAVE。网...
手绘的,有...1,先去网上了解一下动漫这个行业,动漫的类型,动漫这个大框架内有哪些职业方向,比如有手绘的,有建模的,有渲染的等。2,买一本书,不是要你自学成...
推荐几款入门级的软件,建议都学习一下~~1、Maya(影视动画CG主流3D软件)MAYA在动画制作领域是一款最核心的软件。作为功能强大的三维动画软件,Maya在模型塑...
自学动画很难的动画需要很深厚的美术基础,就是我们学设计的都不能画脚本要是自学的话主要还以简单的网络动画flash来学吧三维的动画太难3dsmaxMaya...
[回答]还是值得信赖的,售后真可以业技术学院是中国高等院校的一级,简称“高职”,次于本科学院,相当于高等专科学校,并逐渐开始取代高等专科学校。以高等...
学习PPT动画要避免两大陷阱:①耗时。学习的目的是为了应用,虽说学无止境但也要适可而止。PPT动画的水很深,很多复杂的动画设计起来极其耗费时间和精力,要结...
1.打开flash软件并创建一个项目,在属性面板中设置好有关这个flash项目的必要...2.选择工具栏中的线条工具,绘制一个十字的两条线条,这两个线条的交点就充当...
3条回答:【推荐答案】这个很简单,你可以通过qq浏览器打开你说的动漫,然后看一下右下角有一个清晰度按钮,你可以在这里面调到超清画面,这样就可以啦。
powerpoint中的幻灯片动画有:进入,强调,退出,动作路径这四种类型。“进入”效果:例如,可以使对象逐渐淡入焦点、从边缘飞入幻灯片或者跳入视图中。“退出...
[回答]游戏学院天津校区使用汇众教育在国内市场上一套集完整性、实用性、易学性、先进性、科学性于一身的专业动漫设计课程培训体系。学完后能拿多少工资?...
