我使用基于关键帧的CSS3动画在div之间滑动,贝塞尔曲线为(0.10,0.70,0.10,1),持续时间为400毫秒
Android上的性能(在HTC One M8和S4上使用原生4.4网页视图和基于blink的Crosswalk进行测试)非常不稳定,帧率非常低。从iOS 4s到iOS 5s的性能都非常完美,接近原生性能。
有人可以解释什么可能导致这和如何纠正它的一些建议,它是否需要使用基于javascript的动画解决方案,如VelocityJS?
如果这个问题有点模糊,我很抱歉,但我不认为我在这个问题上添加了大量的CSS关键帧规则会对任何人有帮助,所以我省略了它。
下面是一个简单的例子来说明我所说的
http://jsfiddle.net/hu69H/(在台式机上运行良好,但不是很完美,除了iOS,它在移动设备上根本没有性能)
下面是执行滑动的逻辑部分的代码片段:
var $ = function (id) {
"use strict";
return document.getElementById(id);
},
slideOpts = {
sl: ['slin', 'slout'],
sr: ['srin', 'srout'],
popin: ['popin', 'noanim'],
popout: ['noanim', 'popout'],
noanim: ['noanim', 'noanim']
},
function Slide(slideType, vin, vout, callback) {
var vIn = $(vin),
vOut = $(vout),
onAnimationEnd = function () {
vOut.classList.add('hidden');
vIn.classList.remove(slideOpts[slideType][0]);
vOut.classList.remove(slideOpts[slideType][1]);
vOut.removeEventListener('webkitAnimationEnd', onAnimationEnd, false);
vOut.removeEventListener('animationend', onAnimationEnd);
};
if (slideType == 'noanim'){
vIn.classList.remove('hidden');
vOut.classList.add('hidden');
} else {
vOut.addEventListener('webkitAnimationEnd', onAnimationEnd, false);
vOut.addEventListener('animationend', onAnimationEnd);
if (callback && typeof (callback) === 'function') {
callback();
}
vIn.classList.remove('hidden');
vIn.classList.add(slideOpts[slideType][0]);
vOut.classList.add(slideOpts[slideType][1]);
}
你们有复制这个的样品箱吗?这将有助于找出根本原因。