javascript实现缓动动画效果
本文实例为大家分享了javascript实现缓动动画效果的具体代码，供大家参考，具体内容如下
实现思路
1、主要使用setInterval定时函数
2、给需要动画的元素添加绝对定位和偏移量，注意它的父元素要给相对定位
3、多个元素执行动画，可以将动画代码封装成一个函数
4、元素调用定时函数，定时移动，定时函数里- - -计算出每次移动距离，
公式：var step = (target - obj.offsetLeft) / 20;
obj 动画对象, target 目标左偏移量，20 控制的是动画速度，数值越大越慢，越小越快
5、定时函数里还可以接收回调函数，有的话，动画结束时执行回调函数
6、注意定时函数里最前面写上清除动画的代码- - -clearInterval(obj.timer);不写的话，每次触发元素动画会效果叠加；写上清除之前的动画影响
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>aninamate动画</title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 1000px;
margin: 0 auto;
}
button {
padding: 5px;
margin: 60px 10px;
border: 1px solid #666;
outline-color: palevioletred;
}
.both {
background-color: pink;
color: #fff;
background-color: palevioletred;
}
.box {
position: relative;
height: 210px;
margin: 0px auto;
background-color: #191b28;
}
.yutu {
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 210px;
}
.qiaojingjing {
position: absolute;
top: 0;
left: 820px;
width: 180px;
height: 210px;
}
.word1 {
display: none;
position: absolute;
top: -50px;
left: 45%;
}
.word2 {
display: none;
position: absolute;
top: -30px;
left: 50%;
}
</style>
</head>
<body>
<div class="content">
<button class="btn1">于途前进</button>
<button class="btn2">乔晶晶前进</button>
<button class="both">双向奔赴</button>
<button class="btn3">于途后退</button>
<button class="btn4">乔晶晶后退</button>
<div class="box">
<img src="images/于途.png" alt="" class="yutu">
<img src="images/乔晶晶.png" alt="" class="qiaojingjing">
<span class="word1">余生请多指教！</span>
<span class="word2">余生请多指教！</span>
</div>
</div>
<script>
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var btn3 = document.querySelector('.btn3');
var btn4 = document.querySelector('.btn4');
var both = document.querySelector('.both');
var yutu = document.querySelector('.yutu');
var qiaojingjing = document.querySelector('.qiaojingjing');
var word1 = document.querySelector('.word1');
var word2 = document.querySelector('.word2');
btn1.addEventListener('click', function() {
animate(yutu, 340, function() {
word1.style.display = 'block';
});
});
btn2.addEventListener('click', function() {
animate(qiaojingjing, 520, function() {
word2.style.display = 'block';
});
});
btn3.addEventListener('click', function() {
animate(yutu, 0, function() {
word1.style.display = 'none';
});
});
btn4.addEventListener('click', function() {
animate(qiaojingjing, 820, function() {
word2.style.display = 'none';
});
});
both.addEventListener('click', function() {
animate(yutu, 340);
animate(qiaojingjing, 520);
word1.style.display = 'block';
word2.style.display = 'block';
});
// 动画函数 obj动画对象, target目标左偏移量, callback回调函数
function animate(obj, target, callback) {
// 清除之前的动画
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 计算出每次移动距离
var step = (target - obj.offsetLeft) / 20;
// 步数取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style.left = obj.offsetLeft + step + 'px';
if (obj.offsetLeft == target) {
// 停止动画
clearInterval(obj.timer);
// 如果有回调函数，执行回调函数
if (callback) {
callback();
}
}
}, 30);
}
</script>
</body>
</html>
动画效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
javascript实现左右缓动动画函数
本文实例为大家分享了js实现左右缓动动画函数的封装代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bootstrap-4.4.1.css" > <style> .box{ width: 100px; height: 100px;
-
JavaScript实现缓动动画
JavaScript原生定时器实现动画的缓动效果,供大家参考,具体内容如下 原理很简单通过定时器修改边距达到移动动画效果 实现速度的变化 缓动必然移动速度会有变化,这里需要用到一个小公式或者说算法? 移动单位 = (指定移动位置边距 - obj.offsetLeft) / 10; var step = (ydpx - obj.offsetLeft) / 10; 有一个细节需要注意下: 移动的步数应该去掉小数,否者因为除法的原因无法移动到指定位置,会有一些差距 当step小于0对应的是向左移动舍去
-
js实现缓动动画
本文实例为大家分享了js实现缓动动画的具体代码,供大家参考,具体内容如下 利用定时器来控制元素的offsetLeft的值,offsetLeft = 开始位置 + (最终位置 - 开始位置)* 缓动系数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
-
js实现带缓动动画的导航栏效果
话不多说,请看实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> ul,li { padding: 0; margin: 0; } li { list-style: none; } #box{ height: 48px; width: 900px; bac
-
JavaScript缓动动画函数的封装方法
本文实例为大家分享了JavaScript缓动动画函数的封装代码,供大家参考,具体内容如下 本文将从封装缓动动画的以下几个部分进行封装(1.单个属性,2.多个属性,3.缓动框架之回调函数,4.缓动框架之层级与透明度) 首先:获取元素样式的兼容方式 function getStyle(ele,attr){ //获取任意类型的CSS样式的属性值 if(window.getComputedStyle){ return window.getComputedStyle(ele,null)[attr]; }
-
javascript实现缓动动画效果
本文实例为大家分享了javascript实现缓动动画效果的具体代码,供大家参考,具体内容如下 实现思路 1.主要使用setInterval定时函数 2.给需要动画的元素添加绝对定位和偏移量,注意它的父元素要给相对定位 3.多个元素执行动画,可以将动画代码封装成一个函数 4.元素调用定时函数,定时移动,定时函数里- - -计算出每次移动距离, 公式:var step = (target - obj.offsetLeft) / 20; obj 动画对象, target 目标左偏移量,20 控制的是动
-
JavaScript 详解缓动动画的封装与使用
实现过程分析 (1)如何重复调用? 答:封装一个函数,用一次调用一次 代码分析: function animate(obj, target, callback) { //详细实现步骤 }; animate :(动画函数) obj(动画对象):给谁添加动画效果 target(目标值):移动到什么距离 callback(回调函数):同时要执行什么功能 (2)如何实现缓动效果?(缓动动画核心算法) 答:移动距离 =(目标值 - 现在盒子位置)/ 10,移动距离会慢慢变小,直至停下,就实现了缓动原理 代
-
jQuery 1.9.1源码分析系列（十五）动画处理之缓动动画核心Tween
在jQuery内部函数Animation中调用到了createTweens()来创建缓动动画组,创建完成后的结果为: 可以看到上面的缓动动画组有四个原子动画组成.每一个原子动画的信息都包含在里面了. 仔细查看createTweens函数,实际上就是遍历调用了tweeners ["*"]的数组中的函数(实际上就只有一个元素). function createTweens( animation, props ) { jQuery.each( props, function( prop, v
-
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
CSS3和jquery都可以实现缓动追逐效果,但是考虑到浏览器的兼容性,建议使用jquery animate方法来实现. 先给大家展示下实现效果如下: 效果演示 源码下载 引用文件: jquery-1.11.1.min.js html <div id="container"> <div id="first"></div> <div id="second"></div> &l
-
JavaScript实现烟花绽放动画效果
先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Firework用于表示一个烟花对象,Particle用于表示一个烟花炸开后的各碎片. Firework对象类定义6个属性:表示烟花上升轨迹中各点的坐标(x,y).烟花弧状轨迹的偏转角度angle.上升阶段水平和垂直方向的位移改变量xSpeed和ySpeed.烟花的色彩色相hue. 坐标属性值y的初始值