模擬easeljs做動畫

Taste 發布于2019-08-19 17:37 / 2295人閱讀

摘要：昨天看了老外的視頻教程，介紹了做大大節約了開發的成本，老外用原生的和各實現了一遍方塊旋轉動畫。

昨天看了老外的視頻教程，介紹了easeljs做canvas大大節約了開發的成本，老外用原生的canvas和easeljs 各實現了一遍方塊旋轉動畫。

這時的我感覺很驚訝，原來動畫做起來并不是我想得這么復雜，于是自己用模擬easeljs也做了一個動畫旋轉，感覺棒棒噠～



    
        
        Easel Project

  // 正規的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(); //圖畫
    var shape = new Shape(graphics); //圖形
    var stage = new Stage(canvas).addChild(shape); //舞臺
    
    //設置圖畫
    var size = 100;
    graphics.beginFill("rgb(162, 216, 255)");
    graphics.drawRect(0, 0, size, size);
    graphics.regX = size / 2;
    graphics.regY = size / 2;
    
    //設置圖形
    shape.x = canvas.width / 2;
    shape.y = canvas.height / 2;
    shape.rotate = 30;
    
    //更新舞臺
    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() {
    //通過stage實例順藤摸瓜找到所有要用的對象
    var canvas = this.canvas;
    var context = this.context;
    var shape = this.shape;
    var graphics = shape.graphics;
    
    context.save();//保存當前狀態
    context.clearRect(0, 0, canvas.width, canvas.height); //清空內容
    
    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;
  };

GPU云服務器云服務器 javafx做動畫 easeljs easeljs-canvas 動畫瘋

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78694.html

Vue項目引入CreateJS的方法（親測）

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

golden_hamster 2019-08-23 17:51 評論0 收藏0
CreateJS入門 -- 注釋詳細到爆炸（My Style）

摘要：以后所有的文章都會第一時間更新到這里，然后同步到其他平臺。獲取畫布的寬和高，后面計算使用定義靜態資源人物動作雪碧圖天空地面遠山近山創建資源加載隊列用還是用標簽來加載如果是的時候，就用標簽來加載，如果不能用標簽的話，就用來加載。寫在前面首先，還是謝謝大家的支持，謝謝！記得在之前的文章中我說過自己算是一個半文藝程序員，也一直想著寫一寫技術性和其他偏文學性的文章。雖然自己的底子沒有多么優...

Render 2019-08-22 18:49 評論0 收藏0
CreateJS入門 -- 注釋詳細到爆炸（My Style）

摘要：以后所有的文章都會第一時間更新到這里，然后同步到其他平臺。獲取畫布的寬和高，后面計算使用定義靜態資源人物動作雪碧圖天空地面遠山近山創建資源加載隊列用還是用標簽來加載如果是的時候，就用標簽來加載，如果不能用標簽的話，就用來加載。寫在前面首先，還是謝謝大家的支持，謝謝！記得在之前的文章中我說過自己算是一個半文藝程序員，也一直想著寫一寫技術性和其他偏文學性的文章。雖然自己的底子沒有多么優...

liangdas 2019-08-02 10:58 評論0 收藏0
createjs知識點梳理，持續更新中...

摘要：前言一直以來想要研究，卻沒去完整了解，林林總總找過有些案例資料。直到去年，由于工作原因，特意去看了官網文檔，對知識體系有了完整了解。前言：一直以來想要研究canvas，卻沒去完整了解，林林總總找過有些案例資料。直到去年，由于工作原因，特意去看了createjs官網文檔 - https://www.createjs.com，對知識體系有了完整了解。后面根據網易的一款叫做花語月的解密游...

wangdai 2019-08-26 12:20 評論0 收藏0