常见问题:定时器加速问题,每次点击会启动一个定时器,解决先清除定时器


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画运动平移</title>
<style>
*{margin:0;padding:0;}
#aa1 {position:absolute;left:0px;width:100px;height:100px;background:#F00;display:inline-block;}
#btn1 {position:absolute;top:120px;}
.line {position:absolute;left:300px;width:1px;height:500px;background:#000;}
</style>
</head>
<body>
<input type="button" value = "移动" id="btn1">
<div id="aa1"></div>
<div id="aa2"></div>
<div class='line'></div>
<script>
//1、定时器加速问题,每次点击会启动一个定时器,解决先清楚
var oBtn1 = document.querySelector('#btn1');
var oDiv1 = document.querySelector('#aa1');
var timer=null;
oBtn1.onclick=function(){
clearInterval(timer);
//2、不想改变speed值,判断起始值在目标点的方向
(300-oDiv1.offsetLeft)<0? speed=-9: speed=9;
timer = setInterval(function(){
//3、距离足够近时,设置值
if(Math.abs(300-oDiv1.offsetLeft)<Math.abs(speed)){
oDiv1.style.left=300+'px';
clearInterval(timer);
timer =null;
}else {
oDiv1.style.left =oDiv1.offsetLeft+speed+'px';
}
},20)
}
</script>
</body>
</html>

动画通用步骤:
:判断速度speed正负:
(目标值-oDiv1.offsetLeft)<? speed=负: speed=正;
、归位
if(Math.abs(目标值-oShare.offsetLeft)<Math.abs(speed)){//显示
oDiv1.style.left =dest+'px';
clearInterval(timer);
timer = null;
}else {
oDiv1.style.left =oDiv1.offsetLeft+speed+'px';
}

 

练习:javascript-setInterval动画运动平移,定时器动画练习的更多相关文章

  1. 基于canvas实现物理运动效果与动画效果(一)

    一.为什么要写这篇文章 某年某月某时某种原因,我在慕课网上看到了一个大神实现了关于小球的抛物线运动的代码,心中很是欣喜,故而写这篇文章来向这位大神致敬,同时也为了弥补自己在运动效果和动画效果制作方面的 ...

  2. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  3. [iOS Animation]-CALayer 定时器动画

    定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲来模拟物理效果例如加速或者减速 ...

  4. Android动画:模拟开关按钮点击打开动画(属性动画之平移动画)

    在Android里面,一些炫酷的动画确实是很吸引人的地方,让然看了就赏心悦目,一个好看的动画可能会提高用户对软件的使用率.另外说到动画,在Android里面支持3种动画: 逐帧动画(Frame Ani ...

  5. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  6. 按照vue文档使用JavaScript钩子但是却不能执行动画?

    大家刚入VUE肯定是先去阅读文档, 在 进入/离开 & 列表过渡 这一章节有一小节 ---------  JavaScript钩子 详情见vue文档:  https://cn.vuejs.or ...

  7. 基本动画、复合动画设置 平移、缩放、旋转、透明度 编码实现 xml实现

    public class VAActivity extends Activity { private ImageView iv_animation; private TextView tv_anima ...

  8. WPF 3D 平移模型+动画(桥梁检测系统)

    原文:WPF 3D 平移模型+动画(桥梁检测系统) 关于WPF 3D,网上有很多旋转的例子,但是关于平移的例子并不是太多.本文并非WPF 3D扫盲篇,因此需要对WPF 3D有一定了解,至少知道View ...

  9. CoreAnimation4-隐式动画和显式动画

    事务 Core Animation基于一个假设,说屏幕上的任何东西都可以(或者可能)做动画.动画并不需要你在Core Animation中手动打开,相反需要明确地关闭,否则他会一直存在. 当你改变CA ...

随机推荐

  1. Python开发【第五篇】内置函数

    abs() 函数返回数字的绝对值 __author__ = "Tang" a = -30 all() 函数用于判断给定的可迭代参数iterable中的所有元素是否都为True,如果 ...

  2. Python距离放弃拉近的day03

    新的一天,依旧是内容补充,补充了数学没有的运算符,in和not in,就是判断in前面的东西是不是在后面的数据中,然后新课讲了平常最常用的字符串的方法,引号的里面全部都是字符串,在其中就会又如何判断这 ...

  3. Putty中的pscp和psftp的简明用法

    用习惯了putty,那是真心的方便啊,putty文件夹下其他的小兄弟也不能忽略啊. 以前的时候,从远程服务器下载个文件用winscp,后来,发现在putty文件夹里好像有一个 pscp和psftp,今 ...

  4. springboot2+freemarker简单使用

    一.src/main/resources/templates下新建welcome.ftl <!DOCTYPE html> <html lang="en"> ...

  5. Linux内存管理 (14)匿名页面生命周期

    专题:Linux内存管理专题 关键词:匿名页面.换入.换出. 如果要将匿名页面的生命周期进行划分,大概就是诞生.使用.换出.换入和销毁. 内核中使用匿名页面的地方有很多,产生缺页中断之后匿名页面就诞生 ...

  6. iOS开发基础-UIScrollView基础

     普通的 UIView 不具备滚动功能,不能显示过多的内容.UIScrollView 是一个能够滚动的视图控件,可用来展示大量的内容.  UIScrollView 的简单使用: 1)将需要展示的内容添 ...

  7. Numpy基本操作

    NumPy:数组计算 NumPy是高性能科学计算和数据分析的基础包.它是Pandas等其他各种工具的基础 NumPy的主要功能: ndarray,一个多维数据结构,高校且节省空间 无需循环即可对整组数 ...

  8. Python--day01(计算机基础)

    Python: python 是一门面向后台的编程语言,在大数据,数据分析,机器学习,人工智能,爬虫,自动化运维,web等方面具有强大功能. 基础阶段学习内容:基本语法,文件处理,函数,模块,面向对象 ...

  9. PS图片后期之超简易造光调色方法

    技法是死的,而人是活的,说的简单一点就是我们要学会开拓一下思维,调色的方法并不是只有[可选颜色]而已. 在修片之前,我们先要学会分析,在拍摄这一组照片时我希望有一种夕阳的光穿透晒在脸庞的感觉,而左边的 ...

  10. oracle:TNS:监听程序无法分发客户机连接

    挂上vpn的时候,PL/SQL连接到oracle的时候,显示ORA-12518:监听程序无法分发客户机连接.如下图: 一.[问题描述] 最近,在系统高峰期的时候,会提示如上的错误,致使无法连接到服务器 ...