Sprite Animation

最新推荐文章于 2022-07-06 10:47:22 发布
最新推荐文章于 2022-07-06 10:47:22 发布
阅读量834 收藏
点赞数
分类专栏： HTML5 文章标签： p2p wpf linq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shuishou1000/article/details/122239315
版权

用到的动画sprite sheet两张图，免积分下载，pig动画sprite动画图片两张-教育文档类资源-优快云下载

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="lib/easeljs-0.7.1.min.js" charset="utf-8"></script>
    <script src="lib/tweenjs-0.5.1.min.js" charset="utf-8"></script>
    <script src="lib/movieclip-0.7.1.min.js" charset="utf-8"></script>
  </head>
  <body onload="init()">
    <canvas id="canvas" width="1000" height="800" style="border:black solid 1px;background-color:#add8e6"></canvas>
  </body>
  <script type="text/javascript">
  var stage
  function init(){
    stage=new createjs.Stage("canvas")

    createjs.Ticker.addEventListener("tick",runGame)
    createjs.Ticker.setFPS(60)
    addPig()
  }
  function addPig(){
    var ss=new createjs.SpriteSheet(data)
    pig=new createjs.Sprite(ss,'all')
    stage.addChild(pig)
}
function runGame(e){
  pig.y+=1
  pig.x+=1
  stage.update()
  if (pig.y>stage.canvas.height) {
    pig.x=pig.y=0
  }
}
var data={
  "images":["pig_0.png","pig_1.png"],
  "frames":[
    [2, 2, 252, 252, 0, -61, -127],
            [258, 2, 252, 252, 0, -61, -127],
            [514, 2, 252, 252, 0, -61, -127],
            [770, 2, 252, 252, 0, -61, -127],
            [1026, 2, 252, 252, 0, -61, -127],
            [1282, 2, 252, 252, 0, -61, -127],
            [1538, 2, 252, 252, 0, -61, -127],
            [1794, 2, 252, 252, 0, -61, -127],
            [2, 258, 252, 252, 0, -61, -127],
            [258, 258, 252, 252, 0, -61, -127],
            [514, 258, 252, 252, 0, -61, -127],
            [770, 258, 252, 252, 0, -61, -127],
            [1026, 258, 252, 252, 0, -61, -127],
            [1282, 258, 252, 252, 0, -61, -127],
            [1538, 258, 252, 252, 0, -61, -127],
            [1794, 258, 252, 252, 0, -61, -127],
            [2, 514, 252, 252, 0, -61, -127],
            [258, 514, 252, 252, 0, -61, -127],
            [514, 514, 252, 252, 0, -61, -127],
            [770, 514, 252, 252, 0, -61, -127],
            [1026, 514, 252, 252, 0, -61, -127],
            [1282, 514, 252, 252, 0, -61, -127],
            [1538, 514, 252, 252, 0, -61, -127],
            [1794, 514, 252, 252, 0, -61, -127],
            [2, 770, 252, 252, 0, -61, -127],
            [258, 770, 252, 252, 0, -61, -127],
            [514, 770, 252, 252, 0, -61, -127],
            [770, 770, 252, 252, 0, -61, -127],
            [1026, 770, 252, 252, 0, -61, -127],
            [1282, 770, 252, 252, 0, -61, -127],
            [1538, 770, 252, 252, 0, -61, -127],
            [1794, 770, 252, 252, 0, -61, -127],
            [2, 1026, 252, 252, 0, -61, -127],
            [258, 1026, 252, 252, 0, -61, -127],
            [514, 1026, 252, 252, 0, -61, -127],
            [770, 1026, 252, 252, 0, -61, -127],
            [1026, 1026, 252, 252, 0, -61, -127],
            [1282, 1026, 252, 252, 0, -61, -127],
            [1538, 1026, 252, 252, 0, -61, -127],
            [1794, 1026, 252, 252, 0, -61, -127],
            [2, 1282, 252, 252, 0, -61, -127],
            [258, 1282, 252, 252, 0, -61, -127],
            [514, 1282, 252, 252, 0, -61, -127],
            [770, 1282, 252, 252, 0, -61, -127],
            [1026, 1282, 252, 252, 0, -61, -127],
            [1282, 1282, 252, 252, 0, -61, -127],
            [1538, 1282, 252, 252, 0, -61, -127],
            [1794, 1282, 252, 252, 0, -61, -127],
            [2, 1538, 252, 252, 0, -61, -127],
            [258, 1538, 252, 252, 0, -61, -127],
            [514, 1538, 252, 252, 0, -61, -127],
            [770, 1538, 252, 252, 0, -61, -127],
            [1026, 1538, 252, 252, 0, -61, -127],
            [1282, 1538, 252, 252, 0, -61, -127],
            [1538, 1538, 252, 252, 0, -61, -127],
            [1794, 1538, 252, 252, 0, -61, -127],
            [2, 1794, 252, 252, 0, -61, -127],
            [258, 1794, 252, 252, 0, -61, -127],
            [514, 1794, 252, 252, 0, -61, -127],
            [770, 1794, 252, 252, 0, -61, -127],
            [1026, 1794, 252, 252, 0, -61, -127],
            [1282, 1794, 252, 252, 0, -61, -127],
            [1538, 1794, 252, 252, 0, -61, -127],
            [1794, 1794, 252, 252, 0, -61, -127],
            [2, 2, 252, 252, 1, -61, -127],
            [258, 2, 252, 252, 1, -61, -127],
            [514, 2, 252, 252, 1, -61, -127],
            [770, 2, 252, 252, 1, -61, -127],
            [1026, 2, 252, 252, 1, -61, -127],
            [1282, 2, 252, 252, 1, -61, -127],
            [1538, 2, 252, 252, 1, -61, -127],
            [1794, 2, 252, 252, 1, -61, -127],
            [2, 258, 252, 252, 1, -61, -127],
            [258, 258, 252, 252, 1, -61, -127],
            [514, 258, 252, 252, 1, -61, -127],
            [770, 258, 252, 252, 1, -61, -127],
            [1026, 258, 252, 252, 1, -61, -127],
            [1282, 258, 252, 252, 1, -61, -127],
            [1538, 258, 252, 252, 1, -61, -127],
            [1794, 258, 252, 252, 1, -61, -127],
            [2, 514, 252, 252, 1, -61, -127],
            [258, 514, 252, 252, 1, -61, -127],
            [514, 514, 252, 252, 1, -61, -127],
            [770, 514, 252, 252, 1, -61, -127],
            [1026, 514, 252, 252, 1, -61, -127],
            [1282, 514, 252, 252, 1, -61, -127],
            [1538, 514, 252, 252, 1, -61, -127],
            [1794, 514, 252, 252, 1, -61, -127],
            [2, 770, 252, 252, 1, -61, -127],
            [258, 770, 252, 252, 1, -61, -127],
            [514, 770, 252, 252, 1, -61, -127],
            [770, 770, 252, 252, 1, -61, -127],
            [1026, 770, 252, 252, 1, -61, -127],
            [1282, 770, 252, 252, 1, -61, -127],
            [1538, 770, 252, 252, 1, -61, -127],
            [1794, 770, 252, 252, 1, -61, -127],
            [2, 1026, 252, 252, 1, -61, -127],
            [258, 1026, 252, 252, 1, -61, -127],
            [514, 1026, 252, 252, 1, -61, -127],
            [770, 1026, 252, 252, 1, -61, -127],
            [1026, 1026, 252, 252, 1, -61, -127],
            [1282, 1026, 252, 252, 1, -61, -127],
            [1538, 1026, 252, 252, 1, -61, -127],
            [1794, 1026, 252, 252, 1, -61, -127],
            [2, 1282, 252, 252, 1, -61, -127],
            [258, 1282, 252, 252, 1, -61, -127],
            [514, 1282, 252, 252, 1, -61, -127],
            [770, 1282, 252, 252, 1, -61, -127],
            [1026, 1282, 252, 252, 1, -61, -127],
            [1282, 1282, 252, 252, 1, -61, -127],
            [1538, 1282, 252, 252, 1, -61, -127],
            [1794, 1282, 252, 252, 1, -61, -127],
            [2, 1538, 252, 252, 1, -61, -127],
            [258, 1538, 252, 252, 1, -61, -127],
            [514, 1538, 252, 252, 1, -61, -127],
            [770, 1538, 252, 252, 1, -61, -127],
            [1026, 1538, 252, 252, 1, -61, -127],
            [1282, 1538, 252, 252, 1, -61, -127],
            [1538, 1538, 252, 252, 1, -61, -127],
            [1794, 1538, 252, 252, 1, -61, -127],
            [2, 1794, 252, 252, 1, -61, -127],
            [258, 1794, 252, 252, 1, -61, -127],
            [514, 1794, 252, 252, 1, -61, -127],
            [770, 1794, 252, 252, 1, -61, -127],
            [1026, 1794, 252, 252, 1, -61, -127],
            [1282, 1794, 252, 252, 1, -61, -127],
            [1538, 1794, 252, 252, 1, -61, -127]
  ],
  "animations":{
    "all":{
      "frames":[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126],
      "speed":.4
    }
  }
}

  </script>
</html>

Pygame 基础教程12: 使用 精灵(Sprite) 实现 帧动画(Animation)
谢TS的博客
06-26 1954
精灵(Sprite) 表示游戏画面中基本的显示元素，前面所介绍的精灵虽然位置可以动态移动，但都是一张静态图片。游戏中还有许多动态的动画精灵，如一只飞翔的小鸟，即使位置不变，小鸟的翅膀也会煽动。动画是通过一帧一帧图片的轮流显示实现的，也称为帧动画。Pygame 并没有直接支持动画的模块，可以使用 精灵(Sprite) 实现一个 动画精灵(Animation)。
SpriteAnimationView.zip
09-23
SpriteAnimationView.zip,一个用于播放精灵图（Sprite Sheet）动画的组件，支持多种灵活的属性配置
Unity 游戏入门 九、 精灵动画 Sprite Animation
Leove的专栏
11-17 3405
Animator 2.Creating a New Controller 3.Animations 4.Changing a Sprite 5.Creating an Animation 6.Building the Controller 7.Using a Blend Tree 8.Parameters Move X and Move Y 9.Sending parameters to the Animator Controller 10.Setting Animation for th
Sprite Animations精灵动画
TemetNosce的博客
04-09 992
qml sprite animations
2.Unity2D 横版 帧动画sprite animation+动画状态机animator+丝滑连击动作
雾狼的游戏屋
07-06 4364
Unity2D 横版 帧动画sprite animation+动画状态机animator+丝滑连击动作 为什么设置了attack之后还要设置normalizedTime参数？因为如果设置一个参数的话，你点击攻击按钮会直接跳转到下一个动作。并不能完整的将攻击动作放完，那么就多添加一个。他们参数用来判断行为达到哪个阶段，并通过脚本来控制他们参数在进入因为和退出行为时都设置normalizedTime成零。这样就可以使得你点击攻击按钮动作放完了之后才到下一个动作。...............
android 一组图片动画,SpriteAnimationView：一个用于播放精灵图动画的组件
weixin_33543395的博客
05-25 485
SpriteAnimationView一个用于播放精灵图(Sprite Sheet)动画的组件用法:android:id="@+id/animation_view"android:layout_width="match_parent"android:layout_height="80dp"app:sprite_sheet="@drawable/antelope" // Sprite sheet的资...
Unity—NGUI—鼠标悬停播放 Sprite Animation
chauvae的专栏
03-28 3782
NGUI插件中的源码非常强大，只要你看过并且理解了它的源码，你就可以做出你想要的UI界面和效果，这篇文章就是我根据NGUI中UIButton组件改编的，当然喜欢的朋友可以用它来改成键盘控制播放动画（2D 的角色动画），希望能对新学NGUI的朋友有所帮助。 先用NGUI 添加一个sprite，然后把下面的代码拖拽到 sprite 身上就可以看到结果了。      Framerate 是帧速率，可
pig动画sprite 动画图片两张
12-30
精灵图（Sprite）是一种优化Web页面加载速度的技巧，它将多个小图像合并到一张大图中，减少了浏览器对服务器的请求次数。在动画场景中，特别是2D游戏或动态效果中，精灵图被广泛应用。通过改变精灵图的位置或透明度...
Transparent sprite animation over background. A collision de
02-23
Transparent sprite animation over background. A collision detection (COLLIDE.BAS) module/engine which will make collision detection more easier.
GameSprite2004.rar_Animation_Game Sprite_GameSprite2004_game spr
07-15
"GameSprite2004.rar_Animation_Game Sprite_GameSprite2004_game spr"这个压缩包集合了游戏开发中的关键元素，包括动画资源和精灵设计工具，为开发者提供了一站式的解决方案。 首先，让我们关注“Game Sprite 2004...
Unity3D 2D动画插件EasyMotion2D (之十)SpriteAnimation
Unity
04-23 1970
What is SpriteAnimation SpriteAnimation is a component inherited from MonoBehaviour. It can play SpriteAnimationClip in scene. How to use Select the menu item EasyMotion2D > GameObjec
Unity 2D 学习手札（六）Sprite 动画
业精于勤，荒于嬉
01-13 2697
简单的范例 如上图，在等待使用者作答时，播放左右晃头的等待动画，使用者作答时，判断答对或答错，分别播放不同的动画及音效。播放完毕，继续左右晃头。 图片制作 左右晃头要准备三个状态的图，分别为摆左、正中及摆右，但播放时要依正中 → 摆左 → 正中 → 摆右 → 正中 → 摆左→ 正中→…的顺序播放，感觉才自然。 可以三张图分别存檔，也可以合成一张。若是合成一张图，那么就得在 Unity 中分割。...
世嘉MD游戏开发【十】：精灵动画，Sprite Animation
12-03 2492
能在世嘉MD上显示自己做的精灵动画实在是一件令人兴奋的事啊，今天就来讲一下如何在MD上显示精灵动画。 先准备好一张精灵图片序列，有这么几点要求： 1.单个精灵的像素宽x高不能超过16384，(以tile为单位的话，就是16x16，以像素为单位就是128x128)，而且分辨率必须是8的整数倍，颜色数不能超过16色。 2.可以多个动画放在一张图上，要横着排列，一横排是一个动画，另一个动画就要...
利用 CSS animation 和 CSS sprite 制作动画
weixin_34257076的博客
03-25 238
CSS3 大大强化了制作动画的能力，但是如果要做出图案比较复杂的动画，选择 GIF 依然是一个不错的选择。今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动画的方法，可以做出类似于 GIF 动画的效果。 CSS3 Animation steps函数 首先看看，CSS3 animation的兼容性...
Sprites 图片动画（Animation）
43612538的博客
09-23 595
代码： <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>少女动画</title> </head> <style type="text/css"> *{ margin: 0; padding: 0;
各种方法创建Sprite和Animate
linuxheik的专栏
08-26 631
//图片创建法 参数一：图片资源路径 参数二：Rect选区 auto sprite = Sprite::create("Images/grossini_dance_atlas.png", Rect(x, y, 85, 121)); addChild(sprite); /*************华丽分割线*************/ //BatchNode类纹...
【NGUI学习之一】Sprite动画播放和Slider使用
热门推荐
【手游开发成长历程】－－杰克兔
10-24 2万+
一. Atlas(图集)的制作。     所谓的atlas就是制作的一张大图，是很多小图的集合，通过设置截取小图的尺寸得到的小图称为Sprite(精灵)。
CSS3 帧动画（Sprite，直译叫雪碧图）
司马懿的西山居
02-22 1万+
CSS雪碧CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。原理CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你
sprite-anim：打造高效多动画支持的Spritesheet引擎
- animation：与动画制作相关的知识点。 - spritesheet：涉及精灵动画技术。 - JavaScript：说明这个动画引擎是基于JavaScript实现的。 6. 压缩包子文件说明： - "sprite-anim-master"指的是在某个版本控制系统...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值