JavaScript框架设计 第14章 动画引擎
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#taxiway {
width: 800px;
height: 100px;
background: #E8E8EF;
position: relative;
}
#move {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: #a9ea00;
}
</style>
</head>
<body>
<div id="taxiway">
<div id="move"></div>
</div>
<script>
function easeOutBounce(pos) {
if ((pos) < (1/2.75)) {
return (7.5625*pos*pos);
} else if (pos < (2/2.75)) {
return (7.5625*(pos-=(1.5/2.75))*pos + 0.75);
} else if (pos < (2.5/2.75)) {
return (7.5625*(pos-=(2.25/2.75))*pos + 0.9375);
} else {
return (7.5625*(pos-=(2.625/2.75))*pos + 0.984375);
}
} var el = document.getElementById('move')
var parent = document.getElementById('taxiway')
var distance = parent.offsetWidth - el.offsetWidth
var begin = parseFloat(window.getComputedStyle(el, null).left)
var end = begin + distance
var fps = 30
var interval = 1000 / fps
var duration = 2000
var times = duration / 1000 * fps
var step = distance / times el.onclick = function() {
var beginTime = new Date
var id = setInterval(function() {
var t = new Date - beginTime
if (t >= duration) {
el.style.left = end + 'px'
clearInterval(id)
} else {
var per = t / duration
el.style.left = begin + easeOutBounce(per) * distance + 'px'
}
}, interval)
}
</script>
</body>
</html>
easeIn
linear(easeNone)
In 表示加速
Out 表示减速
InOut 表示加速到中途又开始减速以实现方式与指数或开根进行区分
Sine 表示由三角函数实现
Quad 是二次方
Cubic 是三次方
Quart 是四次方
Quint 是五次方
Cire 使用开平方根的 Math.sqit
Expo 使用开立方根的 Math.pow
Elastic 是结合三角函数与开立三方根的初级弹簧效果
Back 是使用了一个 1.70158 常数来计算的回退效果
Bounce 是高级弹簧效果
JavaScript框架设计 第14章 动画引擎的更多相关文章
- 偶的《javascript框架设计》终于出版
#cnblogs_post_body p{ text-indent:2em!important; } 历时两年多,我的书终于付梓出版了.应各方面的要求,写软文一篇,隆重介绍一下此书对各位程序员的钱途有 ...
- JS读书心得：《JavaScript框架设计》——第12章 异步处理
一.何为异步 执行任务的过程可以被分为发起和执行两个部分. 同步执行模式:任务发起后必须等待直到任务执行完成并返回结果后,才会执行下一个任务. 异步执行模式:任务发起后不等待任务执行完成,而是马上 ...
- JavaScript框架设计(三) push兼容性和选择器上下文
JavaScript框架设计(三) push兼容性和选择器上下文 博主很久没有更博了. 在上一篇 JavaScript框架设计(二) 中实现了最基本的选择器,getId,getTag和getClass ...
- JavaScript框架设计(四) 字符串选择器(选择器模块结束)
JavaScript框架设计(四) 字符串选择器(选择器模块结束) 经过前面JavaScript框架设计(三) push兼容性和选择器上下文的铺垫,实现了在某一元素下寻找,现在终于进入了字符串选择器 ...
- Javascript框架设计思路图
这个系列的随笔都是关于Javascript框架设计一书的读书笔记(作者是司徒正美),不是本人原创!!! 一.简介: 1.市面上主流的JS框架,大多数是由一个个模块组合而成,模块化是大多数让软件所遵循的 ...
- MySQL性能调优与架构设计——第 14 章 可扩展性设计之数据切分
第 14 章 可扩展性设计之数据切分 前言 通过 MySQL Replication 功能所实现的扩展总是会受到数据库大小的限制,一旦数据库过于庞大,尤其是当写入过于频繁,很难由一台主机支撑的时候,我 ...
- JavaScript 框架设计
JavaScript 高级框架设计 在现在,jQuery等框架已经非常完美,以致于常常忽略了JavaScript原生开发,但是这是非常重要的. 所以,我打算写一个简单的框架,两个目的 熟练框架的思想 ...
- JavaScript 框架设计(二)
JavaScript 高级框架设计 (二) 上一篇,JavaScript高级框架设计(一)我们 实现了对tag标签的选择 下来我们实现对id的选择,即id选择器. 我们将上一篇的get命名为getTa ...
- JS框架设计读书笔记之-动画
基础概念 CSS样式可分为两种,一种值接近无限的集合(color,width),一种值只有几种(display),可以进行计算的样式,产生了动画效果.\ 1. 动画的第一步是获得元素的精确样式值. 2 ...
随机推荐
- javascript高级培训课程(一)
执行上下文 可执行代码类型-- 执行上下文类型 全局代码-- 全局上下文 函数代码-- 函数上下文 eval代码 -- eval上下文 arguments 超出传入参数个数的index 与形参不 ...
- Codeforces 552E - Vanya and Brackets【表达式求值】
给一个只有加号和乘号的表达式,要求添加一对括号使得最后结果最大.表达式长度5000,乘号最多12个,表达式中数字只有1位. 左括号一定在乘号右边,右括号一定在乘号左边,因为如果不是这样的话,一定可以调 ...
- Python之路【第十二篇】：JavaScrpt -暂无内容-待更新
Python之路[第十二篇]:JavaScrpt -暂无内容-待更新
- float与double剖析
今天研究下float与double的编码 float: 我们来看一下这组数是如何一步步从16进制转换到float的 float编码格式: 1.将16进制转换到2进制 整理后:0 1000 0010 1 ...
- jQuery失去焦点的时候注册验证
//注册验证$('form :input').blur(function () { if ($("#txtName").val() == "") { $(&qu ...
- fiddler了解
常常听到有人会所抓包什么的,自己电脑上有一段fiddler软件,但是一直没有使用,因为不了解.今天终于看视频,看博客,大致了解了fiddler这个软件,看着是非常强大啊.那么fiddler到底是什么, ...
- Quartz.NET配置(Log4net)
最近有个任务关于服务调度,想起以前看过Quartz.NET调度任务非常棒. 今天小试Quartz.NET,前面配置Quartz.NET很轻松,控制台也输出了.但是想配合Log4net来做日志文件,怎么 ...
- MySQL性能状态查看方式
1. QPS(每秒Query量) QPS = Questions(or Queries) / seconds mysql > show global status like 'Question% ...
- 【转】iOS使用NSMutableAttributedString实现富文本
iOS使用NSMutableAttributedString实现富文本 在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘 ...
- 设置 textField.placeholder的颜色和大小
textField.placeholder = @"请输入手机号码"; [textField setValue:[UIColor blue] forKeyPath:@"_ ...