HTML5前台视频教程:运动与游戏开发

  • 时间:2018-06-17 21:01 作者:千锋H5 来源:千锋H5 阅读:251
  • 扫一扫,手机访问
摘要:在我们进行web页面开发的过程中,如何与使用户进行友好、有趣的交互,是我们必需考虑的问题。 比方:导航条中滑动的动画特效、点击加入购物车按钮通过抛物线加入右侧购物车的动画特效,当然还有少量网页游戏的开发:微信打飞机、打砖块等。 那么我们要实现这些好玩又有趣的动画,就需要我们对动画的基础【运动】炉火纯
HTML5前台视频教程:运动与游戏开发

在我们进行web页面开发的过程中,如何与使用户进行友好、有趣的交互,是我们必需考虑的问题。

比方:导航条中滑动的动画特效、点击加入购物车按钮通过抛物线加入右侧购物车的动画特效,当然还有少量网页游戏的开发:微信打飞机、打砖块等。 那么我们要实现这些好玩又有趣的动画,就需要我们对动画的基础【运动】炉火纯青,那么这个部分的学习,我们会对运动开展学习,并且通过大量的实例来帮助大家完成这个阶段的学习。

HTML5前台视频教程:运动与游戏开发

Js运动,本质来说,就是让web 上DOM 元素动起来。而想要DOM 动起来,改变其自身的位置属性,比方高宽,左边距,上边距,透明度等。动画的原理就是把不同状态的物体,串成连续的样子,就像一本书,画了几个小人,而后一翻书,就看见小人在动。js动画也一样。不同状态的DOM,使用定时器控制,就可以得到动画效果。

那么我们首先来看一下如何实现运动

方法:

1.运动的物体用绝对定位

2.通过改变定位物体的属性(left、right、top、bottom)值来使物体移动。例如向右或者左移动能用offsetLeft(offsetRight)来控制左右移动。

步骤:

1、开始运动前,先清理已有定时器 (由于:是连续点击按钮,物体会运动越来越快,造成运动混乱)

2、开启定时器,计算速度

3、把运动和中止隔开(if/else),判断中止条件,执行运动

HTML5前台视频教程:运动与游戏开发

在javascritp中,有两个关于定时器的专使用函数,它们是:

1.倒计定时器:timer=setTimeout(函数名,time);

2.循环定时器:timer=setInterval(函数名,time);

function()是定时器触发时要执行的是事件的函数,能是一个函数,也能是几个函数,或者者javascript的语句也能,但要使用;隔开;delaytime则是间隔的时间,以毫秒为单位。

倒计时定时器就是在指定时间后触发事件,而循环定时器就是在间隔时间到来时反复触发事件,其区别在于:前者只是作使用一次,然后者则不停地作使用。

倒计时定时器一般使用于页面上只要要触发一次的的情况,比方点击某按钮后页面在肯定时间后跳转到相应的站点,也能使用于判断一个浏览者是不是你的站点上的“老客”,假如不是,你即可以在5秒或者者10秒后跳转到相应的站点,而后告诉他以后再来能在某个地方按某一个按钮即可以快速进入。

循环定时器一般使用于站点上需要从复执行的效果,比方一个javascript的滚动条或者者状态栏,也能使用于将页面的背景使用飞雪的图片来表示。这些事件需要隔一段时间运行一次。

有时候我们也想去掉少量加上的定时器,此时能使用clearTimeout(timename) 来关闭倒计时定时器,而使用clearInterval(timename)来关闭循环定时器。

HTML5前台视频教程:运动与游戏开发

1.运动:匀速运动(让物体动起来)

对定时器的用

给DIV加绝对定位

offsetLeft

?问题:到达某个特定位罝中止

处理:做判断,符合条件时关掉定时器(存定时器timer)

速度变慢(一般不动时间,而是改数字-速度)

使用变量存速度

?问题:取7时,offsetLeft没有等于300的时候,div停不下来

处理:>=300 //停在301

?问题:到300后点击按钮还继续走

起因:点击按钮,执行函数,开定时器(执行当前函数一至少执行一次)

处理:加else (没有到达目标之前才执行)

?问题:连续点击,速度变快

起因:每点击一次就开一个定时器,点击几次就有几个定时器同时工作

处理:保证每次只有一个定时器工作,先cearlnterval ()

示例1(分享菜单/鼠标移入划出,鼠标移出划入)▼

HTML5前台视频教程:运动与游戏开发

示例2(淡入淡出效果/鼠标移入淡出,鼠标移出淡入)▼

HTML5前台视频教程:运动与游戏开发

示例3 匀速运动的中止条件(距离足够近)示例代码▼

HTML5前台视频教程:运动与游戏开发

2、变速运动

逐步变慢,最后中止

距离越远速度越大

速度有距离决定

速度=(目标值-当前值)/缩放系数

假如没有【缩放系数】速度太大,瞬间到达终点.没有过程

?问题:并没有真正到达300

起因:速度只剩0.9 像素是屏幕可以够显示的最小单位,并不会四舍五入掉

Math.ceil ()向上取整

Math.floor ()向下取整

?问题:向左走,又差一块--Math.floor ()

判断:三目speed=speed>0 ? Math.ceil ( speed ): Math.floor ( speed )

示例代码▼

HTML5前台视频教程:运动与游戏开发

3、多物体运动

多个div ,鼠标移入变宽

运动框架传参obj,知道让哪个物体动起来

使用到缓冲肯定要取整

?问题:div没运动回去 //清理前一个定时器

起因:只有一个定时器

处理:加物体上的定时器,使每个物体都有一个定时器。定时器作为物体属性

多个div淡入淡出

首先关闭物体上的定时器

经验:多物体运动框架所有东西都不可以共使用

?问题:不是由于定时器,而是由于alpha

处理:作为属性附加到物体上/不以变量形式存在

?问题:offset 的bug 加border变宽

起因:offsetWith并不是真正的width ,它获取的是盒模型尺寸

处理:躲着宽度扔到行间,parselnt ( oDiv.style.width )

进一步处理:getStyle ( obj, name ) currentStyle , getComputedStyle

加border ,只需offset就有问题 去掉offset

示例:多物体运动框架▼

HTML5前台视频教程:运动与游戏开发

4.任意值运动

任意值运动的单位分为透明度和px。px单位的任意值▼

HTML5前台视频教程:运动与游戏开发

5.链式运动

多出来的一个参数,只有传进去的时候才调使用

鼠标移入变宽,结束之后弹出abc

先横向开展.再以向开展

鼠标移出,先变回不透明,变矮,变窄

HTML5前台视频教程:运动与游戏开发

基于以上的分析与总结,封装运动框架startMove.js如下:

HTML5前台视频教程:运动与游戏开发

HTML5前台视频教程:运动与游戏开发

1,完成如下效果:

HTML5前台视频教程:运动与游戏开发

2,完成如下效果:

HTML5前台视频教程:运动与游戏开发

HTML5前台视频教程:运动与游戏开发

HTML5前台视频教程:运动与游戏开发

微信打飞机效果图

HTML5前台视频教程:运动与游戏开发

HTML5前台视频教程:运动与游戏开发

HTML5前台视频教程:运动与游戏开发

打砖块效果图

HTML5前台视频教程:运动与游戏开发

来源:千锋HTML5

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)
【系统环境|软件环境】更新版ThreeJS 3D粒子波浪动画(2019-12-04 14:26)
【系统环境|软件环境】前台开发WebStorm常用快捷键,火速收藏!(2019-12-04 14:25)
【系统环境|软件环境】微博H5登录和发微博组件(2019-12-04 14:25)
【系统环境|软件环境】5分钟谈前台面试,小伙伴都惊呆了(2019-12-04 14:23)
手机二维码手机访问领取大礼包
返回顶部