Я больше не могу учиться, давай повеселимся

внешний интерфейс анимация

предисловие

это неwebpackОбновился снова. . .

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

Если ты больше не можешь учиться, давай повеселимся и расслабимся~~

matrixChange

В духе метания я всегда хотел написать анимацию, которая была бы полностью мной завершена, и, наконец, закончил ее некоторое время назад.typescriptпереписать и уточнитьDEMO, давайте посмотрим, как работает анимация

gif

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

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

браузер

<script src="https://cdn.jsdelivr.net/npm/matrixchange/dist/matrixChange.js"></script>

npm or yarn

npm install matrixchange --save
yarn add matrixchange

code

import {makeMatrixChange, mode} from 'matrixchange'

let app = document.getElementById('app')
let urls = [
  'http://bgcdn.acohome.cn/100965.jpg',
  'http://bgcdn.acohome.cn/1501505.jpg',
  'http://bgcdn.acohome.cn/1501655.jpg'
];

// 该方法返回一个对象
let move = makeMatrixChange(app, {
  images: urls,
  row: 7,
  col: 9
})

// 使用第 0 种运动方式，和默认的动画效果
move.movePoint(mode[0])

// 使用第 0 种运动方式，和 transition 过渡，提供类名即可，eg: .test{transfrom:scale(0);}
move.movePoint(mode[0], {
    className: 'test'
})

// 使用第 0 种运动方式，和 animation 动画，比如配合 animation.css 动画库
// animation 需要提供两个类名，进场动画和出场动画，同时需要标记这个是 animation 动画
move.movePoint(mode[0], {
    animate: true,
    classNameIn: 'animated flipInX',
    classNameOut: 'animated flipOutX'
})

// 使用特定的图片进行动画
// 不传 image 则随机取传入的图片列表中的一张图片
move.movePoint(mode[0], {
    animate: true,
    classNameIn: 'animated flipInX',
    classNameOut: 'animated flipOutX',
    image: urls[0]
})

matrixchangeВ библиотеке только один метод и один массив

  • makeMatrixChangeИспользуется для создания матрицы, вызовите возвращаемый объектmovePointспособ заставить результирующую матрицу двигаться
  • modeпредставляет собой массив форм движения некоторых столбцов, форма движенияmovePointПервый параметр метода.

movePointВторой параметр конкретно определяется следующим образом

type option = {
    className?:     string
    animate?:       boolean
    classNameIn?:   string
    classNameOut?:  string
    image?:         string
}

говорить об опыте

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

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

  • пропуск стиляjsгенерируется без отдельной ссылкиscss/cssфайл, стоимость использования библиотеки дополнительно снижается
  • реализация на основеanimationанимация в сочетании сanimation.cssДальнейшее снижение затрат на разработку
  • Разделите форму движения и абстрагируйте ее в объект, который предоставляет некоторые данные и методы проверки.
  • Достигнуто15форма упражнений
  • Реализуйте простое событие для дальнейшего разделения кода
  • Используйте события, чтобы показать некоторые этапы процесса выполнения программы, что удобно для внедрения функций.
  • использоватьtypescriptОпределите типы, чтобы избежать ненужных ошибок в разработке

наконец

Если хотите, добро пожаловать вмой гитхабнажмитеstar, спасибо~~

Текущая форма упражнений только15Добрый день, если есть и другие формы упражнений, также приветствуютсяPull request.

Конечно, если вы хотите знатьtypescriptНо вы не можете найти подходящий проект для практики, можете рассмотреть этот проектforkОдин для исследования, так как объем кода не очень большой, вроде бы не должно быть сложно.

Категории