интересный клип-дорожка

внешний интерфейс дизайн CSS
интересный клип-дорожка

Некоторое время назад друг представил очень красивый веб-сайтwww.species-in-pieces.com/

F12 посмотрел на структуру DOM и обнаружил, что автор просто объединил клип-путь и переходные функции CSS3 для достижения очень мощного эффекта, а детали каждого перехода и животного хорошо выполняются.

Затем я сделал демонстрацию в соответствии с моим собственным пониманием, и упаковывали основную часть JS. Заинтересованные друзья могут общаться друг с другом.

Demo for ani-clipath
Demo for ani-clipath

Фотографии в демо взяты изwww.behance.net/tomandersЯ только что сделал нижнюю обработку

Адрес предварительного просмотра:Screwknot.GitHub.io/arni-cli путь…

Адрес источника:GitHub.com/screwknot/press…

Процесс реализации

Начните с простого преобразования clip-path

clip-path 动画
анимация клип-пути

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>simple move</title>
  <style>
    .polygon{
      width: 600px;
      height: 300px;
      background-color: black;
      clip-path: polygon(20% 30%, 0 70%, 40% 70%);
      animation: move 1s infinite alternate;
    }
    @keyframes move {
      to {
        background-color: grey;
        clip-path: polygon(80% 70%, 100% 30%, 60% 30%);
      }
    }
  </style>
</head>
<body>
 <div class="polygon"></div>
</body>
</html>

Это базовая анимация, необходимая для демонстрации.деформация + обесцвечивание, что касается того, как построить красивые графические изменения, то это требует немного воображения и дизайнерских способностей

дизайн

Сначала нам нужно разработать удовлетворительный шаблон нижней стороны, обратите внимание на контроль количества треугольников, чем меньше, тем лучше, чем меньше, тем лучше.

shark
shark

shark
shark

shark
shark

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

Или, если у вас есть хороший способ представить его, пожалуйста, дайте мне знать.

图形转为数据
график к данным

Теперь, когда приготовления завершены, самый болезненный этап позади.

по меньшей мере

Основная идея реализации кода заключается в следующем

  1. Каждое животное состоит из36Треугольники разных цветов соединены вместе, поэтому надо36div для отображения
  2. Каждое изменение переназначает свойство clip-path 36 div.
  3. Каждый div устанавливает свойство перехода, чтобы переход происходил автоматически.

Просто несколько строк кода выкладываться не будут, если интересно, переместитеgithub

Тем не менее, я хотел бы представить, как использовать упакованные плагины.

Установить

CDN

<script src="https://unpkg.com/ani-clipath/dist/ani-clipath.min.js">

NPM

npm install --save ani-clipath

использовать

Вам нужно настроить контейнер DOM и настроить егоwidthа такжеheight

<style>
  .shapes{
    width: 800px;
    height: 600px;
  }
</style>
...
<div class="shapes"></div>

Инициализировать экземпляр и передать параметры

параметр Типы иллюстрировать
el String Привязать DOM-контейнер
speed Number Контролируйте скорость изменений
delay Number Задержка смены управления
shapes Array Координаты низкоуровневой графики

Использовать переключатель общедоступного метода

метод иллюстрировать
next() Переключить следующий рисунок
previous() переключиться на предыдущую графику 
<script>
  var aniClipath = new AniClipath({
    el: '.shapes',
    speed: 1000,
    delay: 30,
    shapes: data
  })
  setInterval(function(){
    aniClipath.next()
  },3000)
</script>

Формат данных свойства shape

var data = [
  第 1 个低边图形
  [
    // 基本图形参数
    { 
      // 颜色
      c: '#1A1A1A',
      // polygon坐标
      p: [ { x: '50%', y: '30%' }, { x: '30%', y: '70%' }, { x: '70%', y: '70%' }]
    }
    ...
  ],
  第 2 个低边图形
  [
    {
      c: '#E6E6E6',
      p: [ { x: '50%', y: '70%' }, { x: '30%', y: '30%' }, { x: '70%', y: '30%' }]
    }
    ...
  ]
  ...
  第 n 个低边图形
]

Вот и все, добро пожаловать, звезда.

Категории