js——封装函数（包括动画封装）

新推荐 requestAnimationFrame 函数

匀速动画

let target = document.getElementById('fun')
target.onclick = function () {
let start = null
let timer = null
let step = (time, len = 800) => {
if (!start) start = time
let progress = time - start
target.style.left = Math.min(progress, len) + 'px'
if (progress < len) {
timer = window.requestAnimationFrame(step)
}
if (progress > 200) {
window.cancelAnimationFrame(timer)
}
}
window.requestAnimationFrame(step)
}

加速动画（滚动）

scrollDownAnimation(val) {
let [timer, start, step] = [null, null, null];
step = (time, len = val) => {
if (!start) start = time;
const progress = Math.pow(time - start, 1.35);
window.scrollTo(0, Math.min(progress, len));
if (progress < len) {
timer = window.requestAnimationFrame(step);
}
if (progress > len) {
window.cancelAnimationFrame(timer);
}
};
window.requestAnimationFrame(step);
}
scrollUpAnimation(aim, current) {
let [timer, start, step] = [null, null, null]
step = (time, len = aim) => {
if (!start) start = time
const progress = current - Math.pow(time - start, 1.35)
window.scrollTo(0, Math.max(progress, len))
if (progress > len) {
timer = window.requestAnimationFrame(step)
}
if (progress < len) {
window.cancelAnimationFrame(timer)
}
}
window.requestAnimationFrame(step)
}

往复动画

const step = (time, len = 10) => {
if (!start) start = time
if (!progress) progress = 0
ctx.clearRect(0, 0, width, height)
// 复原
if (progress < 0) [progressFlag, start, progress, time] = [true, null, null, 0]
// 增加
if (progress < len && progressFlag) {
progress = (time - start) * .01
move(progress)
}
// 减少
if (progress >= len || !progressFlag) {
progressFlag = false
progress -= len * .01
move(progress)
}
requestAnimationFrame(step)
}
requestAnimationFrame(step)

早期封装

/**
* 获取滚动的头部距离和左边距离
* 用法scroll().top/scroll().left
* @returns {{top: number, left: number}}
*/
function scroll() {
if (window.pageXOffset !== null) {//ie9+和最新浏览器
return {
top: window.pageYOffset,
left: window.pageXOffset
}
} else if (document.compatMode === 'CSS1Compat') {//w3c严格模式
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
}
//怪异模式
return {
top: document.body.scrollTop,
left: document.body.scrollLeft
}
}
/**
* 获取屏幕宽高
* @returns {{width: number, height: number}}
*/
function client() {
if (window.innerWidth) {//ie9和最新浏览器
return {
width: window.innerWidth,
height: window.innerHeight
}
} else if (window.compatMode === 'CSS1Compat') {//w3c严格模式
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return {//怪异模式
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
console.log(client().height);
//阻止冒泡
if (event && event.stopPropagation) {//w3c
event.stopPropagation();
} else {//ie678
event.cancelBubble = true;
}
//显示和隐藏
function show(obj) {
return obj.style.display = 'block';
}
function hide(obj) {
return obj.style.display = '';
}
//获取选中的内容
var selectText;
if (window.getSelection) {
selectText = window.getSelection().toString();
} else {
selectText = document.selection.createRange().text;
}
//防止拖动选中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
//获取ID
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : null;
}
/**
* 遍历arr（数组或对象）输出在控制台
* @param arr
*/
function traversal(arr) {
if(arr instanceof Object){
for (var key in arr){
console.log(key);
console.log(arr[key]);
}
}else if(arr instanceof Array){
arr.forEach(function (item,val) {
console.log(item,val);
})
}
}

缓动动画公式：起始值 += （结束 - 起始）* 缓动系数

缓动系数越大越快一般0~1之间
定时器设置1~10之间

/**
* 匀速动画
* @param ele 元素
* @param target 目标值
* @param speed 步长
*/
function constant(ele, target, speed) {
//clear
clearInterval(ele.timer);
//判断方向
var dir = ele.offsetLeft <= target ? speed : -speed;
//set
ele.timer = setInterval(function () {
ele.style.left = ele.offsetLeft + dir + 'px';
//矫正speed引起误差和清除
if (Math.abs(target - ele.offsetLeft) <= Math.abs(dir)) {
clearInterval(ele.timer);
ele.style.left = target + 'px';
}
}, 20)
}
/**
* 获取css属性值
* @param obj
* @param attr (string)
* @returns {*}
*/
function getCssValue(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
}
else {
return window.getComputedStyle(obj, null)[attr];
}
}
/**
* 封装 缓动动画（要结合getCssValue一起使用）
* @param obj
* @param attr (string)
* @param target
*/
function action(obj, attr, target) {
//clear
clearInterval(obj.timer);
//set
var speed = 0,begin=0;
obj.timer = setInterval(function () {
begin = parseInt(getCssValue(obj, attr));
//speed
speed = (target - begin) * 0.2;
//check
speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
//act
obj.style[attr] = begin + speed + 'px';
obj.innerText = begin;
//clear
if (begin === target) {
clearInterval(obj.timer);
}
}, 50)
}
/**
* 封装 缓动动画（JSON遍历）（要结合getCssValue一起使用）
* @param obj
* @param json
*/
function action2(obj, json) {
//clear
clearInterval(obj.timer);
//set
var speed = 0,begin=0;
obj.timer = setInterval(function () {
//check
var flag=true;
for(var k in json){
begin = parseInt(getCssValue(obj, k));
//speed
speed = (json[k] - begin) * 0.2;
//check
speed = (json[k] > begin) ? Math.ceil(speed) : Math.floor(speed);
//act
obj.style[k] = begin + speed + 'px';
obj.innerText = begin;
//clear
if(json[k] !== begin ) {
flag=false
}
}
if(flag){
clearInterval(obj.timer);
}
}, 50)
}
/**
* 封装 缓动动画（回调+透明度变化）（要结合getCssValue一起使用）
* @param obj
* @param json
* @param fn
*/
function action3(obj, json, fn) {
//clear
clearInterval(obj.timer);
//set
var speed = 0, begin = 0, target = 0;
obj.timer = setInterval(function () {
//check
var flag = true;
for (var k in json) {
if ('opacity' === k) {
begin = Math.round(getCssValue(obj, k) * 100);
target = parseInt(json[k] * 100);
} else {
begin = parseInt(getCssValue(obj, k));
target = parseInt(json[k]);
}
speed = (target - begin) * .2;
//check
speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
if ('opacity' === k) {
//w3c
obj.style.opacity = (begin + speed) / 100;
//ie opera
obj.style.filter = "alpha(opacity:" + (begin + speed) + ")";
} else {
//act
obj.style[k] = begin + speed + 'px';
}
//clear
if (target !== begin) {
flag = false
}
}
if (flag) {
clearInterval(obj.timer);
//判断回调
if (fn) {
fn();
}
}
}, 50)
}

最后

以上就是畅快嚓茶为你收集整理的js——封装函数（包括动画封装）的全部内容，希望文章能够帮你解决js——封装函数（包括动画封装）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。