Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

CSS3 矩阵变换的动画问题

  CSS3的transform中是可以使用矩阵的,但矩阵这种非标量的东西要如何实现过渡呢?变换矩阵只描述了一个状态,两个状态之间可以有无穷多种变换途径。也就是说,知道开始和结束状态也无法求出变换过程,所以矩阵这东西是不是和animation冲突了呢?
  比如我们将一个单位矩阵变换到一个水平和垂直方向同时翻转的矩阵上,那么,这个变换过程是什么?顺时针旋转180度?还是逆时针旋转?还是直接同时执行水平和垂直翻转?这是无法得出结论的,通过这两个矩阵,我们只能知道开始和结束的两个状态,而无法得出这个变换过程的细节,下面是浏览器对这个行为的解析:
<h1>次碳酸钴</h1>
<style>
h1 {
  position:absolute;
  -webkit-animation:test 2s forwards;
  animation:test 2s forwards;
}
@keyframes test { to {transform:matrix(-1,0, 0,-1, 0,0);} }
@-webkit-keyframes test { to {transform:matrix(-1,0, 0,-1, 0,0);} }
</style>
  实际上,目前的浏览器将这个情况解析为了旋转,以上测试在Chrome38、Firefox32以及IE11上都为顺时针旋转。但是如果将上面代码改为这样:
<h1>次碳酸钴</h1>
<style>
h1 {
  position:absolute;
  -webkit-animation:test 2s forwards;
  animation:test 2s forwards;
}
@keyframes test { to {transform:matrix(-1,-0, -0,-1, 0,0);} }
@-webkit-keyframes test { to {transform:matrix(-1,-0, -0,-1, 0,0);} }
</style>
  也就是把0换成了-0,这在IE和Chrome上没有影响,但在Firefox上旋转会变成逆时针。不过无论这些细节如何,首先的问题是浏览器为什么将其解析为旋转呢?也许我想要的根本就是这样的结果:
<h1>次碳酸钴</h1>
<style>
h1 {
  position:absolute;
  -webkit-animation:test 2s forwards;
  animation:test 2s forwards;
}
@-webkit-keyframes test { to {transform:scale(-1,-1);} }
@keyframes test { to {transform:scale(-1,-1);} }
</style>
  好的吧,既然矩阵变换无法动画,那我们就在动画中不用矩阵不就得了?要是这样可以解决倒是也好。问题是在一些情况下,多个变换会自动被做成矩阵。比如下面代码中scale(0,0)的目的很明确,就是将元素缩小到看不见: <h1>次碳酸钴</h1>
<style>
h1 {
  position:absolute;
  -webkit-animation:test 2s forwards;
  animation:test 2s forwards;
  -moz-transform:rotate(0deg); /*Firefox只要存在rotate就会受影响*/
  -webkit-transform:rotate(1deg); /*Chrome要存在非0的rotate才会*/
  -ms-transform:rotate(180deg); /*IE暂不会受影响*/
}
@-webkit-keyframes test { to {transform:scale(0,0);} }
@keyframes test { to {transform:scale(0,0);} }
</style>
  但实际上在我测试的浏览器中只有IE11正常工作了,Chrome38和Firefox32都不会有缩放的动画。而Chrome确实有缩放的最终结果,也就是两秒钟后元素消失了,而Firefox根本就什么也没做。我们可以看看它们最终结果:
  所以呢,这里Firefox绝对是BUG。
  我觉得这部分规范应该完善点。矩阵无法过渡是情有可原的,也许animation可以完全不考虑矩阵,前面将矩阵解析为旋转的行为都可以取消掉。但浏览器不该将开发者使用的非矩阵描述转换成矩阵处理(虽然这确实是一种性能优化)。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^