day16 运动（上）

day16 运动（上）

概述：
运动（动画），操作对应的dom元素发生变化（这个变化要持续多次（修改样式），每次间隔的时间是你肉眼察觉不出的（时间比较短）。当到达目标位置就停止。这个就是所谓的动画。
主要实现原理
利用定时器定时操作dom的样式
当对应的设置目标值到达以后清除对应的定时器
运动三大要素
当前值（current）
变化值 （step）
目标值 （target）
主要动画
匀速运动(每次变化的值是一样的)
示例(操作div的宽度变化)

// 操作div的宽度变化
//匀速运动每次变化的值是固定的
//获取div
var div = document.querySelector('div')
//当前值 通过获取当前的样式来获取对应的宽度
var current = parseFloat(getStyle(div).width)
//变化值
var step = 10
//目标值
var target = 500
//点击div 匀速变化他的宽度
div.onclick = function () {
var timer = setInterval(()=>{
//每次将当前值去加上变化量 完成变化
current += step
//设置给对应的div
div.style.width = current + 'px'
//到达目标位置清除定时器
if(current == target){
clearInterval(timer)
}
},40)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element){
if(window.getComputedStyle){
return window.getComputedStyle(element,'')
}else{
return element.currentStyle
}
}

封装的匀速运动代码（如果设置值不一样那么动画将不会一起完成）

//匀速运动的方法
//element表示移动的元素 target 目标位置{width:100,left:500}
function uniformVelocityAnimation(element, targetObj) {
//遍历target得到他的样式
for (let key in targetObj) {//key是字符串
//获取移动的目标样式的值
let current = parseFloat(getStyle(element)[key])
//得到目标值
let target = targetObj[key]
//步长设置 如果目标值是小于我们当前的值那么对应变化的量为负值 如果目标值大于我们当前值
那么变化量为正值
let step = target>current?10:-10
//定时更改
let timer = setInterval(() => {
//判断是否到达目标位置
if (current >= target) {
clearInterval(timer)
} else {
//每次将对应的left值更改
current += step
//重新设置div的left值
element.style[key] = current + 'px'
}
}, 40)
}
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element){
if(window.getComputedStyle){
return window.getComputedStyle(element,'')
}else{
return element.currentStyle
}
}

缓冲运动 （每次变化的值是越来越小的）
示例 （操作div的位置变化）

//div位置变化 以缓冲运动进行变化
//获取div
var div = document.querySelector('div')
//运动三要素
//当前值
let current = parseFloat(getStyle(div).left)
//目標值
let target = 500
//给div添加点击事件
div.onclick = function () {
var timer = setInterval(() => {
//如果到了就清除定时器
if (current >= target) {
clearInterval(timer)
} else {
//变化值 (目标值-当前值)/10 因为每次的值都会除10 那么对应的小数就会无限增加 就
会导致永远到不了（取整）
let step = Math.ceil((target - current) / 10)
//控制current的变化
current += step
//设置给对应的div
div.style.left = current + 'px'
}
}, 40)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
if (window.getComputedStyle) {
return window.getComputedStyle(element, '')
} else {
return element.currentStyle
}
}

缓冲封装

//缓冲运动封装
//element表示当前的元素 target表示目标对象
function bufferAnimation(element, targetObj) {
//如果element为undefined就直接报错
if(!element){
throw new Error('元素不能缺少')
}
//给元素对象添加一个属性为timer他是一个定时器
element.timer = setInterval(() => {
var flag = true
//遍历对象
for (let key in targetObj) {
//取出当前值
let current = parseFloat(getStyle(element)[key])
//取出目标值
let target = targetObj[key]
//判断当前如果是位置的变化及对应的宽度高度的变化
if(key=='width' || key == 'height' || key == 'left' || key == 'top')
{
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current) /
10):Math.floor((target - current) / 10)
current += step
element.style[key] = current + 'px'
}
//如果是透明度的变化
if(key == 'opacity'){
//步长 负值向下取整 正值向上取整
var step = target-current>0?Math.ceil((target - current) * 1000
/ 10):Math.floor((target - current)*1000 / 10)
current += step / 1000
element.style[key] = current
}
//如果是层高直接赋值
if(key == 'zIndex'){
element.style[key] = target
}
//如果没有完成就是false
if(current != target){
flag = false
}
}
//如果全部走完了就清除
if(flag){
clearInterval(element.timer)
}
},80)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
if (window.getComputedStyle) {
return window.getComputedStyle(element, '')
} else {
return element.currentStyle
}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！