标签归档:CSS3

使用CSS3和canvas实现多点移动动画

最近在做一款太鼓达人的游戏,其中需要实现多个点快速移动动画,一开始使用CSS3的transform来实现,发现超过5个点后,动画效果开始出现卡顿。尝试各种优化方法都无效果,PC端上运行一直都会出现卡顿(测试了下iOS下确是很流畅)。最后改用canvas实现,性能上好了很多。

先来看看CSS3的效果

canvas主要是实现原理是通过遍历所有点的数组,并不断更新点的Y轴。主要实现代码如下:
canvas效果

addBall: function(type){
      if(type == 0){
        var img = TG.options.ballImg1;
      }else if(type == 1){
        var img = TG.options.ballImg2;
      }
      // 创建新的ball对象
      var ball = {
        'img': img,
        'x': 1200,
        'y': 20,
        'w': 60,
        'h': 60
      }
      // 将其保存在balls数组中
      TG.options.balls.push(ball);
    },

drawFrame: function() {
      if(TG.options.balls.length == 20){
        TG.options.balls.splice(0,1);
      }
      // 清除画布
      TG.options.context.clearRect(0, 0, TG.options.canvas.width, TG.options.canvas.height);
     
      TG.options.context.beginPath();
     
      // 循环所有的球
      for(var i=0; i<TG.options.balls.length; i++) {
        // 把每个球移动到新的位置
        var ball = TG.options.balls[i];
        ball.x -= 4;
        TG.drawImg(TG.options.context,ball);
      }

      (TG.requestAnimFrame)()(TG.drawFrame);
    },

CSS3 mask 实现心形头像

CSS3 的mask 和和PS中的蒙版很像,即为了得到特殊的显示效果,可以在遮罩层上创建一个任意形状的“视窗”,遮罩层下方的对象可以通过该“视窗”显示出来,而“视窗”之外的对象将不会显示。mask便是创建这样一个遮罩层。

关键属性: mask-image 通过读取透明度对html元素进行遮罩,黑色代表透明,白色代表不透明,灰色为半透明。适用于所有元素。

兼容性:查看 caniuse

查看 DEMO

mask