javascript-匀速动画

实现思路：

主要使用定时函数setInterval()来实现动画效果
可以将动画封装成一个函数，这样可以多个元素调用，不用重复写
动画函数接收参数- - -元素对象、目标偏移量、回调函数
①函数里添加一个定时函数，给定时函数一个名字，后面清除定时函数要使用定时函数名
②定时函数里面处理程序：
a. 给一个固定的每步移动值，设置元素对象的偏移量匀速变化- - -eg: obj.style.left = obj.offsetLeft + 5 + ‘px’;
b. 判断偏移量是否达到目标值，达到的话停止动画- - -
clearInterval(obj.timer);
并且在动画停止时判断是否存在回调函数，有回调函数的话执行回调函数
在动画函数的最前面添加清除定时器函数，清除之前的动画影响- - -clearInterval(obj.timer);
有时需要点击按钮后，触发动画这种，没有添加清除的话，重复点击按钮，动画效果会叠加，越来越快
也可以将动画函数封装到js文件中进行引用

小提示：以上只是一种方法，不同动画效果根据所需进行调整实现方法

代码示例：

<!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>匀速动画</title><style>.box {position: relative;width: 1000px;margin-top: 20px;}.xiaohuli {position: absolute;top: 0;left: 0;width: 150px;height: 150px;}.pikaqiu {position: absolute;top: 150px;left: 0;width: 200px;height: 150px;}</style>
</head><body><button class="btn1">点击移动小狐狸</button><button class="btn2">点击移动皮卡丘</button><div class="box"><img src="data:images/小狐狸.jpg" alt="" class="xiaohuli"><img src="data:images/皮卡丘.jpg" alt="" class="pikaqiu"></div><script>var btn1 = document.querySelector('.btn1');var btn2 = document.querySelector('.btn2');var xiaohuli = document.querySelector('.xiaohuli');var pikaqiu = document.querySelector('.pikaqiu');btn1.addEventListener('click', function() {animate(xiaohuli, 300);})btn2.addEventListener('click', function() {animate(pikaqiu, 450);})// 动画函数     obj动画对象, target目标左偏移量, callback回调函数function animate(obj, target, callback) {clearInterval(obj.timer);obj.timer = setInterval(function() {obj.style.left = obj.offsetLeft + 5 + 'px';if (obj.offsetLeft >= target) {// 停止动画clearInterval(obj.timer);// 如果有回调函数，执行回调函数if (callback) {callback();}}}, 30);}</script>
</body></html>

页面效果：

javascript-匀速动画相关推荐

JavaScript动画：offset和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介我们知道,三大家族包括:offset/scroll/c ...
JavaScript之动画特效
一.PC端网页特效 1.1.元素偏移量offset系列 1.1.1.offset概述 offset翻译过来就是偏移量,使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 1.获得 ...
原生JavaScript中动画与特效的实现原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
JavaScript制作动画
JavaScript制作动画 <!DOCTYPE html> <html> <style> #container {width: 400px;height: 400 ...
聊聊使用 JavaScript 做动画出现卡顿的原因
前段时间在使用 JavaScript 做动画的时候发现做出来的动画会出现卡顿的现象,今天我们主要就来聊一下卡顿的原因以及如何解决这个问题. 使用定时器实现动画出现卡顿的原因主要原因是浏览器无法确定定 ...
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
使用gsap javascript进行动画和React
If there's one thing I've learned from showing my websites to non-technical friends and family it's ...
匀速动画VS缓动动画（超详细）
文章目录匀速动画匀速动画案例描述匀速动画案例图示 HTML+CSS 匀速动画JS代码匀速动画JS代码改进----函数封装缓动动画缓动动画案例描述缓动动画案例图示 HTML+CSS 缓动动 ...
javascript实现动画的联动
最近在做一个网站的时候用到了图片联动的效果,然后觉得不错,就把其中图片联动的部分copy出来分享一下,其中包含图片的左右滚动,自定义滚动条,滚动条控制图片的滚动. html部分: <!DOCTY ...

javascript-匀速动画

实现思路：

代码示例：

页面效果：

javascript-匀速动画相关推荐

最新文章

热门文章