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应用开发,常用来为网页添加各式各样的动态功能, ...
随机推荐
- HTTPS实现原理
HTTPS实现原理 HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版 ...
- Java开源GIS系统
uDig 基于Eclipse RCP的uDig开源项目既是一个GeoSpatial应用程序也是一个平台开发者可通过这个平台来创建新的在uDig基础上衍生的应用程序,uDig是Web地理信息系统的一 ...
- Android 动画之ScaleAnimation应用详解
本节讲解ScaleAnimation 动画, ScaleAnimation(float fromX, float toX, float fromY, float toY,int pivotXType, ...
- 成都普华永道税务开发的offer
首先这是一个.net税务开发的offer,我是做开发的. 有没有人在成都普华永道的,最近收到普华永道的offer,如果有的话请联系我.想知道里面的情况.最想知道里面的加班情况,薪资还是有点诱惑的.毕竟 ...
- 自己留存：mysql full text 支持中文的一个设定
innodb_ft_min_token_size=1 ft_min_word_len=1
- 编写高质量代码改善C#程序的157个建议[IEnumerable<T>和IQueryable<T>、LINQ避免迭代、LINQ替代迭代]
前言 本文已更新至http://www.cnblogs.com/aehyok/p/3624579.html .本文主要学习记录以下内容: 建议29.区别LINQ查询中的IEnumerable<T ...
- 用wcf实现带有“秒传”功能的网盘
写在前面 前面记录过这样一个关于“秒传”的实现思路,在这篇就弄了一个简单的demo实现了一下,当中有很多业务仍没考虑,只是将“秒传”的实现思路,用代码实现了一下. 关于秒传,可以参考这篇文章:何为“秒 ...
- ADHelper C#域用户操作(转)
using System; using System.Collections.Generic; using System.DirectoryServices; using System.Linq; u ...
- Java基础-四要素之一《多态》
什么是多态 指允许不同类的对象对同一消息做出响应.即同一消息可以根据发送对象的不同而采用多种不同的行为方式.(发送消息就是函数调用) 多态是指程序中定义的引用变量所指向的具体类型和通过该引用变量发出的 ...
- shell expr的用法
root@tcx4440-03:~# var=$var+1root@tcx4440-03:~# echo $var3+1 要想达到预期结果,用下列三种方法: (1)let "var+=1&q ...