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

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

news 2025/12/10 13:17:14

资源:

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语言中，一个函数通常只能返回一个值。但是可以通过指针参数或结构体来模拟返回多个值的效果。使用指针参数：你可以将需要返回的值作为函数的参数，通过指针的形式传入，让函数将结果写入指针所指向的内存位置。 void multiple…...

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

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

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

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

状态管理Pinia

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

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

maven运行报错解决

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

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

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

如果您始终在密切关注Zoho，您一定知道，我们的软件在一个接一个的增加，为的是构建出一套可以全面在线协作、提升业务生产力的应用系统，我们始终致力于为各类企业构建完整的业务应用，以便他们在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. 触发时机： 2. 事件类型： 3. 事件冒泡： keydown.enter 在Vue中监听En…...

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

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

ADS中带通滤波器模型参数含义 1、 Fcenter 中心频率 2、 BWpass 通带带宽 3、 Apass 衰减量时的通带带宽这两个是对应的，比如说是80MHz，3dB，那么就是3dB时的带宽为80MHz，如果改为0.1dB，那么带宽就是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 三种特殊的数据类型： Geospatial：地理位置 Geospatial类型常用的命令： GEOADD：添加地理位置 GEOPOS：获取地理位置 GEODIST：返回两个给定位置之间的距离 GEORADIUS：以给定的经纬…...

编程日记 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 属于公共领域，您可以…...

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

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

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

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

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

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

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

windows下安装redis扩展库

1.根据PHP版本号，编译器版本号和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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/12/9 1:33:51

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/12/9 1:32:02

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/12/8 0:42:49

JavaScript基础-API 和 Web API

在学习JavaScript的过程中，理解API（应用程序接口）和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能，使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业，那宇树科技（Unitree）必须名列其榜。最近，宇树科技的一项新变动消息在业界引发了不少关注和讨论，即： 宇树向其合作伙伴发布了一封公司名称变更函称，因…...

编程新知 2025/11/30 2:41:30

Ubuntu系统复制（U盘-电脑硬盘）

所需环境电脑自带硬盘：1块 (1T) U盘1：Ubuntu系统引导盘（用于“U盘2”复制到“电脑自带硬盘”） U盘2：Ubuntu系统盘（1T，用于被复制） ！！！建议“电脑…...

编程新知 2025/12/5 15:23:00

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言在人工智能技术飞速发展的今天，深度学习与大模型技术已成为推动行业变革的核心驱动力，而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心，系统性地呈现了两部深度技术著作的精华：…...

编程新知 2025/12/8 17:52:04

云原生周刊：k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi（原名 k8s‑vGPU‑scheduler）是一款 CNCF Sandbox 级别的开源 K8s 中间件，通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度，为容器提供统一接口，实现细粒度资源配额…...

编程新知 2025/12/1 3:15:17

EEG-fNIRS联合成像在跨频率耦合研究中的创新应用

摘要神经影像技术对医学科学产生了深远的影响，推动了许多神经系统疾病研究的进展并改善了其诊断方法。在此背景下，基于神经血管耦合现象的多模态神经影像方法，通过融合各自优势来提供有关大脑皮层神经活动的互补信息。在这里，本研…...

编程新知 2025/12/8 5:16:01

相关文章：