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

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

news 2025/11/9 7:40:53

资源:

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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...

编程新知 2025/11/9 2:17:02

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

FFmpeg 低延迟同屏方案

引言在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...

编程新知 2025/11/8 4:08:36

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。问题一：历史轨迹与小球残影残留现象小球运动后，历史位置的 “残影”…...

编程新知 2025/11/8 5:25:23

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02

Ubuntu Cursor升级成v1.0

0. 当前版本低使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...

编程新知 2025/11/7 19:15:51

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存：一级缓存、二级缓存默认情况下，只有一级缓存开启（sqlSession级别的缓存）二级缓存需要手动开启配置，需要局域namespace级别的缓存一级缓存（本地缓存&#…...

编程新知 2025/11/7 20:08:49

Python 训练营打卡 Day 47

注意力热力图可视化在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/10/26 9:51:09

篇章二论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

编程新知 2025/11/7 18:12:31

相关文章：