spritejs

最新推荐文章于 2024-08-10 07:44:17 发布

聰籽

最新推荐文章于 2024-08-10 07:44:17 发布

阅读量216

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44446223/article/details/125390473

版权

这篇博客演示了如何使用SpriteJS库创建一个简单的场景，并在其中添加精灵对象进行动画展示。通过设置精灵的位置属性和动画帧，实现了从左到右来回移动的动画效果。这个例子适合前端开发者学习和理解SpriteJS的动画实现。

摘要由CSDN通过智能技术生成

const {Scene, Sprite} = spritejs
			
const scene = new Scene('#demo-quickStart', {viewport: [800, 200], resolution: [3080, 800]})
			
const layer = scene.layer()

const robot = new Sprite('https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png')

robot.attr({
 anchor: [0, 0.5],
 pos: [0, 0],
})

robot.animate([
 {pos: [0, 0]},
 {pos: [0, 100]},
 {pos: [2700, 300]},
 {pos: [2700, 0]},
], {
 duration: 5000,
 iterations: Infinity,
 direction: 'alternate',
})

layer.append(robot)