章节
问答
课签
笔记
评论
占位
占位

人物进出商店的坐标计算

小男孩与商店在布局上是没有关系的,只是都是相对的靠近中间位置动作,那么随着分辨率的变化,二者之间的位置都有不同的变化,这里都是采用JS动态计算的。

创建一个Qixi.js,把BoyWalk.js等一些逻辑代码全都放到这个里面,这个就是主文件代码了,之后会把所有的代码都会合并方到这个文件里面

小男孩进出商店的走路还是属于小男孩自身的一个动作,所以代码最终要封装到BoyWalk中。在Qixi.js中找到BoyWalk代码部分,在进出商店部分增加了toShop与outShop两个接口,具体的实现部分没有采用变化left与top,而用了translateX,主要是学习为目的,采用互通是实现搭配

小男孩走进门的中间位置,具体的算法比较简单:

translateX = 门中间的left值 - 小男孩中间的left值
translateY = 人物底部的top值 - 门中间的top值

这里的取值采用jQuery的offset处理的,注意下position与offset的取值不同点,.offset()是相对于文档(document)的当前位置,.position()是相对于父级元素的位移,一个元素可以嵌套多个position所以这里要特别注意下。

在实际的的进门路线的处理中,代码是采用translateX + scale的组合,并没有采用translateY,原因就是scale是一个缩放效果,在实际上会有替代translateY这个Y轴变化的感觉,具体我们可以参考代码部分的处理

具体,我们参考代码部分walkToShop与walkOutShop两个实现方法

//开始走路
var walkPlay = stratRun({
    transform: 'translateX,scale',//代码略
    opacity: 0.1
}, 2000);
//走路完毕
walkPlay.done(function() {
    $boy.css({
        opacity: 0
    })
    defer.resolve();
})

在走路完毕后,监听了一个done的成功方法,用来设置人物的隐藏,这个是Deferred的一个接口,与then效果一致

备注:

特别注意下,很多时候大家都是通过left与top修改元素的页面坐标,那么left与top确实也是页面元素的一个准确的坐标值。这样的情况直到css3的transform的出现,因为会有一个translate同样能改变页面的坐标

所以如果运用了translate的元素,最终的坐标需要加上这个属性的值

元素的页面X坐标 = left + translateX
元素的页面Y坐标 = top + translateY

所以在这个案例上,小孩男运用了left与translateX,所以实现的X坐标值 = left + translateX 之和了。

任务

打开Qixi.js文件,在代码的162行填入相应代码,可以观察到人物走路商店的动作

var defer = $.Deferred();
restoreWalk();
//开始走路
var walkPlay = stratRun({
    transform: 'translateX(' + instanceX + 'px),scale(1,1)',
   opacity: 1
}, runTime);
//走路完毕
walkPlay.done(function() {
    defer.resolve();
});
return defer;          
?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?