首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

如何使用SVG动画来制作游戏

一些动画库平台,例如Greensock,和原生的CSS动画简直是绝配。于是我便打算深入地研究一下,看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样,好的游戏拥有许多细致的动画细节。...这里是游戏的完整版: http://codepen.io/gregh/full/yVLOyO 目录 创作的过程 使用GreenSock来制作动画 背景动画 柱子动画 分数的动画 弹性盒子布局 让游戏界面可缩放...https://ihatetomatoes.net/get-greensock-101/ 背景动画 几乎所有你能在背景上看到的东西都是用SVG制作的。...Greensock允许我们这样做,你需要做的仅仅是为这些SVG的元素(比如说path,group等等)分配一些ID,然后用过ID选择到他们。但这样做的问题在于,在移动设备上,这些动画跑不动。...如果你想要看看你可以使用什么样的缓动方程,看下 Greensock 缓动观察器:http://greensock.com/ease-visualizer 选择 Elastic 并调整配置参数,你就可以实时地看运动效果

2K30

如何让你的动画更自然-运动曲线探究与应用

在接下来介绍的GreenSock库中,还有一些动画曲线可供使用: ? 有了这些曲线,我们下一步就是要使用它了,这儿将通过js和css来使用这些曲线。...如果不想重复造轮子的话,我搜集了2个动画曲线实现库jstween和GreenSock推荐给大家使用。...0,    ease: JT.Elastic.Out,    onEnd: function (n) {        console.log("animate end.")    }}); //通过GreenSock...此外GreenSock还提供了一个在线调节参数预览效果的页面。大家可以根据需要选用合适的库来实现效果。 ?...在使用场景上,如果不介意库体积、想有丰富的曲线函数供使用,可以用GreenSock来实现;对库体积有要求,可以用jstween来实现;觉得只想实现其中一个动画效果而觉得没必要引入整个库,可以只使用其动画函数和

2.4K30
领券