Предыстория введения:
Привет, меня зовут Сикс Сикс. После тестирования плагин анимации загрузки работает отлично. Первоначальная цель написания этого плагина состоит из двух пунктов: первый — загрузить загрузочныйвесело, процесс загрузки становится интересным,Значительно улучшить пользовательский опыт. ВторойНастройка, разработчик может свободно изменять размер, цвет, скорость и т. д. анимации в соответствии со своими потребностями. успешно используется в моемИмитация проекта Mogujie MallОн работает внутри, и эффект все еще в порядке. Если вы думаете, что можете использовать его, пожалуйста, не стесняйтесь звонить мне, если у вас есть какие-либо вопросы или предложения. Я исправлюсь со временем. В то же время, если у вас есть более качественные материалы, вы также можете поделиться ими со мной.В настоящее время материалов относительно мало, поэтому давайте посмотрим на эффект.
использовать:
1. Установка:
npm install load-vue --save
2. Используйте Примечание:
Если вы используете метод шаблона, вы должны сначала установить для isShow значение false, а затем сделать isShow true через js (я начинаю анимацию, наблюдая за изменением isShow).
функция загрузки:
1.
Инструкция по применению и параметры:
2.
Инструкция по применению и параметры:
3.
Инструкция по применению и параметры:
4.
Инструкция по применению и параметры:
5.
Инструкция по применению и параметры:
6.
Инструкция по применению и параметры:
Проблемы, возникающие при разработке:
1. Решено
Проблема: использование setInterval может привести к задержке.
Решение: используйте функцию requestAnimationFrame. (рекомендуемая функция для анимации)
2. Решено
Проблема: повторное получение объекта холста.
Решение: просто получите его один раз перед запуском анимации.
3. Решено
Проблема: Программные компоненты не реализованы.
Решение: реализовано через конструктор расширения.
4. Решено (эффект не очень)
Проблема: Вы не можете передать конструктор, который будет введен вне Vue.
Решение: реализовать обмен данными через localstrange.
5. Неразрешенный | Через структуру данных Map
Проблема: большое количество переполнения данных суждения, состояние движения суждения.
6. Решено
Проблема: Когда есть полоса загрузки, когда компонент скрыт, данные нужно инициализировать, что на самом деле является инициализацией данных vue.
решить:Object.assign(this.$data, this.$options.data())
7. Окончательное решение
Проблема: не удается получить объект холста.
Решение: объект холста не может быть получен с помощью компонента v-if Использование v-show повлияет на страницу, просмотр isShow через wacth и получение ctx через $nextTick.
8. Проблемы с импортом и экспортом
Проблема: не такой элегантный, как другие плагины
Решение. Эту проблему можно решить после ознакомления со спецификациями импорта и экспорта es6.
9. Решить
Проблема: анимация вызывается несколько раз, и анимация накапливается.
Решение: если наблюдение isShow ложно, отмените анимацию с помощью cancelAnimationFrame.
конец
Я буду продолжать обновлять и поддерживать этот плагин, материалов сейчас немного, я верю, что однажды он будет успешным.
Мы также даем больше мнений, чтобы этот плагин становился все лучше и лучше.
адрес гитхаба:Нажмите, чтобы войти в гитхаб