JavaScript进阶【五】利用JavaScript实现动画的基本思路
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div {
width: 100px;
height: 100px;
background-color: #00a8c6;
position: absolute;
} #block {
width: 80px;
height: 80px;
background-color: #0a001f;
position: absolute;
margin-left: 120px;
} #blockTwo {
width: 80px;
height: 80px;
background-color: #00FA9A;
position: absolute;
margin-left: 190px;
} #ball {
width: 100px;
height: 100px;
border-radius: 50px;
border: solid rgb(100, 100, 100) 1px;
position: absolute;
margin-top: 100px;
background-color: #1b1b1b;
} #car {
width: 80px;
height: 80px;
background-color: #4B0082;
position: absolute;
margin-left: 220px;
} #stone {
width: 50px;
height: 50px;
border-radius: 25px;
border: solid rgb(100, 100, 100) 1px;
position: absolute;
margin-top: 150px;
margin-left: 150px;
background-color: #8B0000;
} #SinMove {
width: 50px;
height: 50px;
border-radius: 25px;
border: solid rgb(100, 100, 100) 1px;
position: absolute;
margin-top: 800px;
margin-left: 220px;
background-color: #00FA9A;
} #CircleMove {
width: 50px;
height: 50px;
background-color: #4B0082;
margin-top: 500px;
margin-left: 500px;
} #moveAny {
width: 100px;
height: 100px;
border-radius: 50px;
border: solid rgb(100, 100, 100) 1px;
position: absolute;
margin-top: 800px;
margin-left: 220px;
background-color: #7FFF00;
text-align: center;
padding-top: 20px;
} #controlPan {
margin-top: 400px;
border: 2px solid blue;
height: 400px;
width: auto;
}
</style> <!--1.实现一个简单的div块元素-->
<script>
var id; var direct = -1;
var times = 0; function step() {
times++; // 获取这个块元素
var div = document.getElementById("div"); console.log(div.offsetLeft);
if (div.offsetLeft == 800) {
direct = 0;
} else if (div.offsetLeft == 8) {
direct = 1;
} if (direct == 1) {
// 设置这个div元素向左的偏移量
var temp = div.offsetLeft + 2;
// 设置坐标的距离
div.style.left = temp + "px";
} else if (direct == 0) {
// 设置这个div元素向左的偏移量
var temp = div.offsetLeft - 2;
// 设置坐标的距离
div.style.left = temp + "px";
} //和setTimeout一样，要手动调用才能实现连续动画。
id = window.requestAnimationFrame(step); //返回值是一个id，可以通过这个id来取消 // 复杂的计算
for (var i = 0; i < 50; i++) {
console.log("再牛逼的定时器也得等到我执行完才能执行");
} //取消回调函数
if (times == 0) {
window.cancelAnimationFrame(id);
} } // 第一次调用
//id = window.requestAnimationFrame(step); </script> <!--2.setTimeout和setInterval深入理解-->
<script>
/*console.log("1");
setTimeout(function () {
console.log("3");
}, 0);
console.log("2"); // 输出： 1 2 3*/
// 2. 使用动画的正确姿势，动画其实是 “位移”关于“时间”的函数：s=f(t)
// 解决动画变慢的问题：把动画与时间关联起来
function startAnimation() {
var startTime = Date.now();
requestAnimationFrame(function change(time) {
var current = Date.now() - startTime;
console.log("动画已经执行的时间为：" + current);
requestAnimationFrame(startAnimation);
});
} //startAnimation(); // 动画通常情况下有终止时间，如果是循环动画，我们也可以看做特殊的——当动画达到终止时间之后，重新开始动画。因此，我们可以将动画时间归一(Normalize)表示：
//duration 是动画执行时间 isLoop是否为循环执行。
function startAnimation(duration, isLoop) {
var startTime = Date.now(); requestAnimationFrame(function change() {
// 动画已经用去的时间占总时间的比值
var p = (Date.now() - startTime) / duration;
//console.log(p); if (p >= 1.0) {
if (isLoop) { // 如果是循环执行，则开启下一个循环周期。并且把开始时间改成上个周期的结束时间
startTime += duration;
p -= 1.0; //动画进度初始化
} else {
p = 1.0; //如果不是循环，则把时间进度至为 1.0 表示动画执行结束
}
}
console.log("动画已执行进度", p);
if (p < 1.0) { //如果小于1.0表示动画还诶有值完毕，继续执行动画。
requestAnimationFrame(change);
}
});
} //startAnimation(100, true); // 示例1：用时间控制动画周期精确到2s中
function blockClick(obj) {
var block = document.getElementById("block"); var self = obj,
startTime = Date.now(),
duration = 2000;
// 添加一个动画
setInterval(function () {
var p = (Date.now() - startTime) / duration;
// 时间已经完成了2000的比例，则360度也是进行了这么个比例。
self.style.transform = "rotate(" + (360 * p) + "deg)";
}, 100); } // 示例2：让滑块在2秒内向右匀速移动600px
function blockTwoClick(obj) {
var self = obj;
var startTime = Date.now(),
distance = 600,
duration = 2000; requestAnimationFrame(function step(time) {
var p = Math.min(1.0, (Date.now() - startTime) / duration);
//沿着X方向运动
self.style.transform = "translateX(" + (distance * p) + "px)";
// 如果动画没有执行完毕， 就继续执行
if (p < 1.0) {
requestAnimationFrame(step);
}
})
}; // 实例3： 实现小球的自由落体运动
function ballClick(obj) {
var self = obj,
startTime = Date.now(),
distance = 1000,
duration = 1500;
requestAnimationFrame(function step() {
var p = Math.min(1.0, (Date.now() - startTime) / duration);
self.style.transform = "translateY(" + (distance * p * p) + "px)";
if (p < 1.0) requestAnimationFrame(step);
}); } // 实例4 ： 实现汽车的匀减速运动
function carClick(obj) {
var self = obj, startTime = Date.now(),
distance = 1000, duration = 2000;
requestAnimationFrame(function step() {
var p = Math.min(1.0, (Date.now() - startTime) / duration);
self.style.transform = "translateX("
+ (distance * p * (2 - p)) + "px)";
if (p < 1.0) requestAnimationFrame(step);
}); } // 实例5 ： 水平抛物运动
function stoneClick(obj) {
var self = obj, startTime = Date.now(),
disX = 1000, disY = 1000,
duration = Math.sqrt(2 * disY / 10 / 9.8) * 1000; // 落到地面需要的时间 单位ms
//假设10px是1米，disY = 100米 requestAnimationFrame(function step() {
var p = Math.min(1.0, (Date.now() - startTime) / duration);
var tx = disX * p; //水平方向是匀速运动
var ty = disY * p * p; //垂直方向是匀加速运动 self.style.transform = "translate("
+ tx + "px" + "," + ty + "px)";
if (p < 1.0) requestAnimationFrame(step);
}); } // 实例6 ： 正弦曲线运动
function SinMoveClick(obj) {
var self = obj, startTime = Date.now(),
distance = 800,
duration = 5000; requestAnimationFrame(function step() {
var p = Math.min(1.0, (Date.now() - startTime) / duration);
var ty = distance * Math.sin(2 * Math.PI * p);
var tx = 2 * distance * p; self.style.transform = "translate("
+ tx + "px," + ty + "px)";
if (p < 1.0) requestAnimationFrame(step);
}); } // 实例7 ： 圆周运动
function CircleMoveClick(obj) {
var self = obj,
startTime = Date.now(),
r = 100,
duration = 2000; requestAnimationFrame(function step() {
var p = Math.min(1.0, (Date.now() - startTime) / duration);
var tx = r * Math.sin(2 * Math.PI * p),
ty = -r * Math.cos(2 * Math.PI * p); self.style.transform = "translate(" +
tx + "px," + ty + "px)";
requestAnimationFrame(step);
});
} // 实现动画算子的封装
// pow() 方法可返回 x 的 y 次幂的值
var pow = Math.pow,
BACK_CONST = 1.70158;
// t指的的是动画进度 前面的p
Easing = {
// 匀速运动
linear: function (t) {
return t;
},
// 加速运动
easeIn: function (t) {
return t * t;
},
// 减速运动
easeOut: function (t) {
return (2 - t) * t;
},
//先加速后减速
easeBoth: function (t) {
return (t *= 2) < 1 ? .5 * t * t : .5 * (1 - (--t) * (t - 2));
},
// 4次方加速
easeInStrong: function (t) {
return t * t * t * t;
},
// 4次方法的减速
easeOutStrong: function (t) {
return 1 - (--t) * t * t * t;
},
// 先加速后减速，加速和减速的都比较剧烈
easeBothStrong: function (t) {
return (t *= 2) < 1 ? .5 * t * t * t * t : .5 * (2 - (t -= 2) * t * t * t);
},
//
easeOutQuart: function (t) {
return -(Math.pow((t - 1), 4) - 1)
},
// 指数变化 加减速
easeInOutExpo: function (t) {
if (t === 0) return 0;
if (t === 1) return 1;
if ((t /= 0.5) < 1) return 0.5 * Math.pow(2, 10 * (t - 1));
return 0.5 * (-Math.pow(2, -10 * --t) + 2);
},
//指数式减速
easeOutExpo: function (t) {
return (t === 1) ? 1 : -Math.pow(2, -10 * t) + 1;
},
// 先回弹，再加速
swingFrom: function (t) {
return t * t * ((BACK_CONST + 1) * t - BACK_CONST);
}, // 多走一段，再慢慢的回弹
swingTo: function (t) {
return (t -= 1) * t * ((BACK_CONST + 1) * t + BACK_CONST) + 1;
}, //弹跳
bounce: function (t) {
var s = 7.5625,
r; if (t < (1 / 2.75)) {
r = s * t * t;
} else if (t < (2 / 2.75)) {
r = s * (t -= (1.5 / 2.75)) * t + .75;
} else if (t < (2.5 / 2.75)) {
r = s * (t -= (2.25 / 2.75)) * t + .9375;
} else {
r = s * (t -= (2.625 / 2.75)) * t + .984375;
} return r;
}
}; /*
参数1：动画的执行时间
参数2：动画执行的时候的回调函数（动画执行的要干的事情）
参数3：动画算子. 如果没有传入动画算子，则默认使用匀速算子
*/
function Animator(duration, progress, easing) {
this.duration = duration;
this.progress = progress;
this.easing = easing || function (p) {
return p
};
} Animator.prototype = {
/*开始动画的方法，
参数：一个布尔值
true表示动画不循环执行。
*/
start: function (finished) {
/*动画开始时间*/
var startTime = Date.now();
/*动画执行时间*/
var duration = this.duration,
self = this;
/*定义动画执行函数*/
requestAnimationFrame(function step() {
/*得到动画执行进度*/
var p = (Date.now() - startTime) / duration;
/*是否执行下一帧动画*/
var next = true;
/*判断动画进度是否完成*/
if (p < 1.0) {
self.progress(self.easing(p), p); //执行动画回调函数，并传入动画算子的结果和动画进度。
} else {
if (finished) { //判断是否停止动画。如果是true代表停止动画。
next = false;
} else {
startTime = Date.now();
}
}
// 如果next是true执行下一帧动画
if (next) requestAnimationFrame(step);
});
}
}; function ChangeState() {
var self = document.getElementById("moveAny");
// 新建一个动画
new Animator(2000, function (p) {
self.style.top = 500 * p + "px";
}, Easing.easeBoth).start(false); } </script>
</head>
<body>
<div style="border: 2px solid red">
<!--动画实现方式：通过操作JavaScript间接操作CSS样式，每隔一段时间更新一次；-->
<div id="div"></div> <div id="block" onclick="blockClick(this)"></div>
<div id="blockTwo" onclick="blockTwoClick(this)"></div> <div id="ball" onclick="ballClick(this)"></div>
<div id="car" onclick="carClick(this)"></div>
<div id="stone" onclick="stoneClick(this)"></div>
<div id="SinMove" onclick="SinMoveClick(this)"></div>
<div id="CircleMove" onclick="CircleMoveClick(this)"></div>
</div> <div id="moveAny">我是一个可以做任意运动的物体</div>
<div id="controlPan">控制面板
<button onclick="ChangeState(this)">切换运动状态</button>
</div>
</body>
</html>
JavaScript进阶【五】利用JavaScript实现动画的基本思路的更多相关文章
- JavaScript进阶(五)js中取小数整数部分函数
js中取小数整数部分函数 丢弃小数部分,保留整数部分 js:parseInt(7/2) 向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 四舍五入 js: Math.round(7 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- JavaScript进阶(六)用JavaScript读取和保存文件
用JavaScript读取和保存文件 因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了.而出于安全原因,只有IE才提供访问文件的API:但随着HTML 5的到来, ...
- javascript进阶修炼之一——javascript必备操做
动态选择方法及属性 使用方括号操作符,比点操作符功能更强大.因为可以在[ ]方括号中使用任何代表成员名称的内容访问对象.包括字面量,保存着成员名称的变量,名称组合,三元操作符.所有这些内容都会被处理成 ...
- 4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
- JavaScript进阶内容——jQuery
JavaScript进阶内容--jQuery 我们在前面的文章中已经掌握了JavaScript的全部内容,现在让我们了解一下JavaScript库 这篇文章主要是为了为大家大致讲解JavaScript ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
- JavaScript进阶学习的一些建议
blankyao最近问我如何学习JavaScript,他觉着在理解了JavaScript的语法之后,不知如何去学习JavaScript了. 其实我也是个JavaScript小菜,最近在开发中遇到不少关 ...
- JavaScript进阶（三）
现在来说说判断语句(if)if语句是基于条件成立才执行相应代码时使用的语句.语法:if(条件){条件成立时执行代码}注意:if小写,大写字母(IF)会出错!假设你应聘web前端技术开发岗位,如果你会h ...
- Javascript 进阶 面向对象编程 继承的一个样例
Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...
随机推荐
- Porting from Oracle to MySQL
A potential customer asked my about porting her application from Oracle Database to MySQL. I always ...
- [bzoj3282]Tree_LCT
Tree bzoj-3282 题目大意:给你n个点m个操作.更改单点权值,加边,删边:查询路径异或和. 注释:$1\le n,m\le 10^5$ 想法:看到了加边删边,果断想到LCT维护.至于路径异 ...
- find-median-from-data-stream & multiset priority queue 堆
https://leetcode.com/problems/find-median-from-data-stream/ 这道题目实在是不错,所以单独拎出来. https://discuss.leetc ...
- Tarjan算法各种&RMQ& POJ 3694
关于tarjan 的思想可以在网上搜到,具体我也不太清楚,应该说自己理解也不深,下面是做题经验得到的一些模板. 其中有很多转载,包括BYVoid等,感谢让我转...望各路大神愿谅 有向图求连通分量的一 ...
- HDU 1429--胜利大逃亡(续)【BFS && 状态压缩】
胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- HDU 2830 Matrix Swapping II (预处理的线性dp)
Matrix Swapping II Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- QUERY_REWRITE_INTEGRITY
QUERY_REWRITE_INTEGRITY Property Description Parameter type String Syntax QUERY_REWRITE_INTEGRITY = ...
- 过时的PreferenceActivity导致Fragment显示问题
问题描写叙述: 在一个点击preferenceactivity中某项显示一个Fragment的场景中,出现错误: java.lang.RuntimeException: This should be ...
- luogu2761 软件补丁问题 状态压缩最短路径
关键词:状态压缩 最短路径 想不出快速办法,就先考虑考虑暴力.枚举每一种错误分布的情况,然后通过可用的补丁转化为另多种情况,这些情况又转化为更多种情况……我们可以用图来表示这种关系! 状态压缩:每个错 ...
- C语言 - 头文件使用案例
源代码分门别类管理,通过头文件. 放置一些函数声明,变量声明,常量定义,宏定义. hotel.h #ifndef HOTEL_H_INCLUDED #define HOTEL_H_INCLUDED # ...