JS 动画基础
获取元素的样式
getStyle函数
function getStyle(element, attr) {
if(element.currentStyle) {
//针对IE
return element.currentStyle[attr];
} else {
//针对Firefox
return getComputedStyle(element, false)[attr];
}
}
此函数返回的是一个字符串，需要调用 parseInt() 或者 parseFloat() 将返回的结果转换为数字值。
简单动画
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>简单动画</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box">
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<span>萌萌哒</span>
</div>
</body>
</html>
CSS
* {
margin:;
padding:;
}
#box {
padding: 5px;
margin: 10px;
border: 1px solid #aaa;
border-radius: 5px;
width: 240px;
box-shadow: 0 0 1px #aaa, 0 0 2px #aaa;
position: absolute;
top:;
left: -260px;
cursor: pointer;
}
#box span {
position: absolute;
display: block;
width: 20px;
background-color: black;
color: white;
margin-left: 245px;
margin-top: -125px;
}
JavaScript
window.onload = function() {
move();
}
function move() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
animation(box, "left", 0, 1, 10);
};
box.onmouseout = function() {
animation(box, "left", -260, 1, 10);
};
}
// 简单动画，接收5个参数：动画元素、动画属性、目标值、变化速度、定时器时间
function animation(element, attr, target, speed, timing) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var curValue = parseInt(getStyle(element, attr));
var count = speed;
if(curValue < target) {
count = speed;
} else if(curValue > target) {
count = -speed;
} else {
count = 0;
}
if(curValue == target) {
clearInterval(element.timer);
} else {
element.style[attr] = curValue + count + "px";
console.log(curValue);
}
}, timing)
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
缓冲动画
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>缓冲动画</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box">
<img src="http://pic1.win4000.com/wallpaper/c/537b28b60619b.jpg" alt="A picture" style="width:240px;height:180px" />
<span>萌萌哒</span>
</div>
</body>
</html>
CSS
* {
margin:;
padding:;
}
#box {
padding: 5px;
margin: 10px;
border: 1px solid #aaa;
border-radius: 5px;
width: 240px;
box-shadow: 0 0 1px #aaa, 0 0 2px #aaa;
position: absolute;
top:;
left: -260px;
}
#box span {
position: absolute;
display: block;
width: 20px;
background-color: black;
color: white;
margin-left: 245px;
margin-top: -125px;
cursor: pointer;
}
JavaScript
window.onload = function() {
move();
}
function move() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
animation(box, "left", 0, 10, 50);
};
box.onmouseout = function() {
animation(box, "left", -260, 10, 50);
};
}
// 缓冲动画，接收5个参数：动画元素、动画属性、目标值、变化速度、定时器时间
function animation(element, attr, target, speed, timing) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var curValue = parseInt(getStyle(element, attr));
var count = (target - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
if(curValue == target) {
clearInterval(element.timer);
} else {
element.style[attr] = curValue + count + "px";
}
}, timing)
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
透明度动画
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度动画</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
CSS
#box {
width: 100px;
height: 100px;
background-color: blue;
border: 5px solid #333;
border-radius: 5px;
opacity: 0.5;
}
JavaScript
window.onload = function() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
changeOpacity(box, 100, 2, 10, 100);
}
box.onmouseout = function() {
changeOpacity(box, 30, 2, 10, 100);
}
}
function changeOpacity(element, target, method, speed, timing) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var curValue = Math.round(parseFloat(getStyle(element, "opacity")) * 100);
switch(method) {
case 1:
var count = speed;
if(curValue < target) {
count = speed;
} else if(curValue > target) {
count = -speed;
} else {
count = 0;
}
break;
case 2:
var count = (target - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
break;
default:
var count = (target - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
}
if(curValue == target) {
clearInterval(element.timer);
} else {
console.log(curValue);
element.style.opacity = (curValue + count) / 100;
}
}, timing)
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
【1】使用 getStyle 函数获取的 opacity 属性是一个浮点数，不能使用 parseInt() 对其进行转化，应该使用 parseFloat() 。
将 opacity 的值乘以 100 ，然后调用 Math.round() ，将浮点数变成整数。（永远不要比较两个浮点数是否相等，结局绝对会出人意料。）
基础动画框架
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>动画框架演示</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="box"></div>
</body>
</html>
CSS
#box {
margin: 10px;
border: 5px solid #333;
border-radius: 5px;
box-shadow: 0 0 1px #333, 0 0 2px #333;
width: 100px;
height: 100px;
background-color: blue;
opacity: 0.3;
position: absolute;
left:;
top:;
}
JavaScript
window.onload = function() {
move();
}
function move() {
var box = document.getElementById("box");
box.timer = null;
box.onmouseover = function() {
animation(box, {left:300}, 2, 20, 50, function() {
animation(box, {width:200, height:200, opacity:100}, 2, 20, 50)
})
}
box.onmouseout = function() {
animation(box, {left:0}, 2, 20, 50, function() {
animation(box, {width:100, height:100, opacity:50}, 2, 20, 50)
})
}
}
// 动画函数接收 6 个参数：动画元素、json 数据、运动方式、变化速度、定时器时间、回调函数
// 其中，json 数据的格式为 {attr1: target1, attr2: target2}
// method 参数传入 1 则表示匀速运动，传入 2 则表示缓冲运动
function animation(element, json, method, speed, timing, fn) {
clearInterval(element.timer);
element.timer = setInterval(function() {
var flag = true;
for(var attr in json) {
var curValue = 0;
if(attr == "opacity") {
curValue = Math.round(parseFloat(getStyle(element, attr)) * 100);
} else {
curValue = parseInt(getStyle(element, attr));
}
switch(method) {
case 1:
var count = speed;
if(curValue < json[attr]) {
count = speed;
} else if(curValue > json[attr]) {
count = -speed;
} else {
count = 0;
}
break;
case 2:
var count = (json[attr] - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
break;
default:
var count = (json[attr] - curValue) / speed;
count = (count > 0) ? Math.ceil(count) : Math.floor(count);
}
if(curValue != json[attr]) {
flag = false;
}
if(attr == "opacity") {
element.style.opacity = (curValue + count) / 100;
console.log(curValue);
} else {
element.style[attr] = curValue + count + "px";
}
}
if(flag) {
clearInterval(element.timer);
if(fn) {
fn();
}
}
}, timing);
}
function getStyle(element, attr) {
if(element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
【1】如果需要将元素恢复到动画之前的样子，动画的运动方式应该一致，否则在特殊情况下会出一些 bug 。
JS 动画基础的更多相关文章
- 【2017-04-01】JS字符串的操作、时间日期的操作、函数、事件、动画基础
一.字符串的操作 1.转大写: s.toLowerCase(); 2.转大写: s.toUpperCase(); 3.字符串的截取: s.substr(3,4); -从索引3开始截取,截取4 ...
- CSS 和 JS 动画哪个更快
基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...
- CSS VS JS动画，哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- 炫丽的倒计时效果Canvas绘图与动画基础
前言 想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天! 一.绘制基础 1 <!DOCTYPE h ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- 关于JS动画和CSS3动画的性能差异
本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...
- CSS3动画和JS动画的比较
前言 之前有被问到一个问题,css3动画和js动画性能谁更好,为什么.据我的经验,当然觉得css3动画性能更好,至于为什么一时还真答不上来,所以特意查了一下资料总结一波. JS动画 优点: js动画控 ...
- 高性能Web动画和渲染原理系列（1）——CSS动画和JS动画
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- JS 的基础概念
本篇文章主要讲述js的基础知识! 首先,我们要明白什么是JS,JS就是 javascript 的简称,是一种轻量级,弱类型的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能, ...
随机推荐
- [py] os.system os.popen commands 执行shell
1.仅输出到屏幕,pwd保存的是状态<=====可用于执行shell命令 pwd=os.system(pwd) 2.popen可以保存命令结果 pwd=os.popen('pwd').r ...
- memcached 介绍
博客园相关文章功能中使用了memcached,在网上搜集了一些memcached方面的文章: memcached完全剖析 分布式缓存系统Memcached简介与实践 Memcached深度分析 自己实 ...
- [CareerCup] 11.4 Sort the File 文件排序
11.4 Imagine you have a 20 GB file with one string per line. Explain how you would sort the file. 这道 ...
- [CareerCup] 12.6 Test an ATM 测试一个自动取款机
12.6 How would you test an ATM in a distributed banking system? 这道题问我们如何来测试一个自动取款机,我们首先要询问下列问题: - 谁来 ...
- 【APUE】Chapter17 Advanced IPC & sign extension & 结构体内存对齐
17.1 Introduction 这一章主要讲了UNIX Domain Sockets这样的进程间通讯方式,并列举了具体的几个例子. 17.2 UNIX Domain Sockets 这是一种特殊s ...
- [USACO2004][poj2373]Dividing the Path（DP+单调队列)
http://poj.org/problem?id=2373 题意:一条直线分割成N(<=25000)块田,有一群奶牛会在其固定区域吃草,每1把雨伞可以遮住向左右延伸各A到B的区域,一只奶牛吃草 ...
- [USACO2002][poj1946]Cow Cycling（dp）
Cow CyclingTime Limit: 1000MS Memory Limit: 30000KTotal Submissions: 2468 Accepted: 1378Description ...
- 项目笔记---Socket Error Code翻译
前言 在项目中为了方便调试及客户反馈,需要Socket错误数字的中文解释,MSDN上只有英文版,同时也想自己学习而且方便将来更新ErrorCode的实际发生的情景,顾有此博文. MSDN:https: ...
- HTML上传文件写法
来源于:http://www.cnblogs.com/SkySoot/p/3525139.html html 表单上传文件 一般处理程序由于没有 apsx 页面的整个模型和控件的创建周期,而比较有效率 ...
- java.lang.IllegalStateException: getWriter() has already been called for this response问题解决
java.lang.IllegalStateException: getWriter() has already been called for this response问题解决 java.lang ...