当前位置： 首页 > news >正文

[H5动画制作系列] 奔跑的豹子的四种Demo演化

news 2026/1/9 5:35:37

资源:

bg.jpg:

leopard.png: 背景透明

peopard2.png 背景不透明

参考代码1:

leopard.js:

(function(window) {ma = function() {this.initialize();}ma._SpriteSheet = new createjs.SpriteSheet({images: ["leopard.png"], frames: [[0,0,484,207],[486,0,484,207],[972,0,484,207],[1458,0,484,207],[0,209,484,207],[486,209,484,207],[972,209,484,207],[1458,209,484,207],[0,418,484,207],[486,418,484,207],[972,418,484,207],[1458,418,484,207],[0,627,484,207],[486,627,484,207],[972,627,484,207],[1458,627,484,207],[0,836,484,207],[486,836,484,207],[972,836,484,207]]});var ma_p = ma.prototype = new createjs.Sprite();ma_p.Sprite_initialize = ma_p.initialize;ma_p.initialize = function() {this.Sprite_initialize(ma._SpriteSheet);this.paused = false;}window.ma = ma;}(window));

index.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="createjs.min.js"></script><script src="leopard.js"></script>
</head>
<body onload="init()"><canvas  id="mainView" height="600" width="1200"></canvas><script>var canvas, stagecanvas = document.getElementById("mainView");function init() {stage = new createjs.Stage(canvas);createjs.Ticker.setFPS(24);createjs.Ticker.addEventListener("tick", stageBreakHandler);var animate = new ma();stage.addChild(animate);}function stageBreakHandler(event) {stage.update();}</script>
</body>
</html>

参考代码2;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="createjs.min.js"></script><title>Document</title><style>#gameCanvas{background-image: url(bg.jpg);background-size: 100% 100%;}</style></head><body onload="init()"><canvasid="gameCanvas"width="1024"height="768"style="background-color: black;"></canvas><script>// 初始化舞台// var mycanvas = document.getElementById("gameCanvas");var sprite,stagefunction init() {stage = new createjs.Stage("gameCanvas"); var spriteData = new createjs.SpriteSheet({images: ["leopard.png"],frames:[[0,0,484,207],[486,0,484,207],[972,0,484,207],[1458,0,484,207],[0,209,484,207],[486,209,484,207],[972,209,484,207],[1458,209,484,207],[0,418,484,207],[486,418,484,207],[972,418,484,207],[1458,418,484,207],[0,627,484,207],[486,627,484,207],[972,627,484,207],[1458,627,484,207],[0,836,484,207],[486,836,484,207],[972,836,484,207]],animations: {run: [0, 19, "run", 1],         },});sprite = new createjs.Sprite(spriteData);      stage.addChild(sprite); sprite.x= -10;sprite.y = 380;          createjs.Ticker.framerate = 30;createjs.Ticker.addEventListener("tick", tick);}    function tick(event) {if (sprite.currentAnimation != "run") {sprite.gotoAndPlay("run");}   sprite.x= sprite.x+30;     stage.update(event);}</script></body>
</html>

参考代码3:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="createjs.min.js"></script><title>Document</title>
</head><body onload="init()"><canvas id="gameCanvas" width="1024" height="768"></canvas><script>// 初始化舞台// var mycanvas = document.getElementById("gameCanvas");var sprite, stage, bg, rectfunction init() {stage = new createjs.Stage("gameCanvas");bg = new createjs.Bitmap("bg.jpg")rect = new createjs.Rectangle(0, 0, 1024, 768)bg.sourceRect = rect;var spriteData = new createjs.SpriteSheet({images: ["leopard.png"],frames: [[0, 0, 484, 207], [486, 0, 484, 207], [972, 0, 484, 207], [1458, 0, 484, 207], [0, 209, 484, 207], [486, 209, 484, 207], [972, 209, 484, 207], [1458, 209, 484, 207], [0, 418, 484, 207], [486, 418, 484, 207], [972, 418, 484, 207], [1458, 418, 484, 207], [0, 627, 484, 207], [486, 627, 484, 207], [972, 627, 484, 207], [1458, 627, 484, 207], [0, 836, 484, 207], [486, 836, 484, 207], [972, 836, 484, 207]],animations: {run: [0, 19, "run",1],},});sprite = new createjs.Sprite(spriteData);stage.addChild(bg)stage.addChild(sprite);sprite.gotoAndPlay("run");bg.x = 0;bg.y = 0;sprite.x = -10;sprite.y = 380;createjs.Ticker.framerate =24;createjs.Ticker.addEventListener("tick", tick);}function tick(event) {// if (sprite.currentAnimation != "run") {//   sprite.gotoAndPlay("run");//  }sprite.x = sprite.x + 30;if (sprite.x > 1024)sprite.x = 0//bg.cache(0, 0, bg.image.width, bg.image.height);console.log("x",sprite.x)stage.update(event);}</script>
</body></html>

参考代码4：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="createjs.min.js"></script><title>奔跑的豹子</title>
</head><body onload="init()"><canvas id="gameCanvas" width="1024" height="768"></canvas><script> var sprite, stage, bg, rectfunction init() {stage = new createjs.Stage("gameCanvas");bg = new createjs.Bitmap("bg.jpg")rect = new createjs.Rectangle(0, 0, 1024, 768)bg.sourceRect = rect;var spriteData = new createjs.SpriteSheet({images: ["leopard.png"],frames: [[0, 0, 484, 207], [486, 0, 484, 207], [972, 0, 484, 207], [1458, 0, 484, 207], [0, 209, 484, 207], [486, 209, 484, 207], [972, 209, 484, 207], [1458, 209, 484, 207], [0, 418, 484, 207], [486, 418, 484, 207], [972, 418, 484, 207], [1458, 418, 484, 207], [0, 627, 484, 207], [486, 627, 484, 207], [972, 627, 484, 207], [1458, 627, 484, 207], [0, 836, 484, 207], [486, 836, 484, 207], [972, 836, 484, 207]],animations: {run: [0, 19, "run",1],},});sprite = new createjs.Sprite(spriteData);stage.addChild(bg)stage.addChild(sprite);sprite.gotoAndPlay("run");bg.x =0;bg.y = 0;sprite.x = -10;sprite.y = 380;createjs.Ticker.framerate =24;createjs.Ticker.addEventListener("tick", tick);}function tick(event) {// if (sprite.currentAnimation != "run") {//   sprite.gotoAndPlay("run");//  }sprite.x = sprite.x + 30;bg.x = bg.x - 10;if (sprite.x > 1024)sprite.x = 0if (bg.x <-1024)bg.x = 1024//bg.cache(0, 0, bg.image.width, bg.image.height);//console.log("x",sprite.x)stage.update(event);}</script>
</body></html>

相关文章：

[H5动画制作系列] 奔跑的豹子的四种Demo演化

资源: bg.jpg: leopard.png: 背景透明 peopard2.png 背景不透明 参考代码1: leopard.js: (function(window) {ma function() {this.initialize();}ma._SpriteSheet new createjs.SpriteSheet({images: ["leopard.png"], frames: [[0,0,484,207],[486,0,484,207]…...

编程日记 2023/9/14 4:57:24

如何实现让一个函数能返回多个值的效果

在C语言中&#xff0c;一个函数通常只能返回一个值。但是可以通过指针参数或结构体来模拟返回多个值的效果。 使用指针参数&#xff1a;你可以将需要返回的值作为函数的参数&#xff0c;通过指针的形式传入&#xff0c;让函数将结果写入指针所指向的内存位置。 void multiple…...

编程日记 2023/9/14 4:54:20

End-to-end 3D Human Pose Estimation with Transformer

基于Transformer的端到端三维人体姿态估计 摘要 基于Transformer的架构已经成为自然语言处理中的常见选择&#xff0c;并且现在正在计算机视觉任务中实现SOTA性能&#xff0c;例如图像分类&#xff0c;对象检测。然而&#xff0c;卷积方法在3D人体姿态估计的许多方法中仍然保…...

编程日记 2023/9/14 4:53:19

状态管理Pinia

Vue3 状态管理 - Pinia 1. 什么是Pinia Pinia 是 Vue 的专属的最新状态管理库 &#xff0c;是 Vuex 状态管理工具的替代品 2. 手动添加Pinia到Vue项目 后面在实际开发项目的时候&#xff0c;Pinia可以在项目创建时自动添加&#xff0c;现在我们初次学习&#xff0c;从零开始…...

编程日记 2023/9/14 4:52:17

maven运行报错解决

在IDEA上运行较大项目时&#xff0c;编译量很大&#xff0c;可能会报出 Error:java: java.lang.OutOfMemoryError: Java heap space 的错误&#xff0c;解决方法如下&#xff1a; java.lang.OutOfMemoryError是内存不足导致的&#xff0c;因此需要修改Idea运行项目的内存大小。…...

编程日记 2023/9/14 4:50:15

在线会计软件推荐：高效实用的选择解析

如果您始终在密切关注Zoho&#xff0c;您一定知道&#xff0c;我们的软件在一个接一个的增加&#xff0c;为的是构建出一套可以全面在线协作、提升业务生产力的应用系统&#xff0c;我们始终致力于为各类企业构建完整的业务应用&#xff0c;以便他们在Zoho上运行整个业务系统。…...

编程日记 2023/9/14 4:49:14

vue监听Enter键

目录 keydown.enter 方法1: 使用keydown.enter指令 方法2: 在keydown事件处理函数中检查按下的键 keyup.enter.native keydown.enter与keyup.enter.native区别 1. 触发时机&#xff1a; 2. 事件类型&#xff1a; 3. 事件冒泡&#xff1a; keydown.enter 在Vue中监听En…...

编程日记 2023/9/14 4:48:13

ADS中带通滤波器模型参数含义学习笔记

ADS中带通滤波器模型参数含义 1、 Fcenter 中心频率 2、 BWpass 通带带宽 3、 Apass 衰减量时的通带带宽 这两个是对应的&#xff0c;比如说是80MHz&#xff0c;3dB&#xff0c;那么就是3dB时的带宽为80MHz&#xff0c;如果改为0.1dB&#xff0c;那么带宽就是0.1dB时的带宽为80…...

编程日记 2023/9/14 4:47:12

【Blender】Blender入门学习

目录 0 参考视频教程0.1 Blender理论知识0.2 Blender上手实践0.3 FBX模型导入Unity 1 Blender的窗口介绍1.1 主界面1.2 模型编辑窗口 2 Blender的基本操作2.1 3D视图的平移2.2 3D视图的旋转2.3 3D视图的缩放2.4 修改快捷键2.5 使物体围绕选择的物体旋转2.6 四视图的查看2.7 局部…...

编程日记 2023/9/14 4:44:10

Redis 三种特殊的数据类型 - Geospatial地理位置 - Hyperloglog基数统计的算法 - Bitmaps位图（位存储）

目录 Redis 三种特殊的数据类型&#xff1a; Geospatial&#xff1a;地理位置 Geospatial类型常用的命令&#xff1a; GEOADD&#xff1a;添加地理位置 GEOPOS&#xff1a;获取地理位置 GEODIST&#xff1a;返回两个给定位置之间的距离 GEORADIUS&#xff1a;以给定的经纬…...

编程日记 2023/9/14 4:42:06

Python web 框架web.py「简约美」

web.py is a web framework for Python that is as simple as it is powerful. web.py is in the public domain, you can use it for whatever purpose with absolutely no restrictions. web.py 是一个简单而强大的 Python Web 框架。web.py 属于公共领域&#xff0c;您可以…...

编程日记 2023/9/14 4:41:05

Bootstrap 重新数据查询时页码为当前页问题

记录一下使用前端组件Bootstrap遇到的一个小问题&#xff1a; 问题描述 第一次查询数据为5页&#xff0c;翻页到第5页后&#xff0c;选中条件再次查询数据时&#xff0c;传到后端页码仍旧为5&#xff0c;而此时数据量小于5页&#xff0c;这时候页码没有重置成第一页&#xff…...

编程日记 2023/9/14 4:38:02

scratch舞蹈比赛 2023年5月中国电子学会图形化编程 少儿编程 scratch编程等级考试四级真题和答案解析

目录 scratch舞蹈比赛 一、题目要求 1、准备工作 2、功能实现 二、案例分析...

编程日记 2023/9/14 4:37:00

windows下安装redis扩展库

1.根据PHP版本号&#xff0c;编译器版本号和CPU架构 选择php_redis和php_igbinary文件(如果是选择线程的情况下需要再去配置php5ts.dll) windows.php.net - /downloads/pecl/releases/redis/ windows.php.net - /downloads/pecl/releases/igbinary/ php_igbinary-3.1.2-7.2-…...

编程日记 2023/9/14 4:35:59

大数据平台数据安全具体措施有哪些？有推荐的吗？

大数据平台是企业处理和分析数据的重要工具之一&#xff0c;也是企业数据存储的重要载体&#xff0c;因此保障大数据平台安全至关重要。那你知道大数据平台数据安全具体措施有哪些&#xff1f;有推荐的吗&#xff1f; 大数据平台数据安全具体措施有哪些&#xff1f; 1、数据…...

编程日记 2023/9/14 4:33:57

基于SSM的健康综合咨询问诊平台设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

编程日记 2023/9/14 4:32:56

每日一题 2596. 检查骑士巡视方案

难度&#xff1a;中等 很简单&#xff0c;从第 0 步开始模拟即可&#xff0c;唯一sb的就是测试用例中如果&#xff08;0&#xff0c;0&#xff09;处不为0的话就直接false&#xff0c;而不是去找0在哪 我的代码&#xff1a; class Solution:def checkValidGrid(self, grid: L…...

编程日记 2023/9/14 4:26:50

第二章 进程与线程 三、进程控制

目录 一、定义 二、实现方式&#xff08;用原语实现&#xff09; 注意&#xff1a; 1、原语是什么 2、如何实现原语的原子性 3、关中断指令和开中断指令是什么 三、进程控制的相关原语 1、进程的创建 ​编辑 2、进程的终止 3、进程的阻塞与唤醒&#xff08;阻塞和唤醒…...

编程日记 2023/9/14 4:25:49

【云原生进阶之PaaS中间件】第二章Zookeeper-3.2架构详解

1 Zookeeper工作原理 1.1 Zookeeper的角色 领导者&#xff08;leader&#xff09;&#xff0c;负责进行投票的发起和决议&#xff0c;更新系统状态 学习者&#xff08;learner&#xff09;&#xff0c;包括跟随者&#xff08;follower&#xff09;和观察者&#xff08;obser…...

编程日记 2023/9/14 4:24:48

K8S：kubectl陈述式、声明式资源管理及金丝雀部署

文章目录 一.陈述式资源管理方法1.陈述式资源管理概念2.基本信息查看&#xff08;1&#xff09;查看版本信息&#xff08;2&#xff09;查看资源对象简写&#xff08;3&#xff09;查看集群信息&#xff08;4&#xff09;配置kubectl自动补全&#xff08;5&#xff09;node节点…...

编程日记 2023/9/14 4:20:42

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/5 2:52:01

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2026/1/7 17:46:12

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2026/1/1 12:14:01

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/3 4:30:49

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/1/8 9:44:15

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2026/1/9 0:46:51

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

编程新知 2025/12/31 19:27:41

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

编程新知 2026/1/8 1:28:36

Python常用模块：time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的： 快速搭建小型Web服务器以提供数据。 工具： 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask： 建议： 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装，避免频繁切换。 PyCharm Terminal 配置建议： 打开 Py…...

编程新知 2025/10/15 8:34:59

高分辨率图像合成归一化流扩展

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 摘要 我们提出了STARFlow&#xff0c;一种基于归一化流的可扩展生成模型&#xff0c;它在高分辨率图像合成方面取得了强大的性能。STARFlow的主要构建块是Transformer自回归流&#xff08;TARFlow&am…...

编程新知 2026/1/7 15:07:59