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

栏目: Html5 · 发布时间: 5年前

内容简介:项目中有个活动页加载时有个loading动画,效果如上图,连续绽放小球,问题就是太卡,经常出现一堆小球抱团卡住,遂进行优化查看代码发现改动画时借用的animejs 官网中的效果,通过canvas实现的,按理说canvas应该时性能很好的,不应该出现卡顿,问题在我的活动页中就是非常卡顿思考再三,把最终原因归结于首页加载时候,浏览器要加载资源,渲染dom,耗费cpu,而canvas做帧动画会做大量的计算,这对cpu肯定是一种消耗,给浏览器造成一定压力,个人见解,不一定准确
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)
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

代码的未来

代码的未来

[日] 松本行弘 / 周自恒 / 人民邮电出版社 / 2013-6 / 79.00元

《代码的未来》是Ruby之父松本行弘的又一力作。作者对云计算、大数据时代下的各种编程语言以及相关技术进行了剖析,并对编程语言的未来发展趋势做出预测,内容涉及Go、VoltDB、node.js、CoffeeScript、Dart、MongoDB、摩尔定律、编程语言、多核、NoSQL等当今备受关注的话题。   《代码的未来》面向各层次程序设计人员和编程爱好者,也可供相关技术人员参考。一起来看看 《代码的未来》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具