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

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

news 2025/9/4 16:42:11

资源:

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

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目章节操作，重…...

编程新知 2025/9/3 9:09:35

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/9/3 9:09:34

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/7/7 6:59:35

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/9/1 14:23:43

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。核心特性与用法基本属性 v-model：绑定右侧列表的值&…...

编程新知 2025/8/22 3:28:41

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制半数机制（过半机制&#xff0…...

编程新知 2025/8/24 3:44:59

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI（https://spring.io/projects/spring-ai）作为Spring生态中的AI集成框架，其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似，但特别为多语…...

编程新知 2025/6/17 4:17:05

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...

编程新知 2025/9/4 15:27:33

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请，不同级别的经理有不同的审批权限： // 抽象处理者：审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

云原生安全实战：API网关Kong的鉴权与限流详解

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】一、基础概念 1. API网关（API Gateway） API网关是微服务架构中的核心组件，负责统一管理所有API的流量入口。它像一座…...

编程新知 2025/9/4 15:28:38

相关文章：