Web 技术研究所

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

animation过程中的参数修改逻辑

  当一个CSS3的animation正在执行时,修改这个动画的播放参数会产生什么影响呢?实际上有些参数是不会在播放过程中被实时计算的,比如动画时长(animation-duration)属性,通常是在动画播放前确定了时长后才生成每一帧,播放过程中不会重新计算。
  其实这个问题在Chrome和Firefox上的实现是有差异的,下面代码可以验证:
<style>
@-webkit-keyframes mawaru {
  to {transform:rotate(360deg);}
}
@keyframes mawaru {
  to {transform:rotate(360deg);}
}
div {
  width:100px;height:100px;
  background:red;margin:50px;
  -webkit-animation:mawaru 8s linear infinite;
  animation:mawaru 8s linear infinite;
}
div:hover {
  background:green;
  -webkit-animation-duration:2s;
  animation-duration:2s;
}
</style>
<div></div>
  根据我的逻辑,这个测试代码在鼠标hover时元素的旋转应该加速的,因为在hover伪类中将播放时长缩短了,也就是说元素旋转一周所需的实现变短了。但这个测试在Chrome上是不会加速的。Chrome的逻辑就是初始状态通过给定的参数计算每一帧,播放过程中不重复计算。但这个代码在Firefox上会出现加速的情况,或者也不能称为加速,这是一个更诡异的情况。Firefox把动画的时间轴分裂成两条了,一条处理时长为8s的旋转,另一条处理时长为2s的旋转。这可以通过下面的测试来验证(请使用Firefox测试):
<style>
@keyframes mawaru {
  to {transform:rotate(360deg);}
}
div {
  width:100px;height:100px;
  background:red;margin:50px;
  animation:mawaru 8s linear infinite;
}
div.active {
  background:green;
  animation-duration:2s;
}
</style>
<div id="test"></div>
<script>
setInterval(function(){
  test.classList.toggle("active");
},16);
</script>
  这个代码使元素快速在两种样式之间切换,我们可以看到红色和绿色的正方形都是各自按照自己的时间轴旋转的。只是最终显示的效果只能有一种,但即使没有被显示,时间轴也依然在跑。这个逻辑很诡异,我瞬间感受到了平行宇宙的存在。虽然Chrome的实现直接无视参数的修改我不太喜欢,但Firefox这个平行宇宙般的实现更蛋疼。我觉得动画播放期间播放参数被修改时应该从当前进度开始计算,实时处理之后的帧(当然可能在性能上不如现在的方法高),上面的第一个测试代码达到的效果应该是加速旋转才合适。
  嘛,也许目前浏览器这么实现也有自己的考虑,我只是觉得目前浏览器的实现不太实用而已,希望浏览器能提供更实用的。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^