JavaScript中简单的实现动画缓存效果

mgckid 发布于2019-08-26 10:32 / 772人阅读

摘要：动画缓存函数要移动的目标元素要移动的目标位置每次移动的频率先获取要移动的元素判断如果原本是否保存了计时器如果有的话就立刻清空重新启动一个新的计时器开始计时器先获取目标实际位置设置缓存速度每次对计算的数字进行取整防止因为精准不足而导致

/**

@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);

}

GPU云服务器云服务器 js 加载中动画效果 javascript实现动画简单的javascript js实现的简单特效

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106331.html

网页动画性能日志（一）

摘要：当用户滚动页面时，合成线程会通知主线程更新页面中最新可见部分的位图。但是，如果主线程响应地不够快，合成线程不会保持等待，而是马上绘制已经生成的位图，还没准备好的部分用白色进行填充。动画做多了，自然就要考虑性能，我打算出一个系列的日志，详细的讲解一下网页动画性能相关的知识，如果你已经可以运用css3 canvas来做动画，可以来参考一下。目前我做的最复杂的动画就是360搜索中PC端的...

zhiwei 2019-08-26 13:27 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

dailybird 2019-08-01 18:28 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

hellowoody 2019-08-22 14:02 评论0 收藏0
2017文章总结

摘要：欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径开启性能优化之旅高性能滚动及页面渲染优化理论写法对压缩率的影响唯快不破应用的个优化步骤进阶鹅厂大神用直出实现网页瞬开缓存网页性能管理详解写给后端程序员的缓存原理介绍年底补课缓存机制优化动欢迎来我的个人站点性能优化其他优化浏览器关键渲染路径 - 开启性能优化之旅高性能滚动 scroll 及页面渲染优化理论 | HTML写法...

wwolf 2019-08-29 14:21 评论0 收藏0
Webkit 渲染基础与硬件加速

摘要：网页的渲染方式主要有两种软件渲染和硬件加速渲染。而使用合成化的渲染技术，以使用软件绘图的合成化渲染为例，对于使用绘制的层，其结果保存在内存中，之后传输到中进行合成。 Webkit 渲染基础与硬件加速当浏览器加载一个 html 文件并对它进行解析完毕后，内核就会生成一个极为重要的数据结构即 DOM 树，树上每一个节点都对应着网页里面的某一个元素，并且开发人员也可以通过 JavaScri...

ivan_qhz 2019-08-22 15:14 评论0 收藏0