JS编写人物行走动画

首先找一张人物行走的分解图，然后，将这张图作为背景，通过background-position来定位某一个分解动作。这个操作通过CSS定义就可实现，代码如下：

.ai_girl{
position:absolute;
top:50px;
left:10px;
width:64;
height:64;
background-image:url(image/girl.gif);
background-repeat:none;
background-position:128 64; //选择面向观众的那一张分解图为初始
display:block;
}

接下来就是实现人物行走的动画。动画分两步完成：第一步是重复行走的动作（比如向右行走），第二步则是让图片根据选择的走向移动。代码如下：

<script>
var iLeft=0;
var int=null;function go()
{
var obj=document.getElementById("ai");
obj.style.backgroundPosition=iLeft+" 192"; //选则向右行走的那一行图片//以下代码为向右行走的动作重复演示
if(iLeft>256){
iLeft=0;
}
iLeft+=64;//以下代码为向右移动图片
obj.style.left=obj.offsetLeft+10+"px";
if (obj.offsetLeft>512){  //当图片移动了超过512px时停止动画
clearInterval(int);
obj.style.backgroundPosition="128 64"; //动画停止时人物面向观众
}
}function walk(){
int=setInterval(go,300); //定义动画间隔时间
}
</script>

在html页面添加个button，点击后人物开始行走。代码如下：

<button onclick="walk()">Walk</button>
<div id="ai" class="ai_girl">

好了，人物行走动画实现了。如果想要改变行走方向，参考上述方式，只要调整backgroundPosition取值和obj.style.left/obj.style.top的值就行了。

最后附上人物图片。

JS编写人物行走动画相关推荐

英雄之舞—凌波微步(利用async.js编写异步动画)
凌波微步有云: 此步法精妙异常,习者可以用来躲避众多敌人的进攻,此外「凌波微步」每踏出一步,都与内力息息相关,决非单是迈步行走而已,若无内功根基之人,将「凌波微步」强行走将起来,会造成自绝经脉的危境. ...
Unity3D 游戏引擎之FBX模型的载入与人物行走动画的播放（十二）
Unity3D 游戏引擎之FBX模型的载入与人物行走动画的播放雨松MOMO原创文章如转载,请注明:转载至我的独立域名博客雨松MOMO程序研究院,原文地址:http://www.xuanyusong. ...
使用Pixi.js编写JavaScript网页小游戏
Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine ...
python 动画场景_vue页面引入three.js实现3d动画场景操作
vue中安装Three.js 近来无聊顺便研究一些关于3D图形化库.three.js是JavaScript编写的WebGL第三方库.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过 ...
开源三级联动，Vue.js编写省份、城市、区、县三级联动源码
开源三级联动,Vue.js编写省份.城市.区.县三级联动源码 1.三级联动框样式上图: 请访问:这里!! 查看三级联动器效果. 2.如何在html里面引用文件的目录路径为: data.js是存放我 ...
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
php人物行走,非常震撼的纯CSS3人物行走动画
今天分享给大家的是一个用纯CSS3实现的人物行走动画,在没有使用JavaScript的情况下,用CSS3技术将人物行走的姿态描绘得非常逼真.其实动画实现的原理也是比较简单的,将人物行走时的状态分割成多 ...
node.js编写网页_为Node.js编写可扩展架构
node.js编写网页 by Zafar Saleem 通过Zafar Saleem 为Node.js编写可扩展架构 (Writing Scalable Architecture For Nodejs ...
js 和 css动画
js和css动画使用setTimeout()或者setInterval()使用这两个函数定时调用一段代码.这是其原理. 目的,重复修改内联样式,达到动画的效果通过在相同的时间内构造出一帧帧的内容, ...
GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...

JS编写人物行走动画

JS编写人物行走动画相关推荐

最新文章

热门文章