JS——缓动动画
核心思想：
(1)相对于匀速移动，盒子每次移动的步长都是变化的，公式：盒子位置=盒子本身位置+（目标位置-盒子本身位置）/10
(2)在盒子位置与目标距离小于10px时，其步长必然是小数，又由于offsetLeft的变态的逢4进值，那么只要小数点的值小于4就会停滞不前
(3)所以要么往上取整，要么往下取整
1、Math.ceil
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.getElementsByTagName("button")[0];
var divEle = document.getElementsByTagName("div")[0];
var timer = null;
btn.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
//当目标距离与实际距离小于10px时，会以1px的速度前进
var step = (400 - divEle.offsetLeft) / 10;
step = Math.ceil(step);
divEle.style.left = divEle.offsetLeft + step + "px";
if (Math.abs(400 - divEle.offsetLeft) <= Math.abs(step)) {
divEle.style.left = "400px";
clearInterval(timer);
}
}, 15)
}
</script>
</body>
</html>
2、Math.floor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 400px;
}
</style>
</head>
<body>
<button>点击</button>
<div></div>
<script>
var btn = document.getElementsByTagName("button")[0];
var divEle = document.getElementsByTagName("div")[0];
var timer = null;
btn.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
//当目标距离与实际距离小于10px时，会以1px的速度前进
var step = (0 - divEle.offsetLeft) / 10;
step = Math.floor(step);
divEle.style.left = divEle.offsetLeft + step + "px";
if (Math.abs(0 - divEle.offsetLeft) <= Math.abs(step)) {
divEle.style.left = 0;
clearInterval(timer);
}
}, 15)
}
</script>
</body>
</html>
3、封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0px;
}
</style>
</head>
<body>
<button>回到起点</button>
<button>回到200</button>
<button>回到400</button>
<div></div>
<script>
var btn1 = document.getElementsByTagName("button")[0];
var btn2 = document.getElementsByTagName("button")[1];
var btn3 = document.getElementsByTagName("button")[2];
var divEle = document.getElementsByTagName("div")[0];
btn1.onclick = function () {
animate(divEle, 0);
}
btn2.onclick = function () {
animate(divEle, 200);
}
btn3.onclick = function () {
animate(divEle, 400);
} function animate(ele, target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
var step = (target - ele.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
}, 15);
}
</script>
</body>
</html>
JS——缓动动画的更多相关文章
- JS基础知识——缓动动画
基于距离的缓动动画 原理:设定起始位置 start 和终止位置 end,变化会越来越慢. 公式:start=start+(end-start)/10; 这个10不是固定的,想分成多少份就分成 ...
- js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
- js off 缓动动画
动画也有很多种,一起来学习,缓动动画吧 缓动动画 1.缓动动画原理=盒子位置+(目标盒子位置-现在盒子位置)/10 2.步长越来越小 3.让步长越来越小的公式 步长=(目标位置-本身位置)/ ...
- JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- jQuery-1.9.1源码分析系列（十五） 动画处理——缓动动画核心Tween
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. ...
- 背水一战 Windows 10 (15) - 动画: 缓动动画
[源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...
- WPF界面设计技巧（7）—模拟电梯升降的缓动动画
原文:WPF界面设计技巧(7)-模拟电梯升降的缓动动画 如同Flash一样,WPF的亮点之一也在于其擅于表现平滑的动画效果,但以移动动画来说,仅凭简单的起始位置.目标位置,所产生的动画仍会非常生硬,这 ...
- Windows Phone开发（42）：缓动动画
原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyF ...
- 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画
原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画 ...
随机推荐
- HBase单节点的安装与配置
HBase的安装配置1.下载:http://mirror.bit.edu.cn/apache/hbase/stable/ hbase-1.2.6-bin是直接编译好的,直接安装. hbase- ...
- nyoj_68_三点顺序_201404152013
三点顺序 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 现在给你不共线的三个点A,B,C的坐标,它们一定能组成一个三角形,现在让你判断A,B,C是顺时针给出的还是逆 ...
- [poj1678]I Love this Game!_博弈论
I Love this Game! 题目大意:题目链接 注释:略. 想法: 开始的时候以为没法dp,结果...:a>0啊! 所以可以直接dp了啊! 状态:dp[i]表示先手选了a[i]的状态. ...
- eclipse 安装egit插件
一.Eclipse上安装GIT插件EGit Eclipse的版本eclipse-java-helios-SR2-win32.zip(在Eclipse3.3版本找不到对应的 EGit插件,无法安装) E ...
- ubuntu Change Language
慎用 所謂的語系(locale),其實包含語言及地區的設定,因為除了語言之外,國家與國家的日期表示方式.數字格式.貨幣符號.度量單位可能都不一樣,所以才會有了這個locale的發明,依照國家和語言給予 ...
- [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS
You most likely already have data or properties in your template which are controlled by third-party ...
- 【一】注入框架RoboGuice使用:(A brief example of what RoboGuice does)
在我们平时开发Android项目的时候比如常常须要使用各种View控件,然后进行声明.findViewById.而且进行强转.每次都要写这种代码就显得很繁琐,而且easy出错哦.那么针对这种情况且不限 ...
- Delphi中ARC内存管理的方向
随着即将发布的10.3版本,RAD Studio R&D和PM团队正在制作Delphi在内存管理方面的新方向. 几年前,当Embarcadero开始为Windows以外的平台构建新的Delph ...
- ALSA声卡驱动中的DAPM详解之三：如何定义各种widget
上一节中,介绍了DAPM框架中几个重要的数据结构:snd_soc_dapm_widget,snd_soc_dapm_path,snd_soc_dapm_route.其中snd_soc_dapm_pat ...
- 洛谷P2059 [JLOI2013]卡牌游戏
题目描述 N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家首先把 ...