Рубрики
Без рубрики

Создайте анимацию кинетической печати JavaScript со сценой.

Я пишу сообщение, чтобы сообщить вам, что я добавил эффект набора текста на библиотеку эффектов Scene.js. https: // g … Помечено JavaScript, CSS, Codepen, Opensource.

Я пишу сообщение, чтобы сообщить вам, что я добавил эффект набора текста на библиотеку эффектов Scene.js. https://github.com/daybrush/scenejs-effects

В этой статье я хочу представить принципы печатать анимацию.

Печатать анимацию

Есть три типичных способа сделать печать анимации.

  1. Анимация JavaScript
  2. Анимация CSS (только на PC Chrome)
  3. SVG анимация

Анимация, которая будет описана в этой статье, является JavaScript. Потому что это проще, чем я думал.

Анимация CSS также может создавать анимацию набора текста, используя Pseudo и свойства Pseudo PseuDO до или после Pseudo. Однако, поскольку это селектор, который поддерживает только Chrome PC, это слишком много для использования.

Если ваш браузер PC Chrome, вы увидите анимацию ниже.

Набор анимации – это способ импортирования текста последовательно в HTML, как показано ниже.

const text = "Make a typing effect with Scene.js.";
const length = text.length;
for (let i = 0; i <= length; ++i) {
    element.innerHTML = text.substring(start, i);
}

Как только вы создаете анимацию ввода, используя SCEEN.JS, вы можете написать код следующим образом:

Scene.typing({ text: "Make a typing effect with Scene.js." });

Играйте в вышеуказанный код, и он будет выглядеть следующим кодепеном:

Кинетическая анимация

В дополнение к печати анимации, он пытается иметь кинетический эффект.

Кинетический эффект перемещает точку происхождения в противоположном направлении. Точка происхождения, кажется, фиксирована, но движется.

.kinetic {
    transform: translate(20px, -40px);
    transform-origin: calc(50% - 20px) calc(50% + 40px);
}

Как только вы создаете кинетическую анимацию с помощью SCEEN.JS, вы можете написать код следующим образом:

Scene.kineticFrame({ left: "20px", top: "-40px" });

Играйте в вышеуказанный код, и он будет выглядеть следующим кодепеном:

Кинетическая печатая анимация

Наконец, добавьте печатать анимацию вовремя для кинетического эффекта.

scene.set({
  "[data-typing='i']": Scene.typing({ text: "I ", duration: 1}),
  "[data-typing='frontend']": {
    1: Scene.typing({ text: "'m Front-End", duration: 1}),
  },
  "[data-typing='engineer']": {
    1.5: Scene.typing({ text: "Engineer", duration: 1}),
  },
  "[data-typing='with']": {
    3.3: Scene.typing({ text: "with", duration: 0.5}),
  },
  // ...
});

Наконец, если вы привязываете эффект печатания к кинетическому эффекту, будет выглядеть следующим образом:

Проверьте мои проекты по следующей ссылке. https://github.com/daybrush/scenejs https://github.com/daybrush/scenejs-effects

Если вам это нравится, нажмите звезду.

Если у вас есть функции или вопросы, которые вы хотите, пожалуйста, зарегистрируйте проблему или записать вопросы в любое время.

Спасибо

Оригинал: “https://dev.to/daybrush/create-a-javascript-kinetic-typing-animation-with-scene-js-4jik”

Читайте ещё по теме: