如何解决Safari 中的 Javascript 动画真的很慢,但 Chrome 工作正常
我正在使用一个名为 paper js 的 javascript 库来渲染标签上图块中的图像。然后,您可以拖动鼠标以向任何方向滚动视图,图块将“无休止地”流动。它有效,但我不是真正的专业人士或任何东西,所以我很想知道我的代码的想法以及可能为什么它在 Safari 上运行非常缓慢,但在 Chrome 上运行良好。我也很想听听关于代码的想法。我知道这是很多代码,所以如果您花时间检查一下,我将非常感激。哦,这是在 wordpress 网站上运行的,所以它有一些 jQuery。如果我能澄清任何事情,请告诉我。谢谢。
import paper from 'paper';
import axios from 'axios';
// I have another file that runs specifically on the homepage where I can homepageCanvas()
export function homepageCanvas() {
// Get a reference to the canvas object <canvas id="homeGrid" resize></canvas>
let canvas = document.getElementById('homeGrid');
paper.setup(canvas);
function drawImagePattern(projectData,reshuffle = false,fullColor = false) {
if (!projectData) return; // abort,doesn't exist
let totalProjects = projectData.projects.length;
let gridTotal = 40;
let gridWidth = gridTotal*0.25;
let gridHeight = gridTotal/gridWidth;
let counter = 0;
let xOffset = 0;
let yOffset = 0;
let offset = {
x: xOffset,y: yOffset,};
let tweens = [];
if (!reshuffle) {
paper.view.size.width = gridWidth * (screenSizeWidthAdjustment(projectData.projects[0]) + screenSizeGutteradjustment(projectData.gutter)) - 10;
paper.view.size.height = gridHeight * (screenSizeHeightAdjustment(projectData.projects[0]) + screenSizeGutteradjustment(projectData.gutter)) - 10;
}
function screenSizeWidthAdjustment(project) {
if ($(window).width() <= 1024 && $(window).width() > 600) {
return project.tablet_thumbnail[1];
}
if ($(window).width() <= 600) {
return project.mobile_thumbnail[1];
}
return project.thumbnail[1];
}
function screenSizeHeightAdjustment(project) {
if ($(window).width() <= 1024 && $(window).width() > 600) {
return project.tablet_thumbnail[2];
}
if ($(window).width() <= 600) {
return project.mobile_thumbnail[2];
}
return project.thumbnail[2];
}
function screenSizeSrcAdjustment(project) {
if ($(window).width() <= 1024 && $(window).width() > 600) {
return project.tablet_thumbnail[0];
}
if ($(window).width() <= 600) {
return project.mobile_thumbnail[0];
}
return project.thumbnail[0];
}
function screenSizeGutteradjustment(gutter) {
if ($(window).width() <= 1024) {
return gutter * .5;
}
return gutter;
}
for (let j = 0; j < gridTotal; j++) {
if (counter % totalProjects == 0) {
counter = 0;
}
if (!screenSizeWidthAdjustment(projectData.projects[counter]) || !projectData.projects[counter]) return; // abort,doesn't exist
let title = new paper.PointText({
content: projectData.projects[counter].Meta.title,opacity: 0,fontWeight: 'bold',fontSize: '13px',name: 'title',reference: 'rect-1-title',fillColor: '#fff',});
let tagline = new paper.PointText({
content: projectData.projects[counter].Meta.tagline,fontWeight: 'lighter',reference: 'rect-1-tagline',name: 'tagline',});
//create image
let raster = new paper.Raster({
source: screenSizeSrcAdjustment(projectData.projects[counter]),width: screenSizeWidthAdjustment(projectData.projects[counter]),height: screenSizeHeightAdjustment(projectData.projects[counter]),name: 'raster',opacity: 0.7,reference: 'rect-1-raster',});
//create rectangle to create the grayscale effect
let rect = new paper.Path.Rectangle({
width: screenSizeWidthAdjustment(projectData.projects[counter]),fillColor: fullColor == false ? '#000000' : 'rgba(0,0.0001)',opacity: 1,blendMode: 'hue',name: 'rect-1',referenceNumber: j,permalink: projectData.projects[counter].Meta.permalink,});
//calculate xOffset and yOffset
xOffset = screenSizeWidthAdjustment(projectData.projects[counter]) + screenSizeGutteradjustment(projectData.gutter) + offset.x;
if (j % 10 == 0) {
xOffset = 0;
yOffset = String(j).charat(0) * (screenSizeHeightAdjustment(projectData.projects[counter]) + screenSizeGutteradjustment(projectData.gutter));
}
// RESET OFFSET
offset = {
x: xOffset,};
//image position
raster.bounds.left = paper.view.size.width/3;
raster.position.y = paper.view.size.height/2.5;
//image grey blend rect position
rect.bounds.left = paper.view.size.width/3;
rect.position.y = paper.view.size.height/2.5;
//image Meta title position
title.bounds.left = paper.view.size.width/3;
title.bounds.bottom = paper.view.size.height/2.5;
//image Meta tagline position
tagline.bounds.left = paper.view.size.width/3;
tagline.bounds.bottom = paper.view.size.height/2.5;
let tweenRaster = raster.tweenTo({
'bounds.left': offset.x,'position.y': offset.y,},{
duration: 1000,start: false,easing: 'eaSEOutCubic',});
let tweenRect = rect.tweenTo({
'bounds.left': offset.x,});
let tweenTitle = title.tweenTo({
'bounds.left': offset.x,'position.y': offset.y + raster.height/2 + 17,});
let tweenTagline = tagline.tweenTo({
'bounds.left': offset.x,'position.y': offset.y + raster.height/2 + 34,});
tweens.push(tweenRaster,tweenRect,tweenTitle,tweenTagline);
//setup the static click on an image take it to post permalink
let downPos = {};
rect.onMouseDown = (event) => {
downPos = event.point;
}
rect.onmouseup = function(event) {
let upPos = event.point;
let delta = upPos.subtract(downPos);
if (delta.x == 0 && delta.y == 0) {
window.location.href = this.permalink;
}
}
counter++;
}
let rects = paper.project.getItems({
class: 'Path',});
let raster = paper.project.getItems({
class: 'Raster',});
let titles = paper.project.getItems({
class: 'PointText',});
let taglines = paper.project.getItems({
class: 'PointText',});
rects.map((rect) => {
rect.onMouseEnter = function() {
if (!scrolling) {
this.tweenTo({
opacity: 0,200);
raster[this.referenceNumber].tweenTo({
opacity: 1,200);
titles[this.referenceNumber].tweenTo({
opacity: 1,350);
taglines[this.referenceNumber].tweenTo({
opacity: 1,350);
} else {
this.opacity = 1;
titles[this.referenceNumber].opacity = 0;
taglines[this.referenceNumber].opacity = 0;
}
};
rect.onMouseLeave = function() {
setTimeout(() => {
this.tweenTo({
opacity: 1,200);
raster[this.referenceNumber].tweenTo({
opacity: 0.7,200);
titles[this.referenceNumber].tweenTo({
opacity: 0,// 'bounds.bottom': this.bounds.bottom,350);
taglines[this.referenceNumber].tweenTo({
opacity: 0,350);
},200);
};
});
setTimeout(() => { $('#homeGrid').addClass('active'); },200);
for (let q = 0; q < tweens.length; q++) {
tweens[q].start();
}
}
// This is setting up for a "toss" effect with the mouse.
// You can click,drag,unclick and depending on how far and fast you do that the screen will continue scrolling a little
let viewDownPos = {};
let downTime = '';
paper.view.onMouseDown = (event) => {
viewDownPos = event.point;
downTime = event.timeStamp;
}
paper.view.onmouseup = (event) => {
let viewUpPos = event.point;
let delta = viewUpPos.subtract(viewDownPos);
let timedelta = Math.abs(downTime - event.timeStamp);
for (let i = 0; i < paper.project.activeLayer.children.length; i++) {
let item = paper.project.activeLayer.children[i];
if (timedelta < 350) {
item.tween({
'position.x': ['+=',delta.x/3],'position.y': ['+=',delta.y/3],{
easing: 'eaSEOutCubic',duration: 350,});
}
if (timedelta > 350 && timedelta < 600) {
item.tween({
'position.x': ['+=',delta.x/5],delta.y/5],});
}
if (timedelta > 650 && timedelta < 1000) {
item.tween({
'position.x': ['+=',delta.x/8],delta.y/8],});
}
}
}
let scrolling = false;
paper.view.onMouseDrag = function (event) {
scrolling = true;
$('.home-holder .explanation').addClass('hide-me');
for (let i = 0; i < paper.project.activeLayer.children.length; i++) {
let item = paper.project.activeLayer.children[i];
item.position.x += event.delta.x;
item.position.y += event.delta.y;
if (item.name == 'tagline' || item.name == 'title') {
item.opacity = 0;
}
if (item.name == 'rect') {
item.tweenTo({
opacity: 1,200);
}
//swiping to right
if (item.position.x > paper.view.size.width) {
item.position.x = item.position.x - paper.view.size.width;
}
//swiping to left
if (item.position.x < 0) {
item.position.x = paper.view.size.width + item.position.x;
}
//swiping to up
if (item.position.y < 0) {
item.position.y = item.position.y + paper.view.size.height;
}
//swiping to down
if (item.position.y > paper.view.size.height) {
item.position.y = item.position.y - paper.view.size.height;
}
}
setTimeout(function() {
scrolling = false;
},750);
}
$(window).on('wheel',function(e) {
scrolling = true;
$('.home-holder .explanation').addClass('hide-me');
for (let i = 0; i < paper.project.activeLayer.children.length; i++) {
let item = paper.project.activeLayer.children[i];
item.position.x -= e.originalEvent.deltaX;
item.position.y -= e.originalEvent.deltaY;
if (item.name == 'tagline' || item.name == 'title') {
item.opacity = 0;
}
if (item.name == 'rect') {
item.tweenTo({
opacity: 1,750);
});
if ($(window).width() > 1024) {
$('.home-holder .project-types').on('mouSEOver',function() {
if (!scrolling) {
$('.home-holder').addClass('category-hover');
}
});
} else {
$('.home-holder .project-types').removeClass('active');
$('.home-holder .project-types').on('click',function(e) {
if (!scrolling) {
e.preventDefault();
$('.home-holder .project-types').toggleClass('active');
$('.home-holder').toggleClass('category-hover');
}
});
}
if ($(window).width() > 1024) {
$('.home-holder .project-types').on('mouseleave',function() {
$('.home-holder').removeClass('category-hover');
});
}
$('.home-holder .project-types li').on('click',function() {
if (!$('.home-holder').hasClass('category-hover')) { return false; }
$('.home-holder .project-types li').removeClass('active');
$(this).addClass('active');
$('.home-holder .project-types').css('pointer-events','none');
setTimeout(() => { $('.home-holder .project-types').css('pointer-events','all'); },1500);
if ($(window).width() > 1024) {
$('#homeGrid').removeClass('active');
$('.home-holder').removeClass('category-hover');
} else {
setTimeout(function() {
$('#homeGrid').removeClass('active');
$('.home-holder').removeClass('category-hover');
$('.home-holder .project-types').removeClass('active');
},250);
}
setTimeout(() => { $('.home-holder .project-types').css('pointer-events',1500);
let projectType = $(this).data('type');
if (projectType == 'show-all') {
setTimeout(() => { getProjects(); },500);
} else {
setTimeout(() => { getProjects(projectType); },500);
}
});
let thumbnailData = new FormData;
thumbnailData.append('action','get_project_data');
function getProjects(projectType = false) {
if (projectType) {
let categoryData = new FormData;
categoryData.append('project_type',projectType);
categoryData.append('action','get_project_data_by_project_type');
axios({
method: 'post',url: ajax_url,withCredentials: true,data: categoryData,})
.then((response) => {
paper.project.clear();
return drawImagePattern(response.data,true,true);
})
.catch((error) => {
console.log(error);
});
} else {
axios({
method: 'post',data: thumbnailData,})
.then((response) => {
paper.project.clear();
return drawImagePattern(response.data);
})
.catch((error) => {
console.log(error);
});
}
}
//for some reason it doesn't render the very first post,so I have to remove then rerender...
getProjects();
$(window).on('resize',function() {
paper.project.clear();
getProjects();
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。