2017 年用于 UI 设计的 CSS3 和 JavaScript 动画库(TOP 9)

前端网页设计在过去的十年里经历了一场革命。在2007年,我们大多数人仍在设计静态杂志布局,在2017年,我们重新设计了数字机器,有成千上万的调整、协调、移动的部件。

简单的说,很好的UI设计师还需要成为很好的动画师 – 需要对网络动画技术有一个很好的理解。

这是我们指南中最新更新的,帮助你为每个任务选择正确的动画库。我们将通过 9 个免费的、编码良好的动画库,最适合于UI设计,它们的优点和缺点,以及何时选择它们。

请记住,我们是从一个熟悉代码的UI设计师(而不是从代精通代码的开发人员)的角度来看待每个库。这些库中有一些是纯 CSS 实现的。其他是JavaScript 的,但是,除了了解基本的 HTML/CSS 之外,使用他们你不需要更多的其他知识。链接一个动画库 – 添加一个 CSS 类 即可。
继续阅读

[jQuery插件] jQuery Color Animations颜色动画插件

jQuery的animate方法对颜色无法做动画效果,例如有个test元素:

[code=”html”]

测试元素

[/code]

我们写一行这样的代码:

[code=”javascript”]

$(“#test”).animate({“backgroundColor”:”#FF3300″,”height”:200},5000);

[/code]

我们可以看到test元素高度会缓慢的变小,而该元素的背景颜色却毫无变化,假设你去对边框做颜色变化的动画效果,也是无法实现的。

再看一下API:http://www.css88.com/jqapi/#p=animate

所有用于动画的属性必须是数字的(除了如下所示);这些属性如果不是数字的将不能使用基本的jQuery功能。(举个例子,widthheight或者left可以执行动画,但是background-color不能。)属性值被当作一个像素单位的数字,除非另有说明。单位em 和 %需要指定使用。就是说color,background-color,border-left-color等等这些颜色属性是不能执行动画效果的。

jQuery ui中Effects有一个Color Animation效果(见:http://jqueryui.com/demos/animate/)这里分明能改变文本颜色和背景颜色,看了一下jquery.effects.core.js这个源码,并且抽出源码,改了一个jQuery Color Animations颜色动画插件,对’backgroundColor’, ‘borderBottomColor’, ‘borderLeftColor’, ‘borderRightColor’, ‘borderTopColor’, ‘color’, ‘outlineColor’这几个属性做了动画支持。

见demo页面:http://www.css88.com/demo/Color_Animations/

更多阅读:

http://jquery.offput.ca/highlightFade/

http://www.bitstorm.org/jquery/color-animation/