В framer-motion, как анимировать чистые данные, такие как числа от 0 до 100? - PullRequest
Новая
       24

В framer-motion, как анимировать чистые данные, такие как числа от 0 до 100?

0 голосов
/ 13 февраля 2020 
<motion.div>
{num}
</motion.div>

В режиме framer-анимации стили анимации довольно просты, но как я могу анимировать чистое число, я хочу от 0 до 100 с помощью конфигурации перехода, как я могу это сделать?

1 Ответ

1 голос
/ 04 марта 2020

В настоящее время Framer Motion может только анимировать CSS атрибуты узлов DOM. В его трекере есть предложенная функция, которая упоминает произвольные «безголовые анимации» .

. До тех пор я думаю, что вам придется использовать библиотеку более низкого уровня, такую ​​как Popmotion : 

import { spring } from "popmotion"; 

const node = document.getElementById("counter");

spring({
  from: 0,
  to: 100,
  stiffness: 200,
  damping: 40
}).start({
  update(value) {
    node.textContent = value.toFixed(2);
  }
});

CodeSandbox

Обратите внимание, что Framer Motion основан на Popmotion, поэтому вы можете использовать эту библиотеку, не увеличивая размер пакета.

...