动画宽度的更好解决方案

Question

我有一个文本块，我想显示文本并使块的宽度为零
我正在使用 gsap，但据我所知，动画宽度对性能不利，
因为我要经常使用这个动画，所以我担心动画宽度

那么我的小问题有更好的解决方案吗？

gsap.to('.block', {
  duration: 1, width: 0, ease: Power4.easeIn}, 0.2);

h1 {
  position: relative;
  display: inline-block
}
.block {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: black;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<h1>
  hello world
  <span class="block"></span>
</h1>

Answer 1

CSS的动画属性肯定有解决办法。使用 CSS 而不是 JavaScript (JS) 会将动画值的计算委托给浏览器的布局引擎，而不是在您的代码中重新实现它们。

在高层次上，您的动画将处于 from、to 状态，其中 from 已满宽度和 to 是 0 宽度。您可以使用 @keyframe 规则来表达这一点，您可以在其中设置动画 ANY CSS 属性。这样您就可以在不同的属性上组合 @keyframes。

这些是 CSS css-animation-101, using CSS animations

中关于动画的一些很好的介绍性说明

对于您的特定用例，应该这样做


@keyframes unveil {
   from {
       width: 100%;
   }
   to {
       width: 0%;
   }
}

.block {
    animation-name: unveil;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}

然后你可以直接在 HTML 中添加 block class 或使用一些 JavaScript 到 toggle/add [=38] =] 响应事件。

Answer 2

您可以使用 css 个动画：

function toggleAnimation() {
    $('.block').toggleClass("animated");
}

h1 {
  position: relative;
  display: inline-block
}
.block {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: black;
  width: 100%;
  height: 100%;
}

@keyframes custom-animation {
   from {
       width: 100%;
   }
   to {
       width: 0%;
   }
}

.block.animated {
    animation: custom-animation 1s ease-in 0.5s 1 normal forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  hello world
  <span class="block"></span>
  
  
</h1>

<button onclick="toggleAnimation();">Toggle animation</button>

在我的示例中，该块需要 animated class 才能实际设置动画。对于演示，我使用了一个按钮来添加这个 class.

Answer 3

可以考虑使用transform的动画效果更好

gsap.to('.block', {
  duration: 1, transform: 'translateX(-100%)', ease: Power4.easeIn}, 0.2);

h1 {
  position: relative;
  display: inline-block;
  overflow:hidden;
}
.block {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: black;
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<h1>
  hello world
  <span class="block"></span>
</h1>

Answer 4

我唯一能想到的在仍然使用 Gsap 的情况下提高性能的方法是降低块宽度过渡的持续时间，以及通过添加 [ 降低动画的 fps =21=]gsap.ticker.fps('framerate')到javascript。默认帧率为 60 fps，因此请尝试将其更改为低于该值的值。虽然我不完全确定这是否会带来巨大的改进。

gsap.ticker.fps(24); 
  //caps framerate at 24
gsap.to('.block', {duration: 0.5, width: 0, ease: Power4.easeIn}, 0.2);

h1 {
  position: relative;
  display: inline-block;
}
  .block {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: black;
  width: 100%;
  height: 100%;
}

 <!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js">
</script>
<h1>
  hello world
  <span class="block"></span>
</h1>


</body>
</html>

动画宽度的更好解决方案

Better solution for animating width

javascript

html

css

gsap