在iOS上使用tweenjs动画图像时,我遇到了一个奇怪的问题。对于光栅图像,例如png,它会闪烁很多。 它在iPad上最引人注目。可能是因为屏幕较大。 SVG图像同时具有动画效果,因此这不是性能问题。 有没有办法改善光栅图像的动画? 这是我的测试jsfiddle
的链接function init() {
var stage = new createjs.Stage("demoCanvas");
var circle = new createjs.Bitmap('https://rawgit.com/damy90/createjs-bugs/master/ipad-scale-lag/finish.svg');
circle.x = 100;
circle.y = 100;
circle.regX= 84;
circle.regY= 26.5;
circle.width = 168;
circle.head = 53;
var circle2 = new createjs.Bitmap('https://rawgit.com/damy90/createjs-bugs/master/ipad-scale-lag/finish.png');
circle2.x = 100;
circle2.y = 200;
circle2.regX= 84;
circle2.regY= 26.5;
var circle3 = new createjs.Bitmap('https://rawgit.com/damy90/createjs-bugs/master/ipad-scale-lag/finish-big.png');
circle3.x = 300;
circle3.y = 200;
circle3.regX = 160;
circle3.regY = 53;
circle3.scaleX = 0.5;
circle3.scaleY = 0.5;
stage.addChild(circle, circle2, circle3);
createjs.Tween.get(circle, { loop: true })
.to({scaleX: 1.1, scaleY: 1.1}, 1000)
.to({scaleX: 1, scaleY: 1}, 1000);
createjs.Tween.get(circle2, { loop: true })
.to({scaleX: 1.1, scaleY: 1.1}, 1000)
.to({scaleX: 1, scaleY: 1}, 1000);
createjs.Tween.get(circle3, { loop: true })
.to({scaleX: 0.55, scaleY: 0.55}, 1000)
.to({scaleX: 0.5, scaleY: 0.5}, 1000);
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
setTimeout(function(){
circle2.cache(-2, -2, 172, 57);
circle3.cache(-2, -2, 340, 110);
}, 500);
}
init();
第一名是svg,第二名是png,第三名是png。