如何获得始终如一的流畅HTML文本缩放动画?

时间:2017-06-06 00:17:56

标签: javascript html css animation css-animations

简要说明

我需要一种使用JS在HTML文档中缩放文本的方法,因此我可以轻松使用更好的缓动函数和CSS不提供的其他功能。

这是一个CodePen,它显示了4种不同的缩放动画方法,因此它们可以并排比较。最左边的一个像我想的那样顺利运行,但我正在寻找一个JS解决方案。

我在Windows 10上使用Chrome。对我来说,如果不使用HA(硬件加速),则在JS动画(包含库Velocity.js或Anime.js)期间文本会抖动。通过添加3D转换启用HA(我在父级上添加了perspective属性),它看起来很模糊(但不是紧张)。在Edge中,没有模糊,但是对于JS,文本仍然会抖动是否启用3D变换。在我的iPhone上,所有方法(CSS或JS,HA或不是)都运行得非常流畅。

我正在寻找一个像CSS一样顺畅运行的JS解决方案。我不知道这个问题是由Windows还是别的引起的,但我必须要做些什么来解决它。我真的很喜欢Velocity.js,尤其是Anime.js,想要使用它们,但是随着它的扩展,我的文字会变得紧张。

更多解释

这一切都是在我尝试使用CSS以下列方式设置<p>元素时开始的:

p {
    font-size: 2em;
    transition: all 4s;
}

p:hover {
    font-size: 6em;
}

非常简单。问题在于,随着文本改变大小,它会发抖,因为它显然会得到点数的变化。我不喜欢那样。我希望黄油光滑的动画。

所以我开始寻找找到动画文字大小的最佳方法。我已经决定答案似乎是使用某种缩放解决方案,而不是改变字体大小。

但现在我又遇到了另一个问题。我希望能够使用CSS不支持或支持非常差的功能,例如弹性和弹性缓动函数以及动画链接和队列。似乎要做到这一点的最好方法是使用JavaScript库。但现在我有一个问题。虽然只有2D变换的CSS缩放给出了我非常想要的黄油平滑,像素清晰缩放,但JavaScript库(我试过Velocity.js和Anime.js)引入了我在改变字体大小时所具有的相同的抖动行为。使用CSS或JS,如果启用了3D变换(导致浏览器使用硬件加速),则文本缩放变得模糊。

所以我整理了一个CodePen来直观地展示问题所在。以下是它们在3种浏览器中的显示方式:

Windows 10上的Chrome

  1. 完美
  2. 模糊
  3. 抖动的
  4. 模糊
  5. Windows 10上的Edge浏览器

    1. 完美
    2. 完美
    3. 抖动的
    4. 抖动的
    5. 在我的iPhone上的Chrome或Safari上由于HA处理缩放的方式而略显模糊,但模糊不易察觉,因此不是问题。

      我想要的/底线

      没有HA的纯CSS的黄油平滑动画通过3D转换,具有轻松的灵活性和动画与JavaScript库提供的样式分离。有GOT可以解决这个问题。如果CSS在第一种方法中看起来像我一样平滑,肯定有一个库使用某种类似的平滑技术来防止文本在缩放时变得紧张。对此的任何帮助都将非常感激。

0 个答案:

没有答案