线条之美，玩转 SVG 线条动画

通常来说web前端实现动画效果主要通过下面几种方案：css动画；利用css3的样式效果可以将dom元素做出动画的效果来。canvas动画；利用canvas提供的API，然后利用清除-渲染这样一帧一帧的做出动画效果。svg动画；同样svg也提供了不少的API来实现动画效果，并且兼容性也不差，本文主要讲解一下如何制作svg线条动画。先来看几个效果：demodemodemo以上这

业界 2017年03月03日

功能性动效用好了，才能增强用户体验

译文 | 人类一直是视觉驱动的生物，所以影像的影响只会在动画的帮助下而提升。我们的眼镜本能的会注意移动的物体，而动画就像眼前的糖果——如此引人醒目。动效的应用能够在众多app中脱颖而出。最近，越来越多的设计师将动画作为增强用户体验的功能性元素。动画不再是只是一种视觉上的刺激，它已经是成功的交互的重要的工具之一。但是，如何在设计中让动效出现在合适的位置，以及合适的地方？好的交

交互体验 2017年04月01日

设计思考：功能性动画如何提升用户体验？

功能性动画的每一帧都有其目的，注意每一个细节，让动画成为操作过程中一部分。数码产品的用户体验会因为功能性动画的使用而得到提升。人类是视觉动物，我们天生就会注意到移动的物体。在app和网页中，小动画对我们来说像是眼睛的甜点一样，我们不自觉的就会被它们吸引。近来，越来越多的设计师将动画作为一种功能性的元素来提升产品的用户体验。动画不仅仅是装饰性花瓶的存在了，它成为了提升用户体验

交互体验 2017年03月29日

通过移动动画将手机应用代入生活

现代界面不再是一系列静态屏幕。通过使用动画给产品添加时间维度，弥合软件和人性之间的差距。如果你回首十年前，那时如果你在用户界面上使用移动动画会被认为是一种犯罪，而不是最佳实践。它与华丽的网站，弹出的窗口和闪烁的按钮相关联。但这在过去几年中发生了巨大的变化。自从iPhone和移动应用程序被推出以来，许多设计师得到了一些关于动态动画可能性的经验。动画正在快速成为界面设计的重要组

产品经理 2017年03月18日

新晋神器！超厉害的原型设计新玩具 KITE COMPOSITOR 深度测评

随着前几年可交互设计软件一番大战之后，很多红极一时的产品都由于各种原因慢慢淡出了设计师们的视野：主打 H5 的 Hype 好像慢慢没声音了、Pixate 被 Google 收购之后不久就宣告死亡、同是 Google 家的 Form 也没有做起来、Facebook 的 Origami 更新到了 2.0 但至少在国内没什么市场。目前，抛开 AE、C4D 这种更为专业的视频类软件

产品经理 2017年03月13日

［译文］如何合理使用 UI 动效？

最 近几年涌现出大量的原型设计工具，设计师们借助这些工具可以做出更为细致的动效设计。掌握这些工具少则需要几小时，多则几天。然而，在如此多的选择面前，很多设计师会感到迷茫。我们必须停下来回归一个问题：到底做动画（动效）的目的是什么？从意图上来说，动画是作为一种交流工具而存在的。设计师应该避免过度使用动画而对用户造成干扰。我们应该有效利用动画来帮助解决一些设计上的问题，例如通过

产品 2017年03月11日

想进阶成 PPT 高手？得先学会这些高级动画特性！

编者按：@魔力大熊老师的第二篇PPT 进阶教程来咯。PPT 中那么多的动效可以选，该用哪个？怎么做出类似苹果发布会那样酷炫的动画过渡效果？来看今天的干货，实战带你轻松上手！说到动画，就一定提到迪士尼。这家伟大的公司除了给观众留下数不清的经典荧屏角色，甚至还给整个动画行业奠定了制作的标杆。制作人 Ollie Johnston 和 Frank Tomas 在1981年出版了一本

产品经理 2017年02月21日

多媒体 H5：移动端最简单的动画制作方案

了解和使用多媒体制作H5已经成为前端工程师的必备技能。 多媒体H5的现状从吴亦凡假新闻H5的出现到现在，使用视频制作H5动画越来越流行，现在已然形趋势。了解和使用多媒体制作H5已经成为前端工程师的必备技能。下面分析一下多媒体H5：多媒体H5的优点1、实物动画 偶像、明星、美女、帅哥真人拍摄，效果逼真，更吸引眼球。2、丰富的视听享受 明星说唱，声优配音，魔性音乐，不但看得到还

产品 2017年01月15日

【ui 动效教程】UI 交互动效的设计原则

本文为大家提供一个【ui动效教程】UI交互动效的制作原则，希望能够给大家更多的帮助。去年发布了 Gyroscope 以来，许多人在问做动画用的什么 JavaScript 库，对于这个问题也有将它公布于众，但实际上那并不是奥妙所在。大神告诉我说，不想让大伙儿觉得自己需要依赖特别黑魔法的 JavaScript 插件才能解决问题。大部分时候，海淘科技神说都只要对最新的浏览器和 G

产品 2017年01月21日

移动 UI 设计中，动画的 3 种主要用途

随着技术的快速发展，动画不仅视觉奢华，更是用户期望的功能需求。 动画解决了界面中的许多功能问题，使交互生动起来，真正地响应用户 。下面让我们来探索下提高移动界面功能和情感力量的关键动画策略。1、系统状态在应用后台通常都会有很多进程，例如正在从服务器下载数据，正在进行计算等等。这样的进程总是需要一定时间，所以你要让你的用户知道应用没有卡住，并且显示出它正在处理的状态。这种视觉

产品 2017年04月05日