loading动画的性能优化-摒弃Canvas,拥抱CSS3-实现点击特效
click-colorful

项目中有个活动页加载时有个loading动画,效果如上图,连续绽放小球,问题就是太卡,经常出现一堆小球抱团卡住,遂进行优化

注意:(仅在页面加载时卡顿,加载完毕,点击的时候不卡顿)

查看代码发现改动画时借用的animejs 官网中的效果,通过canvas实现的,按理说canvas应该时性能很好的,不应该出现卡顿,问题在我的活动页中就是非常卡顿

思考再三,把最终原因归结于首页加载时候,浏览器要加载资源,渲染dom,耗费cpu,而canvas做帧动画会做大量的计算,这对cpu肯定是一种消耗,给浏览器造成一定压力,个人见解,不一定准确

我的解决办法是砍掉canvas,借助CSS3并触发硬件加速,只在创建小球的时候做一次运算,帧动画通过transform集合transition实现,这样可以大大减少js的运算,下面是核心代码实现,通过插件封装的方式上传到github click-colorful ,全部代码不到100行,刚兴趣可以看一下,觉得可以就star一下,算是鼓励

定义默认参数 var defaultParams = { colors: ['#eb125f', '#6eff8a', '#6386ff', '#f9f383'], size: 30, maxCount: 30 } 复制代码

小球的颜色,大小,数量都可以随意配置,非常灵活

构造函数 function colorBall(params) { if (params && params.colors) { this.colors = params.colors; } if (params && params.size) { this.size = params.size; } if (params && params.maxCount) { this.size = params.maxCount; } } 复制代码

参数的赋值

绽放函数 colorBall.prototype.fly = function (x, y, playCount, loopTimer) { if (playCount === -1) return var ballElements = [] var fragment = document.createDocumentFragment() for(var i=0; i<this.maxCount; i++) { var ball = doc.createElement('i'); ball.className = 'color-ball'; var blurX = Math.random() * 10 if (Math.random() > 0.5) blurX = blurX* -1 var blurY = Math.random() * 10 if (Math.random() > 0.5) blurY = blurY* -1 ball.style.left = (x + blurX) + 'px'; ball.style.top = (y + blurY) + 'px'; ball.style.width = this.size + 'px'; ball.style.height = this.size + 'px'; ball.style.position = 'fixed'; ball.style.borderRadius = '1000px'; ball.style.boxSizing = 'border-box'; ball.style.zIndex = 9999; ball.style.transform = 'translate3d(0px, 0px, 0px) scale(1)'; ball.style.webkitTransform = 'translate3d(0px, 0px, 0px) scale(1)'; ball.style.transition = 'transform 1s ease-out'; ball.style.webkitTransition = 'transform 1s ease-out'; ball.style.backgroundColor = getOneRandom(this.colors); fragment.appendChild(ball); ballElements.push(ball) } doc.body.appendChild(fragment); // 执行动画 setTimeout(function () { for(var i=0; i<ballElements.length; i++){ _run(ballElements[i]) } }, 10) // 清空dom setTimeout(function () { for(var i=0; i<ballElements.length; i++){ doc.body.removeChild(ballElements[i]) } }, 1500) // 多次播放 if (playCount > 0) { var self = this setTimeout (function () { var last = playCount - 1 self.fly(x, y, last, loopTimer) }, loopTimer) } } // 随机赋值运动轨迹 function _run(ball) { var randomXFlag = Math.random() > 0.5 var randomYFlag = Math.random() > 0.5 var randomX = parseInt(Math.random() * 160); var randomY = parseInt(Math.random() * 160); if (randomXFlag) { randomX = randomX * -1; } if (randomYFlag) { randomY = randomY * -1 } var transform = 'translate3d('+randomX+'px,' + randomY + 'px, 0) scale(0)'; ball.style.webkitTransform = transform; ball.style.MozTransform = transform; ball.style.msTransform = transform; ball.style.OTransform = transform; ball.style.transform = transform; } 复制代码

fly函数接受四个参数,x,y代码屏幕坐标,playCount是执行一次播放几轮, loopTimer是间隔

_run函数中通过random实现小球随机向四面八方运动

可以看到这个函数js计算非常少,只有在创建和删除做了一些循环。而且用了createDocumentFragment尽可能的减少了dom操作,对性能提升也有很大帮助

整体结构 function (win, doc) { "use strict"; var defaultParams = { colors: ['#eb125f', '#6eff8a', '#6386ff', '#f9f383'], size: 30, maxCount: 50 } function colorBall(params) { } colorBall.prototype.fly = function (x, y, playCount, loopTimer) { } //兼容CommonJs规范 if (typeof module !== 'undefined' && module.exports) { module.exports = colorBall; }; //兼容AMD/CMD规范 if (typeof define === 'function') define(function() { return colorBall; }); //注册全局变量,兼容直接使用script标签引入插件 win.colorBall = colorBall; })(window, document) 复制代码

至此插件封装完毕,下面是使用方式

可选参数配置

var params = { colors: ["#eb125f", "#6eff8a", "#6386ff", "#f9f383"], // 自定义颜色 size: 30, // 小球大小 maxCount: 30 // 小球的数量 } 复制代码

使用方式

<script src="click-colorful.js"></script>

//params不传,则走默认配置 var color = new colorBall(params) // 绽放一次 color.fly(x, y) // 绽放5次,间隔300ms color.fly(x, y, 5, 300) 复制代码

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:loading动画的性能优化-摒弃Canvas,拥抱CSS3-实现点击特效
本站链接:https://www.codesec.net/view/611128.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(43)