熟悉我的人大概看到过微博上这些事情, 也是我最近在头疼的事情:
一个是我尝试去写动画框架了, 声明式语法写动画, 放了个项目
https://github.com/Quamolit
http://www.tudou.com/programs/view/ZjIXLXXnHpQ/
另一个是我在大量追 Dribbble 上的新设计, 俨然超过我对编程的兴趣
https://dribbble.com/jiyinyiyong/likes
到现在这种情况下我应该假设我并没有能力解决这个问题了, 声明式写动画
从学编程一开始我就有期待自己能写动画, 做漂亮的界面, 就像 Dribbble 上那些 gif
相对而言, JavaScript 写界面, 跟写动画差距还是挺远,
这也是盲目学编程不好的地方, 我走偏了, React 的方向, 对于动画有点无奈
Quamolit 的困境
我明确一下我的目标, 我想用声明式的语法, 写出富含动画的界面
动画的效果是比如一些视差滚动, 渐变等等, 比如今天看到的一个例子:
图片来自 Dribbble
我认为使用 CSS3 写出的动画不能达到我的期待因此 Quamolit 是基于 canvas 的
而实际上我的编程能力, 现在只能做出基本的 transition
更头疼的是, 延时的问题就把我难住了. 比如图上的列表中的一行 X
随着 X 载入, 从上到下有不同的延时, 消失时也是
然而, 对 X 直接进行操作, 动画是不能有延时的
X 后面的元素跟着 X 的动画移动, 如果前面有, 前面也要移动
这种场景当中, 对于 Quamolit 来说还会有其他的问题
框架设计成声明式的, 在编写动画的时候就不会写大量的逻辑, 对照上边, 很难
动画是有状态的, 而且状态会被打断, 有延时意味着动画状态还不一致, 情况非常多
这些问题让我感到非常无力, 我只是遇到了其中一点就已经无法前进了
类似 Material Design 带出的是界面富含大量的动画, 其中一个就是跨 View 的动画
这在 DOM 这样的结构当中非常难实现, Canvas 相对会好点
表示没有研究过 Android 平台底层如何实现, 但是基本确定不是声明式的方案
状态的处理
React 教会我的很棒的一点是, 将界面的状态转化为真实的数据
在 React 当中 state 跟 props 很好得发挥了作用
但是到了动画当中, 如果每个元素都有动画, 意味着每个元素有内部状态
而且, 每个元素的内部状态还是随着时间不断在渐变着的
CSS3 动画能实现很不错的效果, 但是 DOM 作为模板引擎受到限制, 不能肆意动画
对于编程来说, 避免状态变得复杂是将代码变清晰很重要的手段
包括在编写界面当中, 界面更加一致, 规则更明确简单, 界面代码更好维护
但是实际上看到设计师的作品, 界面只会更加复杂, 动画的效果也更加复杂
扁平化只是在技术手段波折之间出现的一次重构, 界面不会简单下去, 至少我这么认为的
这就意味着技术手段跟上之后, 界面很可能包含大量的动画的状态在其中
这对于编程来说会是很大的挑战
我已经被纠缠地没多少信心了, 虽然我相信比我聪明的人有的是, 但关注这问题的不多
编程思维的精炼, 跟设计作品想法的多姿多彩, 少不了纠缠
希望早点有聪明人来考虑一下这个问题, 我简化了归结一下:
用声明式的语法写复杂交互动画
后续:
在这个问题上是我考虑不周, 后来我也想到了解决的办法, 至少解决了手头的情形
要通过是否有父元素来判断是否需要插入延时, 那么判断父元素就好了
之前我的不足在于我的步骤顺序, 实际上做一下缓存, 就能正确判断了...
当然具体实现可以看代码, 但是不重要.
完成后, 对现实的认识也更明确一些, 就是设计师的动画不会仅限在这个过程
也就是说从框架生成动画, 当然是不够的, 还是少不了需要定制的代码
我也有点怀疑我的方向是走不通的了...