模拟easeljs做动画

Taste 发布于2019-08-19 17:37 / 2177人阅读

摘要：昨天看了老外的视频教程，介绍了做大大节约了开发的成本，老外用原生的和各实现了一遍方块旋转动画。

昨天看了老外的视频教程，介绍了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;
  };

海外云主机服务器托管 javafx做动画 easeljs easeljs-canvas 动画疯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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