文档章节

CreateJs系列教程之 EaselJs&Tween_5_绘制点击提示(Shape,Tween)

乐派电影
 乐派电影
发布于 2015/11/13 11:58
字数 355
阅读 1751
收藏 1

说明:

这里引入了新的库: Tween.js 缓动画;

核心JS代码:

var cjs = createjs,
    canvas,
    stage,
    container,
    w = window.innerWidth,
    h = window.innerHeight,
    s,
    dt = '';

function init() {
    //设置canvas属性
    canvas = document.getElementById('game');
    canvas.width = w;
    canvas.height = h;
    //创建舞台
    stage = new cjs.Stage(canvas);
    container = new cjs.Container();//绘制外部容器
    stage.addChild(container);

    //创建矩形
    s = new DrawArc(10, '#fff');
    s2 = new DrawArc(10, '#fff');
    //PS:Shape 类是没有getBounds这个方法,可以通过setBounds来获得
    var bounds = s.getBounds(),
        bounds2 = s2.getBounds();
    //控制居中位置
    s.x = w - bounds.width >>1;
    s.y = h - bounds.height >>1;
    s2.x = w - bounds2.width >>1;
    s2.y = h - bounds2.height >>1;
    s2.alpha = 0.6;

    s.on('click', function () {
        alert('提示!');
    });
    //加入场景
    container.addChild(s);
    container.addChild(s2);

    //Tween
    cjs.Tween.get(s, {loop: true})
        .to({scaleX: 2.5, scaleY: 2.5, alpha: 0}, 1000,  cjs.Ease.linear) // jump to the new scale properties (default duration of 0)
        .to({scaleX: 1, scaleY: 1, alpha: 1}, 0,  cjs.Ease.linear);

    cjs.Ticker.setFPS(60);//设置游戏帧率
    cjs.Ticker.on("tick", stage);
}

//绘制矩形 类
function DrawArc(r, c) {
    cjs.Shape.call(this);//继承Shap类
    this.graphics.beginFill(c).arc(0, 0, r, 0, 2*Math.PI);
    this.setBounds(0,0,r,r);//设置矩形的边界属性,这样可以获得width和height属性
}
DrawArc.prototype = new cjs.Shape();//获得原型方法

讲解说明:

1:Tween使用

 //Tween
    cjs.Tween.get(s, {loop: true})
        .to({scaleX: 2.5, scaleY: 2.5, alpha: 0}, 1000,  cjs.Ease.linear) // jump to the new scale properties (default duration of 0)
        .to({scaleX: 1, scaleY: 1, alpha: 1}, 0,  cjs.Ease.linear);

loop: 循环缓动,具体去查看  http://createjs.com/docs/tweenjs/classes/Ease.html API   to(obj , 缓动效果时间,方式)


效果演示:

© 著作权归作者所有

乐派电影

乐派电影

粉丝 134
博文 39
码字总数 18922
作品 1
成都
后端工程师
私信 提问
CreateJs系列教程-1-开始出发

介绍: CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎。打造 HTML5 游戏! CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包,旨在降低 HTML5 项目的开发难度和成...

乐派电影
2015/11/11
2.5K
0
CreateJS 新司机开车指南

CreateJS 新司机开车指南 2 人 TL,TR 最近在对前端互动游戏技术一些学习和探索,恰逢上一个小游戏使用了 CreateJS 技术,借此文对其使用做一次备忘,同时让想用 CreateJS 写小游戏的同学可以...

Tw93
2018/07/29
0
0
HTML5游戏开发高级教程 | Lynda教程 中文字幕

HTML5游戏开发高级教程 | Lynda教程 中文字幕 Advanced HTML5 Game Development 课程ID: 597988 时长: 2.3小时 所属类别:Html 全部游戏开发课程 了解如何使用HTML5创建交互式,动态和丰富多彩...

zwsub
2018/08/04
0
0
使用canvas定制你的心花怒放的七夕表白文字

背景描述 今天突然有需求,想用canvas绘制一些文字发给某人。于是就写了这个。效果如下: 其中的文字是可以定制的,定制的方法需要修改代码,方式很简单: 只改最后三个参数就可以了,每一行...

凌霄光
08/07
0
0
CreateJS结合Falsh工具生成Canvas动画(加密字符串的由来)

CreateJS是一款制作Canvas动画的工具。 官网如下: http://www.createjs.com/ http://www.createjs.cc/ 使用CreateJS时最大的疑问就是JS上的加密字符串是如何来的,比如: 其实这个加密字符串...

easonjim
2017/04/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CUBA-Platform应用切换数据库

修改文件位置如图:

微小宝
31分钟前
5
0
封装axios

1、创建一个server目录,在该目录下创建index.js文件 2、配置axios: import axios from 'axios'let loadingInstance = null //这里是loading//使用create方法创建axios实例export co......

Bing309
31分钟前
3
0
删除链表中重复的节点

解题思路: 我们每次都判断当前结点的值与下一个节点的值是否重复 如果重复就循环寻找下一个不重复的节点,将他们链接到——新链表的尾部(其实就是删除重复的节点) public ListNode delete...

Garphy
32分钟前
4
0
被吹上天的云桌面真的好用的吗,过来人告诉你答案

自从云桌面诞生以来它就是大家非常关注的一个话题,而关于对云桌面的宣传和赞美更是从来没有停止过的,有人说它是未来办公的首要选择,传统PC终将被它所替代,而更多的则是说使用云桌面能如何...

GZASD
36分钟前
5
0
JAVA浏览器控件JxBrowser v7.3上线!最新API文档打包带走!

JxBrowser(点击下载)是将基于Chromium的浏览器与Java应用程序集成,以处理和显示HTML5,CSS3,JavaScript,Flash等。 近日,JxBrowser v7.3发布上线,支持最新macOS Catalina,支持Java13,...

mnrssj
38分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部