[Анимация] Двигайся как хочешь, вместо меня ты должен слушать меня

внешний интерфейс анимация CSS d3.js

Переход и анимация — важные атрибуты для создания анимации DOM-элемента в CSS3, но они могут удовлетворить лишь некоторые общие требования, а переходить атрибуты не-DOM-элементов бессильно, поэтому следующий шаг — просто реализовать его принцип анимации через js. (прямо говоря. То есть косвенно манипулировать значением целевого свойства перехода через JavaScript и обновлять его время от времени), чтобы сделать анимацию более гибкой и управляемой, вместо того, чтобы говорить отвратительному pm, какой смысл в этом эффект и отключать его, естественно, должно быть См. сценарии использования

Сначала дайте демонстрацию: как добиться такого спроса?

На чистом css сделать это явно невозможно (картинка немного искажается,Онлайн-краудфандинг для Mac, смысл на месте~)

Простой обзорНа картинке выше макет реализован с помощью d3.Обычные плагины визуальной графики (такие как ECharts, ichartjs и т. д.) могут быть невозможны из-за простой настройки. Для школьников, знакомых с d3, реализовать не составит большого труда.Основная картина на рисунке, как реализовать смену чисел и эффект цветового градиента дуги, а также общую навеску. Принцип анимации описан ниже с помощью js, что упрощает освоение перехода CSS и анимации анимации.

Есть много статей о введении свойств перехода и анимации.Свойства анимации CSS3

Затем используйте js, чтобы просто реализовать эффект анимации, который изменяет атрибут ширины элемента div с 20 пикселей на 200 пикселей.

HTML-код

<div id="motionPath"></div>

css-код

#motionPath {
  width: 20px;
  height: 100px;
  color:#333;
  background-color: red;
}

Прежде чем приступить к реализации, сначала кратко ознакомьтесь с принципом ссылки на кривую Безье.Кривая Безье Грамотность, разобравшись с принципом, порекомендуйте js-библиотеку, реализующую кубические кривые БезьеCubicBezier, которая также является функцией анимации, используемой ниже, эквивалентной функции синхронизации перехода CSS, функции синхронизации анимации

Сначала определите несколько параметров анимации перехода:

  1. paused: управляет флагом паузы анимации.
  2. продолжительность: время перехода анимации
  3. easing: кривая перехода анимации, настройка общей ссылки на кривую перехода анимацииФункция ослабления
  4. update: функция обратного вызова при обновлении анимации
var BezierEasing = require('bezier-easing')
var tween = {
  paused: false,
  duration: 6000,
  easing: BezierEasing(0, 0, 1, 0.5),
  update: function (v) {
    // anim 是下文定义的一个描述动画的对象
    anim.target.innerHTML = v
  }
}

Определить функцию запуска анимации play()

var raf = null
function play() {
  raf = requestAnimationFrame(function (t) {
    step(t);
  })

  function step(t) {
    if (!tween.paused) {
      setInstanceProgress(t);
      play();
    } else {
      raf = cancelAnimationFrame(raf);
    }
  }
}

step() — вход анимации.Здесь используется функция анимации ключевого кадра requestAnimationFrame.Конечно, setTimeout можно использовать и для симуляции реализации, но более рекомендуется использовать requestAnimationFrame.Рекомендуется прочитатьГлубокое понимание requestAnimationFrame. Функция setInstanceProgress() будет вызываться в каждом цикле ключевого кадра анимации Давайте рассмотрим реализацию функции setInstanceProgress().

function setInstanceProgress(engineTime) {
  var insTime = engineTime;

  if (insTime > tween.duration) {
    tween.paused = true;
  }

  var currentTime = Math.min(Math.max(insTime, 0), tween.duration);
  
  setAnimationsProgress(currentTime);
}

Функция setInstanceProgress() корректирует время анимации и в то же время определяет, должна ли анимация закончиться, и передает исправленное время функции setAnimationsProgress(). Давайте также посмотрим на реализацию функции setAnimationsProgress(). Мы знаем, что анимация на самом деле является «перемещением». О функции «время»: s=f(t) связывает функцию анимации со временем и вычисляет значение атрибута анимации f(t) в момент времени t.

Далее определите объект, описывающий анимацию.Значение следующих параметров:

  1. target: целевой объект перехода, в настоящее время элемент div
  2. type: тип целевого свойства перехода, ширина элемента объединена с css
  3. свойство: имя свойства целевого перехода, которое является шириной элемента
  4. fromNumber: начальное значение свойства перехода — 20px.
  5. toNumber: конечное значение свойства перехода составляет 200 пикселей.
var anim = {
  target: document.getElementById('motionPath'),
  type: 'css',
  property: 'width',
  fromNumber: 20,
  toNumber: 200
}

Функция setAnimationsProgress()

function setAnimationsProgress(insTime) {
  var elapsed = insTime / tween.duration;

  var eased = tween.easing(elapsed);

  var value = anim.fromNumber + (eased * (anim.toNumber - anim.fromNumber))

  setProgressValue[anim.type](anim.target, anim.property, value);
  
  tween.update(value);
}

Функция setAnimationsProgress() также является ядром анимации, которая объединяет функции времени и перехода для вычисленияtЗначение значения, соответствующее времени, а затем установите значение значения для атрибута целевого объекта перехода, а затем реализация setProgressValue для элементов DOM, установка атрибута ширины для установки атрибута, соответствующего стилю

var setProgressValue = {
  css: function (t, p, v) {
    t.style[p] = v + 'px'
  },
  plainkey: function (t, p, v) {
    t[p] = v
  }
}

Наконец, нужно только запустить функцию play(), будет реализована простая анимация, эффект будет следующим:

Если мы хотим изменить значение ключевого атрибута в объекте plain={key: 0} с 0 на 100, можем ли мы просто изменить параметр anim следующим образом:

var plain = {key: 0}
var anim = {
  target: plain,
  type: 'plainkey',
  property: 'key',
  fromNumber: 0,
  toNumber: 200
}

Я не буду приводить рендеринг изменения значения ключа.Короче говоря, через такую ​​простую конфигурацию решается, что CSS не может достичь подобных требований.Эффект цифрового изменения, упомянутого в начале статьи, прекрасно решен.

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

Пример: измените цвет с #e8cf22 на #48b532, примените упомянутый выше принцип анимации перехода, формат rgb, соответствующий #e8cf22, — rgb(232, 207, 34), а формат rgb, соответствующий #48b532, — rgb(72, 181, 50)), затем измените значения R, G и B соответственно в соответствии с соответствующим начальным значением и соответствующим конечным значением (R: от 232 до 72, G: от 207 до 181, B: от 34). до 50), процесс перехода Соответствующее значение rgb в комбинации - это значение цвета, соответствующее его переходу. Это принцип перехода цвета и градиента. Следующее использованиеanimejsЭто библиотека для достижения, принцип тот же

HTML-код

<div id="motionPath"></div>

css-код

#motionPath {
  color: blue;
  height: 100px;
}

js-код

var oDev = document.getElementById('motionPath')
anime({
  targets: '#motionPath',
  duration: 6000,
  backgroundColor: ['rgb(232, 207, 34)', 'rgb(72, 181, 50)']
  easing: 'easeInOutQuad',
  update: function (instance) {
    oDev.innerHTML = instance.animations[0].currentValue;
  }
});

Эффект следующий:

Подводя итог: после понимания того, как js реализует анимацию, давайте посмотрим на пример использования анимации css3, и рендеры не будут торчать. Следующий пример кода:

// div
<div class="animation"></div>

// css
.animation
{
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: myfirst 4s;
  animation-timing-function: cubic-bezier(0.42,0,0.58,1);
}
@keyframes myfirst
{
  0%   {background:red; left:0px; top:0px;}
  25%  {background:yellow; left:200px; top:0px;}
  50%  {background:blue; left:200px; top:200px;}
  75%  {background:green; left:0px; top:200px;}
  100% {background:red; left:0px; top:0px;}
}

/*
    效果表现为：让一个长宽都是100px的div元素，在不同的时间阶段，结合过渡函数cubic-bezier(0.42,0,0.58,1)来进行颜色和位置的过渡变化，
 那么我想问0%、25%、50%、75%、100%指什么呢，过渡函数cubic-bezier(0.42,0,0.58,1)是应用到整个4s的过渡周期还是每个阶段应用一次完整的过渡？ 
 
 答案：n%指的是所占过渡时间duration的百分数，0%~25%也就是从0s到1s阶段，然后结合时间t关于过渡函数cubic-bezier(0.42,0,0.58,1)来计算相应的位置点值和颜色值
*/

наконец

Процесс реализации выше, если вы использовали ридерanimejsЯ также просмотрел исходный код этой библиотеки функций анимации. Вы обнаружите, что я дал только обзор со ссылкой на ее реализацию. Студенты, которые заинтересованы в ряде отличных функций в библиотеке функций, могут обратиться и изучить. очень рекомендуется. В настоящее время это звезда на GitHub. Достигнуто 30 000+

В ответ на некоторые требования, выдвинутые pm, до тех пор, пока вы четко знаете, к какому конкретному атрибуту перейти, вам нужно перейти из определенного начального состояния в заданное состояние, а затем каким образом (функция перехода) сделать переход, а затем объединить время переходаduration, я считаю, что с такой идеей спрос будет решен легко

насчет нас

Передовая команда Kuaigou Taxi занимается обменом передовыми технологиями и регулярно публикует высококачественные статьи. Добро пожаловать, обратите внимание и лайкните.

Категории