背景动画表现 [英] Background animation performance
问题描述
我正在尝试创建内容加载器,但是背景动画出现性能问题. 当屏幕上只有几个元素时,它很平滑,但是当存根元素数增加到20-30时,会急剧降低fps. 现在,我知道动画背景位置属性是个坏主意,最好对此使用转换.但是我该怎么办呢? 我想保持无缝动画.渐变应相对于屏幕而不是容器.
I'm trying to create content loader but got a performance problem with background animation. It's smooth when there are only a few elements on the screen but dramatically drops fps while increasing stub elements count to 20-30. Now I know that animating background-position property is a bad idea and it is better to use transforms for this. but how can I do this? I'd like to keep seamless animation. Gradient should be relative to screen, not to container.
这是一些代码:
const cardsRoot = document.getElementById('cards')
const addButton = document.getElementById('add')
const card = document.getElementsByClassName('card')[0]
let cardsCount = 1
addButton.addEventListener('click', () => {
cardsRoot.innerHTML = ''
cardsCount++
for (let i = 0; i < cardsCount; i++) {
let cardClone = card.cloneNode(true)
cardsRoot.appendChild(cardClone)
}
})
body {
padding: 40px;
}
.card {
display: flex;
margin-top: 20px;
}
.stub {
width: 300px;
height: 12px;
margin: 8px;
border-radius: 8px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.04) 20%) fixed;
animation: stub 1.3s linear infinite;
margin-bottom: 8px;
}
.circle {
width: 40px;
height: 40px;
margin-right: 12px;
border-radius: 20px;
}
@keyframes stub {
0% { background-position: 0vw; }
100% { background-position: 100vw; }
}
<button id="add">
ADD CARD
</button>
<div id="cards">
<div class="card">
<div>
<div class="stub circle"></div>
</div>
<div>
<div class="stub"></div>
<div class="stub"></div>
<div class="stub"></div>
</div>
</div>
</div>
和演示: https://jsfiddle.net/3da4uzm2/57/
推荐答案
您可以在应用翻译的地方使用伪元素替换动画.诀窍是考虑使用固定元素替换background-attachment:fixed
,然后将元素放大为屏幕的两倍,然后从左向右平移它.
You can replace the animation using pseudo element where you apply translation. The trick is to consider fixed element to replace background-attachment:fixed
, then you make the element twice bigger as the screen and you translate it from left to right.
const cardsRoot = document.getElementById('cards')
const addButton = document.getElementById('add')
const card = document.getElementsByClassName('card')[0]
let cardsCount = 1
addButton.addEventListener('click', () => {
cardsRoot.innerHTML = ''
cardsCount++
for (let i = 0; i < cardsCount; i++) {
let cardClone = card.cloneNode(true)
cardsRoot.appendChild(cardClone)
}
})
body {
padding: 40px;
}
.card {
display: inline-flex;
margin-top: 20px;
}
.stub {
width: 150px;
height: 12px;
margin: 8px;
border-radius: 8px;
margin-bottom: 8px;
position:relative;
z-index:0;
/*overflow:hidden; this is no more working, using mask instead */
-webkit-mask:linear-gradient(#fff,#fff);
mask:linear-gradient(#fff,#fff);
}
.stub:before {
content:"";
position:fixed;
z-index:-1;
top:0;
right:0;
width:200vw;
bottom:0;
background:
linear-gradient(rgba(0, 0, 0, 0.04),rgba(0, 0, 0, 0.04)) left/50% 100%,
linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.04) 20%) right/50% 100%;
background-repeat:no-repeat;
animation: stub 1.3s linear infinite;
pointer-events:none;
}
.circle {
width: 40px;
height: 40px;
margin-right: 12px;
border-radius: 20px;
}
@keyframes stub {
0% { transform:translate(0); }
100% { transform:translate(50%); }
}
<button id="add">
ADD CARD
</button>
<div id="cards">
<div class="card">
<div>
<div class="stub circle"></div>
</div>
<div>
<div class="stub"></div>
<div class="stub"></div>
<div class="stub"></div>
</div>
</div>
<div class="card">
<div>
<div class="stub circle"></div>
</div>
<div>
<div class="stub"></div>
<div class="stub"></div>
<div class="stub"></div>
</div>
</div>
</div>
为了更好地理解这里发生的事情,是一个简化版,其中只有一个元素,我还更改了渐变颜色.
To better understand what is happening here is a simplified version with only one element where I also changed the gradient colors.
body:before {
content:"";
position:fixed; /*relative to the screen*/
z-index:-1;
top:0;
right:0;
width:200vw; /*2x100vw*/
bottom:0;
background:
/*will cover the left area while sliding*/
linear-gradient(red,red) left/50% 100%, /*the red should be green*/
/*the main gradient*/
linear-gradient(to right, green, blue 10%, green 20%) right/50% 100%;
background-repeat:no-repeat;
animation: stub 3s linear infinite;
}
@keyframes stub {
0% { transform:translate(0); }
100% { transform:translate(50%); } /*50% will be 200vw/2 = 100vw*/
}
有关了解背景值背后的技巧的说明:在线性渐变上使用背景位置的百分比值
Related to understand the trick behind the background values: Using percentage values with background-position on a linear-gradient
这篇关于背景动画表现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!