成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

模擬easeljs做動(dòng)畫(huà)

Taste / 2308人閱讀

摘要：昨天看了老外的視頻教程，介紹了做大大節(jié)約了開(kāi)發(fā)的成本，老外用原生的和各實(shí)現(xiàn)了一遍方塊旋轉(zhuǎn)動(dòng)畫(huà)。

昨天看了老外的視頻教程，介紹了easeljs做canvas大大節(jié)約了開(kāi)發(fā)的成本，老外用原生的canvas和easeljs 各實(shí)現(xiàn)了一遍方塊旋轉(zhuǎn)動(dòng)畫(huà)。

這時(shí)的我感覺(jué)很驚訝，原來(lái)動(dòng)畫(huà)做起來(lái)并不是我想得這么復(fù)雜，于是自己用模擬easeljs也做了一個(gè)動(dòng)畫(huà)旋轉(zhuǎn)，感覺(jué)棒棒噠～



    
        
        Easel Project
        
    
    
        
    
    
        
        
    

  // 正規(guī)的createjs
  function initCreatejs() {
    var canvas = document.getElementById("easel");
    var graphics = new createjs.Graphics();
    var size = 100;
    graphics.beginFill("rgb(162, 216, 255)");
    graphics.drawRect(0, 0, size, size);
    var shape = new createjs.Shape(graphics);
    
    //canvas center
    shape.x = canvas.width / 2;
    shape.y = canvas.height / 2;
    
    //graphics center
    shape.rotation = 30;
    shape.regX = size / 2;
    shape.regY = size /2 ;
    
    var stage = new createjs.Stage(canvas);
    stage.addChild(shape);
    stage.update();
  }

  //仿造的createjs
  function initEric() {
    var canvas = document.getElementById("easel");
    var graphics = new Graphics(); //圖畫(huà)
    var shape = new Shape(graphics); //圖形
    var stage = new Stage(canvas).addChild(shape); //舞臺(tái)
    
    //設(shè)置圖畫(huà)
    var size = 100;
    graphics.beginFill("rgb(162, 216, 255)");
    graphics.drawRect(0, 0, size, size);
    graphics.regX = size / 2;
    graphics.regY = size / 2;
    
    //設(shè)置圖形
    shape.x = canvas.width / 2;
    shape.y = canvas.height / 2;
    shape.rotate = 30;
    
    //更新舞臺(tái)
    Ticker.setFPS(30);
    Ticker.addListener(function() {
      shape.rotate += 8;
      stage.update();
    });
  }
  
  function Ticker() { 
  }
  Ticker.setFPS = function(num) {
    this.speed = 1000 / num;
  };
  Ticker.addListener = function(cb) {
    setInterval(cb, this.speed);
  };
  
  function Stage(canvas) {
    this.canvas = canvas;
    var context = this.context= canvas.getContext("2d");
  };
  Stage.prototype.showFrame = function() {
    var canvas = this.canvas;
    var context = this.context;
    context.strokeStyle = "red";
    context.strokeRect(0, 0, canvas.width, canvas.height);
  };
  Stage.prototype.addChild = function(shape) {
    this.shape = shape;
    return this;
  };
  Stage.prototype.update = function() {
    //通過(guò)stage實(shí)例順藤摸瓜找到所有要用的對(duì)象
    var canvas = this.canvas;
    var context = this.context;
    var shape = this.shape;
    var graphics = shape.graphics;
    
    context.save();//保存當(dāng)前狀態(tài)
    context.clearRect(0, 0, canvas.width, canvas.height); //清空內(nèi)容
    
    context.fillStyle = graphics.color;
    context.translate(shape.x, shape.y);
    context.rotate(shape.rotate * Math.PI / 180);
    context.translate(-graphics.regX, -graphics.regY);
    context.fillRect(graphics.x , graphics.y , graphics.w, graphics.h);
    context.restore();
    return this;
  };
  
  function Shape(graphics) {
    this.x = 0;
    this.y = 0;
    this.graphics = graphics;
  }
  function Graphics() {
    this.regX = 0;
    this.regY = 0;
  }
  Graphics.prototype.beginFill = function(color) {
    this.color = color;
    return this;
  };
  Graphics.prototype.drawRect = function(x, y, w, h) {
    this.x = x;
    this. y = y;
    this.w = w;
    this.h = h;
    return this;
  };

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78694.html

相關(guān)文章

  • Vue項(xiàng)目引入CreateJS的方法（親測(cè)）

    摘要：前言介紹是基于開(kāi)發(fā)的一套模塊化的庫(kù)和工具。包含類(lèi)工具庫(kù)提供了一套完整的，層次化的顯示列表的互動(dòng)方式來(lái)更簡(jiǎn)單的處理畫(huà)布。方法一安裝注意這里下載的版本不是官網(wǎng)最新版本。 1 前 言 1.1 CreateJS介紹 showImg(https://segmentfault.com/img/remote/1460000019340654); CreateJS是基于HTML5開(kāi)發(fā)的一套模塊化的庫(kù)和...

    golden_hamster 評(píng)論0 收藏0

  • CreateJS入門(mén) -- 注釋詳細(xì)到爆炸（My Style）

    摘要：以后所有的文章都會(huì)第一時(shí)間更新到這里，然后同步到其他平臺(tái)。獲取畫(huà)布的寬和高，后面計(jì)算使用定義靜態(tài)資源人物動(dòng)作雪碧圖天空地面遠(yuǎn)山近山創(chuàng)建資源加載隊(duì)列用還是用標(biāo)簽來(lái)加載如果是的時(shí)候，就用標(biāo)簽來(lái)加載，如果不能用標(biāo)簽的話，就用來(lái)加載。 寫(xiě)在前面 首先，還是謝謝大家的支持，謝謝！記得在之前的文章中我說(shuō)過(guò)自己算是一個(gè)半文藝程序員，也一直想著寫(xiě)一寫(xiě)技術(shù)性和其他偏文學(xué)性的文章。雖然自己的底子沒(méi)有多么優(yōu)...

    Render 評(píng)論0 收藏0

  • CreateJS入門(mén) -- 注釋詳細(xì)到爆炸（My Style）

    摘要：以后所有的文章都會(huì)第一時(shí)間更新到這里，然后同步到其他平臺(tái)。獲取畫(huà)布的寬和高，后面計(jì)算使用定義靜態(tài)資源人物動(dòng)作雪碧圖天空地面遠(yuǎn)山近山創(chuàng)建資源加載隊(duì)列用還是用標(biāo)簽來(lái)加載如果是的時(shí)候，就用標(biāo)簽來(lái)加載，如果不能用標(biāo)簽的話，就用來(lái)加載。 寫(xiě)在前面 首先，還是謝謝大家的支持，謝謝！記得在之前的文章中我說(shuō)過(guò)自己算是一個(gè)半文藝程序員，也一直想著寫(xiě)一寫(xiě)技術(shù)性和其他偏文學(xué)性的文章。雖然自己的底子沒(méi)有多么優(yōu)...

    liangdas 評(píng)論0 收藏0

  • createjs知識(shí)點(diǎn)梳理，持續(xù)更新中...

    摘要：前言一直以來(lái)想要研究，卻沒(méi)去完整了解，林林總總找過(guò)有些案例資料。直到去年，由于工作原因，特意去看了官網(wǎng)文檔，對(duì)知識(shí)體系有了完整了解。 前言：一直以來(lái)想要研究canvas，卻沒(méi)去完整了解，林林總總找過(guò)有些案例資料。直到去年，由于工作原因，特意去看了createjs官網(wǎng)文檔 - https://www.createjs.com，對(duì)知識(shí)體系有了完整了解。后面根據(jù)網(wǎng)易的一款叫做 花語(yǔ)月的解密游...

    wangdai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<