关闭

Js实现动画缓存效果

时间: 2019-07-03阅读: 708标签: 动画

js实现动画缓存效果代码如下:

<script>
/**
@description: 动画缓存 函数
@param {string} targetId - 要移动的目标元素 id
@param {number} targetPosition - 要移动的目标位置
@param {number} frequency - 每次移动的频率
*/
function move(targetId, targetPosition, frequency = 20) {
	// 先获取要移动的元素
	var targetId = document.getElementById('targetId');
	// 判断如果原本是否保存了计时器,如果有的话就立刻清空,重新启动一个新的计时器
	clearInterval(targetId.timerId);
	// 开始计时器
	targetId.timerId = setInterval(function() {
		// 先获取目标实际位置
		var curPosition = targetId.offsetLeft;
		// 设置缓存速度
		var step = (targetPosition - curPosition);
		// 每次对计算的数字进行取整 , 防止因为JavaScript精准不足而导致无限循环浪费性能
		step = Math.ceil(step);
		// 累计移动的距离
		curPosition += step;
		// 修改元素节点的位置
		targetId.style.left = curPosition + 'px';

		// 距离判断,到达目标位置时停止计时器
		if(curPosition == targetPosition) {
			// 关闭计时器
			clearInterval(targetId.timerId);
		}
	}, frequency);
}
</script>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/4486

JS动画和CSS动画

CSS实现动画:animation transition transform;JS实现动画:setInterval setTimeout requestAnimationFrame。CSS动画:优点(浏览器可以对动画进行优化)

css @keyframes属性 语法

@keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画。作用:通过 @keyframes 规则,您能够创建动画。

CSS3的变形、过渡、动画、关联属性

transform:可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix;transition-property:过度的属性;animation-name:动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义

CSS3动画transform、transition和animation的区别

CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation。transform:描述了元素的静态样式,本身不会呈现动画效果,transition样式过渡,从一种效果逐渐改变为另一种效果,animation动画 由@keyframes来描述每一帧的样式

transform 的副作用

transform是一些效果的集合,主要是移动、旋转、缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。

css3支持动画吗?

CSS3 主要可以分为几个模块:边框和背景,渐变,文字特效,字体,2D/3D转换,动画(过渡动画和动画),选择器,盒模型,多列布局,用户界面。

Vue仿微信app页面跳转动画

独立开发者在开发移动端产品时,为了更高效,通常会使用Web技术来开发移动端项目,可以同时适配Android、iOS、H5,稍加改动还可适配微信小程序。在使用Vue.js开发移动端页面的时候,默认的组件转场效果过于生硬

CSS3动画属性:transform变形

Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

CSS3实现简易牛顿摆动画

最近在练习CSS3的关键帧动画(keyframes),于是做了一个简单的牛顿摆(听名字可能陌生,但你一定见过它),实现起来并不复杂,只需对最左和最右的小球进行关键帧动画处理,同时注意应该将绳子与小球作为一个整体

用JavaScript 实现酷炫的粒子追踪动画

你是否曾经想过用花哨的、闪闪发光的粒子动画分吸引你网站用户的注意力,而同时又在后台加载一些数据呢?幸运的是,没有必要用诸如 Three.js 之类的 3D 库进行非常深入的图形编程

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!