day16运动（上）

概述：

运动（动画）操作对应的dom元素发生变化（这个变化要持续多次（修改样式））每次间隔的时间是你肉眼察觉不到的（时间比较短）当到达目标位置就停止这个就是所谓的动画

主要实现原理

利用定时器定时操作dom样式
当对应的设置目标值到达以后清除对应的定时器

运动的三大要素

当前值
变化值
目标值

主要动画

匀速运动（每次变化的值是一样的）

示例（操作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//设置给对应的divdiv.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//设置给对应的divdiv.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 += stepelement.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 / 1000element.style[key] = current}//如果是层高直接赋值if(key == 'zIndex'){element.style[key] = target}//如果没有完成就是falseif(current != target){flag = false}}//如果全部走完了就清除if(flag){clearInterval(element.timer)}},80)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {if (window.getComputedStyle) {return window.getComputedStyle(element, '')} else {return element.currentStyle}
}

day16运动（上）相关推荐

day16 运动（上）
day16 运动(上) 概述: 运动(动画),操作对应的dom元素发生变化(这个变化要持续多次(修改样式),每次间隔的时间是你肉眼察觉不出的(时间比较短).当到达目标位置就停止.这个就是所谓的动画. ...
蒸妙集团用科学熏蒸法，弥补现代人在运动上的缺乏
2019独角兽企业重金招聘Python工程师标准>>> 缺乏活动的现代人与过去的生活相比,现代生活还有一个很大的变化,那就是人的活动量大大减少. 在过去,很多事情都需要靠人力来完成 ...
妙味远程课堂-JS热身运动-上
希望某个元素移除视线 display:none//显示无 visibility:hidden//可见性隐藏 width/height 改为0 透明度定位,left/top值为负值用与背景颜色一样 ...
运动合成——机器学习技术
参考文献:<人体运动合成中的机器学习技术合成综述> 根据机器学习的用途分类,在图形学中使用到的大致如下: 1> 回归和函数逼近.回归是一种插值技术,分析已知数据点来合成新的数据 ...
c#模拟微信运动排行榜
今天又学到了一些新的知识点,用过微信的人都知道,每天晚上十点之后都会看到微信运动上的排行榜更新,其实我之前也没有用过这个,偶然一天才发现还有这种东西,每天看着微信里的好友成千上万的步数,再看看自己的真 ...
安踏携手华为运动健康共同验证冠军跑鞋创新引领中国体育
作者 | 曾响铃文 | 响铃说以创新为发展动能,安踏正在引领中国体育品牌进入蝶变时代. 8月8日,在2022年安踏创新科技大会上,安踏就发布了搭载了两项奥运核心科技--安踏氮科技中底平台与碳管悬架 ...
js-运动总结(常见运动效果)
匀速运动加速运动缓冲运动碰撞运动重力运动多物体多值多链式运动框架 1. 匀速运动速度isSpeed是个定值 function startmov(obj) {clearInterval(ti ...
小米运动睡眠数据导出并分析（python）
背景:我本身是做数据分析的,因为长期失眠所以想看看自己小米手环上面的数据,找找原因.因为小米运动上自带的报表比较粗浅,所以就想自己导出数据,深入分析一波. 1 备份小米运动并导出数据导出部分,需要感 ...
对《Phase-Functioned Neural Networks for Character Control》一文的理解(上)
该文献发表于SIGGRAPH2017,作者 DANIEL HOLDEN, University of Edinburgh.TAKU KOMURA, University of Edinburgh.JU ...

day16运动（上）

概述：

主要实现原理

运动的三大要素

主要动画

day16运动（上）相关推荐

最新文章

热门文章