От (3°58′20″ с.ш., 112°16′53″ в.д.) до (53°33′34,51″ с.ш., 123°17′22,29″ в.д.) песня «Дискотека Дикого Волка» известна во все времена.
Тщательная оценка текстов смутно выявляет бесконечные похвалы программистам, особенновнешний интерфейс, посмотрите на себя перед собой, коснитесь IDE слева, и справа появится идеальный интерфейс (приложение, веб-страница).
задний план
В конце года крупные компании нарисуют красивый годовой отчет с помощью анимации в сочетании с данными.
С анимационным объектом Animation программист становится художником.
текст
Взяв в качестве примера компонент проигрывателя, давайте разгадаем тайну анимации в апплете WeChat.
Animation
свиные рожки пожалуйстаAnimationWeChat предоставляет моим разработчикам класс для разработки анимации, с помощью которого мы можем рисовать вертушки.
Шаг 1: Метод wx.createAnimation используется для создания класса Animation и установки основных свойств.
//创建动画
let animationRun = wx.createAnimation({
duration: 6,
timingFunction: 'ease',
delay:10,
transformOrigin:"'50% 50% 0'"
})
Когда вы видите приведенный выше код, у вас возникает чувство дежа вю, подумайте об этом, подумайте еще раз, дайте вам несколько подсказок css3.
Синтаксис перехода свойства CSS3
transition: property duration timing-function delay;
Итак, мы, похоже, пришли к выводу: когда вы используете wx.createAnimation для создания анимации, вы, по сути, строите строку анимации css3.
Приведенный выше код для создания анимации преобразуется в
// css动画字符串
<style>
transition: 6000ms ease 10000ms;
transition-property: transform;
transform-origin: 50% 50% 0;
-webkit-transition: 6000ms ease 10000ms;
-webkit-transition-property: transform;
-webkit-transform-origin: 50% 50% 0;
</style>
Шаг 2: Метод Animation.rotate используется для установки угла поворота поворотного стола.
let runDeg = 90
animationRun.rotate(runDeg).step();
Приведенный выше код будет добавлен в строку анимации css:
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
в полный стиль css
<style>
transition: 6000ms ease 10000ms;
transition-property: transform;
transform-origin: 50% 50% 0;
-webkit-transition: 6000ms ease 10000ms;
-webkit-transition-property: transform;
-webkit-transform-origin: 50% 50% 0;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg); /* Opera */
</style>
Шаг 3: Метод Animation.step используется для завершения набора анимаций, чтобы запустить следующий набор анимаций.
animationRun.rotate(runDeg).step()
Этот метод будет сочетать несколько стилей анимации.
<style>
animation1;
animation2;
animation3;
</style>
Шаг 4: Метод Animation.export используется для экспорта очереди анимации.
this.setData({
animationData: animationRun.export(),
btnDisabled: 'disabled'
});
На этом этапе суть состоит в том, чтобы назначить полный стиль css3 соответствующему стилю тега и открыть отладку для просмотра файла wxml.
Официальное объяснение: Экспорт очереди анимации. Метод экспорта очищает предыдущую операцию анимации после каждого вызова.
Но фактическая операция показала, что тот же эффект может быть достигнут, если на третьем шаге назначена анимацияRun, то есть анимация была экспортирована при вызове метода шага. (Конечно, это смелые догадки автора в сочетании с практикой, и ответа от WeChat не получил) и обнаружил, что также есть проблемы с методом экспорта.. Не то, чтобы чиновник сказал, что предыдущая анимация будет очищена. Глядя на Wxml, вы обнаружите, что стили все еще там. Это должна быть ошибка апплета WeChat, которая также создает ряд проблем для последующих операций. Например, стили анимации уже являются встроенными стилями, а пользовательские стили нелегко переопределить. (Мы также сначала обратились к команде WeChat.)
Когда мы используем анимацию, если мы хотим настроить некоторые стили CSS3, мы можем столкнуться с проблемами.В настоящее время рекомендуется очищать некоторые стили самостоятельно.
Суммировать
Суть анимации заключается в базовой инкапсуляции стилей анимации CSS3 для гибкого управления в JS.
Когда вы видите много кода простого стиля, который нужно запомнить, попробуйте сделать код более красивым с помощью инкапсуляции.
В конце статьи посвящена компоненту проигрывателя. Полный код прилагается, и друзья, которым он нравится, могут процитировать его сами.
сцены, которые будут использоваться
лотерея
Нажмите, чтобы просмотреть исходный код