js——パッケージ関数(アニメーションパッケージを含む)
51314 ワード
新オススメrequest Animation Frame関数
禁アニメ
緩動係数が大きいほど、一般的に0～1の間のタイマーは1～10の間に設定されます.
禁アニメ
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)
}