tweenjs光栅图像在iPad上闪烁缩放动画

时间:2017-05-29 13:26:25

标签: javascript ios canvas createjs tween.js

在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。

0 个答案:

没有答案