题图是2013年在 OSRAM 的顶层拍的远景,能看到慕尼黑的高楼大厦不算多,远近也就看到4栋,左上的富士通,右侧远处的奥林匹克公园的高塔还有宝马大厦,最远处的那一栋我不知道是哪里了——这是因为不在老城区,老城区的话所有的建筑是不能高于玛丽安广场的老教堂的,这也是为什么大部分欧洲城市的高楼大厦偏少的原因,都是类似的情况。
言归正传,Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢,比如:
- 数字和运算
- 颜色的显示
- SVG 节点的位置(我知道这个没有在 HTML 当中说明过,我本来是打算放在 CSS 部分后面的,不过 Web API 这个部分我自己也有点迷糊,所以先学了再分享会更好,考虑放在 Vue 这部分后面了)
- 元素的大小和其他属性
这些数据要么本身就以数值形式存储,要么可以转换为数值,有了这些数值后,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态。
所以今天这个章节就是一起来看看元素的状态过渡效果。
1 状态动画
通过监听器我们能监听到任何数值类 DOM 属性的数值更新,这个可能听起来很抽象,所以让我们先来看看使用 GreenSock(另一个动画库) 一个例子:
<!DOCTYPE html>
我们可以看到当数值更新时,就会触发动画。
这个是一个不错的演示,但是对于不能直接像数字一样存储的值,比如 CSS 中的 color 的值怎么办?通过下面的例子我们来通过 Tween.js 和 Color.js 实现一个例子:
<!DOCTYPE html>
2 动态的状态过渡
就像 Vue 的过渡组件一样,数据背后状态过渡会实时更新,这个特点对于原型设计十分有用;当我们修改一些变量,即使是一个简单的 SVG 多边形也可实现很多难以想象的效果。
官网提供了一个例子(这里还是要说明一下,官方代码使用的是 var,而我这里大量使用 let 而不是 const 是因为演示原因,事实上有不少比如 generatePoints 方法定义当中的两个变量,其实都应该是常量,以防意料之外的修改):
<!DOCTYPE html>
3 用好组件进行过渡
管理太多的状态过渡会很快的增加 Vue 实例或者组件的复杂性,所以我们可以把动画放置在专用的子组件之内,这里我们来将之前数值变化的示例改写一下:
<!DOCTYPE html>
我们能在组件中结合使用这一节讲到各种过渡策略,和上一节提及的 Vue 内建过渡,总之,对于完成各种过渡动效几乎没有阻碍。
4 赋予设计以生命
这部分内容完全来自于官方手册:
只要一个动画,就可以带来生命。不幸的是,当设计师创建图标、logo 和吉祥物的时候,他们交付的通常都是图片或静态的 SVG。所以,虽然 GitHub 的章鱼猫、Twitter 的小鸟以及其它许多 logo 类似于生灵,它们看上去实际上并不是活着的。
Vue 可以帮到你。因为 SVG 的本质是数据,我们只需要这些动物兴奋、思考或警戒的样例。然后 Vue 就可以辅助完成这几种状态之间的过渡动画,来制作你的欢迎页面、加载指示、以及更加带有情感的提示。
Sarah Drasner 展示了下面这个 demo,这个 demo 结合了时间和交互相关的状态改变(小警告,完整代码很长,因为动画完全是由 svg 实现的,我这里仅仅是实现了本地化处理):
<!DOCTYPE html>
话说我的美术细胞是少了点,svg 也就不是我能玩得转的类型,看到人家的样例真是羡慕嫉妒恨啊……