当前位置: 首页 > 文档资料 > Vue.js 教程 >

2.3.4 给设计赋予生命

优质
小牛编辑
128浏览
2023-12-01

只要一个动画,就可以带来生命。不幸的是,当设计师创建图标、logo 和吉祥物的时候,他们交付的通常都是图片或静态的 SVG。所以,虽然 GitHub 的章鱼猫、Twitter 的小鸟以及其它许多 logo 类似于生灵,它们看上去实际上并不是活着的。

Vue 可以帮到你。因为 SVG 的本质是数据,我们只需要这些动物兴奋、思考或警戒的样例。然后 Vue 就可以辅助完成这几种状态之间的过渡动画,来制作你的欢迎页面、加载指示、以及更加带有情感的提示。

Sarah Drasner 展示了下面这个 demo,这个 demo 结合了时间和交互相关的状态改变:

See the Pen Vue-controlled Wall-E by Sarah Drasner (@sdras) on CodePen.