时间戳

首页 > 解决方案 > 使用 Javascript 动画可变字体

javascript - 使用 Javascript 动画可变字体

问题描述

我正在尝试在 Javascript 中为可变字体的轴设置动画，该轴称为“FLUX”，它会影响可变字体的垂直移动。我让这部分在 CSS 中工作，但是我还希望第二个轴“wdth”对应于视口宽度。我也得到了这个工作，但在 Javascript 中。

现在的问题是两者不能同时工作。我觉得让它工作的方法是在 Javascript 中为两个轴设置动画，但是我无法弄清楚如何在 Javascript 中实现“FLUX”动画，只有 CSS。

我已经包含了一个指向我一直在处理的内容的 Codepen 链接，当 CSS 动画被禁用时，你可以看到 Javascript 工作，但启用它后，CSS 似乎会覆盖 Javascript。

https://codepen.io/Xenitos/pen/YMbboX

HTML

<html>
<head>
  <meta charset="UTF-8" />
  <title>Test Responsive Width</title>
<body>
  <div class="rapper">
    <h1 id="title">Flux</h1>
  </div>
</body>
</html>

CSS

body{
  padding: 0;
  margin: 0;
}

.rapper{
  padding: 20px;
}


#title{
  font-size: 20vw;
  color: black;
  font-family:"Flux";
  text-transform:uppercase;
  font-variation-settings: 'wdth' 400;
  animation: title infinite;
  animation-duration: 15s;
  animation-timing-function: ease;
}

@keyframes title  {
0%   {font-variation-settings:"FLUX" 400 ; }
50%   {font-variation-settings:"FLUX" 700 ; }
100% {font-variation-settings:"FLUX" 400 ;}
    }

JAVASCRIPT

$( document ).ready(function() {
  // Variables
  var $window = $(window);

  $window.resize(function(){

    $('#title').css('fontVariationSettings', "'wdth'" + ($window.width()-450)*100/(1920-450)*4);

  })
});

// End temp code for seeing browser width

预期的结果是 viewwidth 链接到字体的“wdth”轴，并且“FLUX”轴在循环上无限动画。

有什么我遗漏的，或者有人可以帮我完全用Javascript完成这个吗？

标签： javascriptcssvariablesfonts

解决方案

问题是font-variation-settings它将重置未明确设置的每个轴。

例如，在您的 CSS 中，您设置font-variation-settings: 'wdth' 400; 了一个更改的动画font-variation-settings: "FLUX" 400;。您会期望这些会结合起来，但可惜的是：动画不包含值wdth，因此一旦动画开始，它将立即重置为其默认值。

JavaScript 部分也是如此：CSS 和 JavaScript 都在争夺 set font-variation-settings，每个都撤消对方的设置。

因此，在每一步设置这两个值都很重要。

（让 JavaScript 和 CSS 协同工作的提示：不要直接font-variation-settings从 JavaScript 写入，而是写入 CSS 变量并在 CSS/动画中使用它。）

推荐阅读