前面讲述的动画速度都是匀速的，现实生活中的运动速度的变化不一定是恒定的，存在一定的缓冲，就像火车进站一样，速度会越来越慢。

对于改变速度措施，其实只要将动画第一课的程序稍微的改变一下就可以了，我们来看一下代码如何实现的

html

<!DOCTYPE html>

<html>

<head>

<title>js动画事件</title>

<link href="move.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="move.js"></script>

</head>

<body>

<div id="div1">

<span id="sp1">分享</span>

</div>

</body>

</html>

css

*{

    margin:0px;

    padding:0px;

}

#div1{

    width:200px;

    height:200px;

    position:absolute;

    left:-200px;

    background:red;

    border:1px solid #eeddcc;

}

#sp1{

    display:block;

    width:20px;

    height:80px;

    position:absolute;

    left:200px;

    top:60px;

    border:1px solid red;

    color:#036;

    line-height:40px;

}

js

var timer;

window.onload=function(){

    var div1=document.getElementById("div1");

    div1.onmouseover=function(){

        RunPlay(0);

    }

    div1.onmouseout=function(){

        RunPlay(-200);

    }

}

function RunPlay(target){

    var div1=document.getElementById("div1");

    clearInterval(timer);

    var speed=10;

    timer=setInterval(function(){

        if(target>div1.offsetLeft){

            speed=Math.ceil((target-div1.offsetLeft)/10);//缓冲的效果就是在这里实现的，我们将速度的大小与当前位置与终点之间的距离成正比，那么距离越小，速度也越小，此外一定要注意，这里我们要对速度进行向上，或者向下取整，而且对于正数我们要向上取整，对于负速度，我们要向下取整。

        }else{

            speed=Math.floor((target-div1.offsetLeft)/10);

        }

        if(div1.offsetLeft==target){

            alert(speed);

            clearInterval(timer);

        }else{

            div1.style.left=div1.offsetLeft+speed+"px";

        }

    },50)

}

js动画--缓冲动画的更多相关文章

  1. JS之缓冲动画

    原素材 main.html <!DOCTYPE html> <html lang="en"> <head> <link href=&quo ...

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

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

  3. easing.js让页面动画丰富起来

    jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. <scr ...

  4. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  5. JavaScript原生折叠扩展收缩菜单带缓冲动画

    JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨 <div id="div_two" style="display: none;"> &l ...

  6. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  7. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  8. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  9. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

随机推荐

  1. 灵魂拷问：Java对象的内存分配过程是如何保证线程安全的？(阿里面试)

    JVM内存结构,是很重要的知识,相信每一个静心准备过面试的程序员都可以清楚的把堆.栈.方法区等介绍的比较清楚. 上图,是一张在作者根据<Java虚拟机规范(Java SE 8)>中描述的J ...

  2. 【Shiro学习之一】Shiro入门

    一.Shiro Apache Shiro是一个Java安全框架. 1.官网:http://shiro.apache.org/ 2.三个核心组件 Subject:即“当前操作用户”,可以指人.第三方进程 ...

  3. Markdown 编辑器指南

    一直觉得博客园默认的编辑器不好用,后来了解了Markdown,并且博客园也支持Markdown标记,所以写篇博客总结下. 一.认识 Markdown Markdown 是一种用来写作的轻量级「标记语言 ...

  4. exports与module.exports的区别，以及export与export.defult的区别

    在 JS 模块化编程的模块引入上, 主要有两种方式: CommonJS 模块标准 ES6 moduel 特性 1. CommonJS 模块引入:require() 模块导出:exports 或者 mo ...

  5. 认识一下microbit扩展板robotbit

    在我们买到的套件中,另一块叫robotbit扩展板,所谓扩展板,是把控制板上的针脚引出来,方便我们扩展驱动连接电机.舵机.及各种传感器以展功能. 介绍如下 :下面 反面: 官方文档:http://le ...

  6. [转帖]华为PC端台式机电脑来啦！自研主板及自研CPU处理器

    华为PC端台式机电脑来啦!自研主板及自研CPU处理器 在性能上,4核版相当于酷睿i5 ,8核版相当于酷睿i5 8300H. https://www.bilibili.com/read/cv376376 ...

  7. [转帖]统一操作系统 UOS 龙芯版上线

    统一操作系统 UOS 龙芯版上线 看评论很有必要 搞一波 深度的操作系统了https://www.oschina.net/news/112065/chinauos-with-loongson?p=4 ...

  8. Grafana邮件报警

    一.概述 报警是Grafana的一项革命性功能,它让Grafana从一个数据可视化工具变成一个真正的任务监控工具.报警规则可以使用现有的图表控制面板设置,阈值可以通过拖拉右边的线控制,非常简单.Gra ...

  9. WebApi自定义全局异常过滤器及返回数据格式化

    WebApi在这里就不多说了,一种轻量级的服务,应用非常广泛.我这这里主要记录下有关 WebApi的相关知识,以便日后使用. 当WebApi应用程序出现异常时,我们都会使用到异常过滤器进行日志记录,并 ...

  10. Git教程-安装与创建版本库

    Git是一个分布式版本控制系统,他通过命令行使用的工具,Github是提供Git仓库托管服务的网站 安装参考: https://www.liaoxuefeng.com/wiki/89604348802 ...