демохолодный день.GitHub.IO/click-color…
В проекте есть анимация загрузки при загрузке активной страницы.Эффект как на рисунке выше.Маленькие шарики цветут постоянно.Проблема в том,что она слишком застревает.Кучка маленьких шариков часто застревает в группа, поэтому они оптимизированы.
Примечание: (Только когда страница загружена, она будет зависать, а когда она загружена, она не будет зависать при нажатии)
Проверьте код, чтобы найти заимствованную анимациюanimejsЭффект на официальном сайте достигается через канвас, само собой разумеется, что канвас должен иметь хорошую производительность и не должен зависать, проблема в том, что он очень сильно зависает на моей странице активности.
После многократных размышлений, последняя причина связана с загрузкой домашней страницы.Браузер должен загружать ресурсы, отображать DOM и потреблять ресурсы процессора, в то время как холст будет выполнять множество вычислений для кадровой анимации, которая должна потреблять ресурсы ЦП и оказывать определенное давление на браузер. , личное мнение, не обязательно точное
Мое решение состоит в том, чтобы отрезать холст, использовать CSS3 и запустить аппаратное ускорение, а при создании маленького шара сделать только одну операцию.Анимация кадра реализована через переход набора преобразований, что может значительно сократить операцию js.
Плагины упакованы и имеют открытый исходный кодgithub click-colorful, весь код меньше 100 строк, вы можете посмотреть, если вам интересно, если вы думаете, что можете, просто пометьте его, это поощрение
Ниже приведена реализация основного кода
определить параметры по умолчанию
var defaultParams = {
colors: ['#eb125f', '#6eff8a', '#6386ff', '#f9f383'],
size: 30,
maxCount: 30
}
Цвет, размер и количество шариков можно свободно настроить, очень гибкий
Конструктор
function colorBall(params) {
this.params = Object.assign({}, defaultParams, params)
}
назначение параметров
функция Блума
colorBall.prototype.fly = function (x, y, playCount, loopTimer) {
if (!loopTimer) loopTimer = 300
var ballElements = []
var fragment = document.createDocumentFragment()
var ballNum = this.params.maxCount;
// 修改轮换播放实现方式，改为一次创建所有，通过延迟执行动画实现
if(playCount) {
ballNum = ballNum * playCount;
}
var loop = 0
for(var i=0; i<ballNum; i++) {
var curLoop = parseInt(i/this.params.maxCount)
var ball = doc.createElement('i');
ball.className = 'color-ball ball-loop-' + curLoop;
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) + 'px';
ball.style.top = (y) + 'px';
ball.style.width = this.params.size + 'px';
ball.style.height = this.params.size + 'px';
ball.style.position = 'fixed';
ball.style.borderRadius = '1000px';
ball.style.boxSizing = 'border-box';
ball.style.zIndex = 9999;
ball.style.opacity = 0;
if (curLoop === 0) ball.style.opacity = 1;
ball.style.transform = 'translate3d(0px, 0px, 0px) scale(1)';
ball.style.webkitTransform = 'translate3d(0px, 0px, 0px) scale(1)';
ball.style.transition = 'transform 1s ' + curLoop * loopTimer / 1000 + 's ease-out';
ball.style.webkitTransition = 'transform 1s ' + curLoop * loopTimer / 1000 + 's ease-out';
ball.style.backgroundColor = getOneRandom(this.params.colors);
fragment.appendChild(ball);
ballElements.push(ball)
// 性能优化终极版
if (curLoop !== loop) {
(function(num){
setTimeout(function(){
var loopBalls = document.getElementsByClassName('ball-loop-' + num)
for(var j = 0; j < loopBalls.length; j++) {
loopBalls[j].style.opacity = 1
}
if (num === loop) {
_clear(ballElements)
}
}, num * loopTimer + 30)
})(curLoop)
loop = curLoop
}
}
doc.body.appendChild(fragment);
// 延迟删除
!playCount && _clear(ballElements)
// 执行动画
setTimeout(function () {
for(var i=0; i<ballElements.length; i++){
_run(ballElements[i])
}
}, 10)
}
// 随机赋值运动轨迹
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 — интервал.
Реализуйте циклическое воспроизведение с задержкой вместо рекурсивного пакетного создания DOM, уменьшая перекомпоновку страниц и повышая производительность.
В функции _run мяч случайным образом перемещается во всех направлениях через случайные
Вы можете видеть, что эта функция 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 // 小球的数量
}
Как использовать
- Представьте click-colorful.js
<script src="click-colorful.js"></script> - Мощный плагин
//params不传，则走默认配置
var color = new colorBall(params)
// 绽放一次
color.fly(x, y)
// 绽放5次,间隔300ms
color.fly(x, y, 5, 300)