В обычной разработке веб-страниц анимационные эффекты могут использоваться для достижения большинства требований с помощью css3, а также могут использоваться при разработке небольших программ.css3, но и черезapiспособ достижения.
Направляя путь:API анимации мини-программы
интерпретация API
В апплете, позвонивapiЧтобы создать анимацию, вам нужно сначала создать экземпляр объекта. этот объект черезwx.createAnimationвернуть,animationРяд свойств основан на этом экземпляре объекта.
создать этот объект
let animation = wx.createAnimation({
duration: 2000,
delay: 0,
timingFunction: "linear",
});
этоanimationчерезwx.createAnimationПосле этого экземпляр вернулся. В процессе создания вы можете добавить к этому экземпляру некоторые свойства, как показано в приведенном выше коде, который эквивалентенcss3серединаanimation:$name 2s linearписьма.
Добавить анимацию
После создания экземпляра добавьте необходимые динамические эффекты на основе экземпляра.Динамический тип можно найти в документации.В качестве примера возьмем наиболее распространенное движение и вращение:
animation.translate($width, 0).rotate($deg);
конец анимации
.step()Указывает на конец набора анимаций
animation.step();
экспорт анимации
Добавлен эффект анимации, как добавить эффект анимации на нужный дом? Здесь нужно использовать.export()Экспортируйте очередь анимации и назначьте ее объекту dom.
this.setData({ moveOne: animation.export() })
<view animation="{{moveOne}}"></view>
пример
Нижеследующее будет сравниваться с помощью двух наборов анимаций.css3а такжеapiразные реализации.
1. Анимация движения модуля
Эффект анимации:
На рисунке ниже показаны два набора анимаций:apiспособ (сверху) сcss3Способ (ниже) завершает эффект, нажмите кнопку перемещения, и анимация начнется.
Код
Ниже приведеныcss3а такжеapiОсновной код:
css3:
<!-- wxml -->
<view class='border'>
<view class='css-block {{isMove && "one"}}'></view>
<view class='css-block {{isMove && "two"}}'></view>
<view class='css-block {{isMove && "three"}}'></view>
<view class='css-block {{isMove && "four"}}'></view>
</view>
// scss
@mixin movePublic($oldLeft,$oldTop,$left,$top) {
from {
transform:translate($oldLeft,$oldTop);
}
to {
transform:translate($left,$top);
}
}
@mixin blockStyle($color,$name) {
background: $color;
animation:$name 2s linear infinite alternate;
}
.one {
@include blockStyle(lightsalmon,onemove);
}
@keyframes onemove {
@include movePublic(50rpx,-25rpx,-150rpx,0rpx);
}
.two {
@include blockStyle(lightblue,twomove);
}
@keyframes twomove {
@include movePublic(0rpx,25rpx,-50rpx,0rpx);
}
.three {
@include blockStyle(lightgray,threemove);
}
@keyframes threemove {
@include movePublic(0rpx,25rpx,50rpx,0rpx);
}
.four {
@include blockStyle(grey,fourmove);
}
@keyframes fourmove {
@include movePublic(-50rpx,-25rpx,150rpx,0rpx);
}
// js
moveFunction(){
this.setData({
isMove: true
})
}
css3через динамические измененияclassИмя класса для достижения эффекта анимации, как показано выше через кодone,two,three,fourЧтобы контролировать расстояние перемещения отдельно, sass может избежать проблемы избыточности кода.(Смущен тем, как использовать его в апплетеsassДетскую обувь смотрите здесь:wechat-mina-template)
API:
moveClick(){
this.move(-75,-12.5,25,'moveOne');
this.move(-25,12.5, 0,'moveTwo');
this.move(25, 12.5,0,'moveThree');
this.move(75, -12.5,-25,'moveFour');
this.moveFunction(); // 该事件触发css3模块进行移动
},
// 模块移动方法
move: function (w,h,m,ele) {
let self = this;
let moveFunc = function () {
let animation = wx.createAnimation({
duration: 2000,
delay: 0,
timingFunction: "linear",
});
animation.translate(w, 0).step()
self.setData({ [ele]: animation.export() })
let timeout = setTimeout(function () {
animation.translate(m, h).step();
self.setData({
// [ele] 代表需要绑定动画的数组对象
[ele]: animation.export()
})
}.bind(this), 2000)
}
moveFunc();
let interval = setInterval(moveFunc,4000)
}
Как видно из диаграммы эффектов, все модули представляют собой простые движения, и изменения их движения можно записать как обычное событие, и их можно перемещать в разные позиции, передавая в событие значения. параметры вw,h,m,eleСоответственно представляют расстояние, пройденное в горизонтальном направлении дивергенции, расстояние в вертикальном направлении и горизонтальном направлении при сборе и должны быть измененыanimationDataОбъект.
Анимация, сгенерированная этим методом, не может быть отозвана в соответствии с исходной траекторией, поэтому после события устанавливается таймер, и он определен для выполнения другой анимации после того, как анимация выполняется в течение 2 секунд. в то же времяАнимация может быть выполнена только один раз, если вам нужно круговое движение, оберните повторяющийся таймер во внешний слой.
Просмотрите исходный код и найдитеapiпуть черезjsВставляйте и изменяйте встроенные стили для достижения анимационных эффектов. На следующей анимации четко видны изменения стиля.
распечатать назначенноеanimationData,animatesТип и параметры события анимации сохраняются в;optionsПараметры конфигурации для этой анимации хранятся вtransitionХранится вwx.createAnimationконфигурация во время вызова,transformOriginявляется конфигурацией по умолчанию, что означает, что анимация начинается с центра объекта.wx.createAnimationпри настройке.
2. Анимация воспроизведения музыки
Приведенная выше анимация движения модуля не предполагает логического взаимодействия, поэтому пробуется новая анимация воспроизведения музыки, в которой необходимо добиться эффекта паузы и возобновления.
Эффект анимации:
Сравнение двух разных анимационных эффектов соответственноapi(выше) Реализация иcss3Реализация (ниже):
Код
Ниже приведеныcss3достичь сapiРеализованный основной код:
css3:
<!-- wxml -->
<view class='music musicTwo musicRotate {{playTwo ? " ": "musicPaused"}} ' bindtap='playTwo'>
<text class="iconfont has-music" wx:if="{{playTwo}}"></text>
<text class="iconfont no-music" wx:if="{{!playTwo}}"></text>
</view>
// scss
.musicRotate{
animation: rotate 3s linear infinite;
}
@keyframes rotate{
from{
transform: rotate(0deg)
}
to{
transform: rotate(359deg)
}
}
.musicPaused{
animation-play-state: paused;
}
// js
playTwo(){
this.setData({
playTwo: !this.data.playTwo
},()=>{
let back = this.data.backgroundAudioManager;
if(this.data.playTwo){
back.play();
} else {
back.pause();
}
})
}
пройти черезplayTwoЭто свойство используется, чтобы определить, следует ли приостанавливать и контролироватьcssДобавляйте и удаляйте классы. так какfalse, Добавить.musicPausedкласс, анимация приостанавливается.
api:
<!-- wxml -->
<view class='music' bindtap='play' animation="{{play && musicRotate}}">
<text class="iconfont has-music" wx:if="{{play}}"></text>
<text class="iconfont no-music" wx:if="{{!play}}"></text>
</view>
// js
play(){
this.setData({
play: !this.data.play
},()=>{
let back = this.data.backgroundAudioManager;
if (!this.data.play) {
back.pause();
// 跨事件清除定时器
clearInterval(this.data.rotateInterval);
} else {
back.play();
// 继续旋转，this.data.i记录了旋转的程度
this.musicRotate(this.data.i);
}
})
},
musicRotate(i){
let self = this;
let rotateFuc = function(){
i++;
self.setData({
i:i++
});
let animation = wx.createAnimation({
duration: 1000,
delay: 0,
timingFunction: "linear",
});
animation.rotate(30*(i++)).step()
self.setData({ musicRotate: animation.export() });
}
rotateFuc();
let rotateInterval = setInterval(
rotateFuc,1000
);
// 全局定时事件
this.setData({
rotateInterval: rotateInterval
})
}
пройти черезapiЭто достигается удалениемanimationDataЧтобы управлять анимацией, при приостановке анимации также необходимо очистить таймер, потому что очистка таймера должна работать между событиями, поэтому установлен глобальный метод.rotateInterval.
apiМетод определяет угол поворота, но он остановится после того, как вращение достигнет этого угла.Если вам нужно добиться эффекта повторного вращения, то для его завершения нужно использовать таймер. Таким образом, переменная i определена, и таймер увеличивается на 1 каждый раз, когда он выполняется, что эквивалентно повороту на 30° каждую 1 секунду.animation.rotate()Динамическое присвоение степеней в . Чтобы продолжить анимацию после паузы, она должна продолжать вращаться от исходного угла, поэтому переменная i должна быть глобальной.
изменения кода
Как видно из рисунка ниже,apiспособ, которым вращение осуществляется путем накопления углов, а неcss3выполнять в цикле.
В сравнении
Через сравнение двух приведенных выше небольших примеров, будь то удобство или объем кода, черезcss3Для достижения эффекта анимации является относительно лучшим выбором.apiМетод имеет множество ограничений:
- Анимация может быть выполнена только один раз, а эффект зацикливания должен выполняться через таймер.
- Возврат по исходной траектории невозможен, и для возврата должен быть определен таймер.
- Частое использование таймеров имеет недостатки в производительности.
На основании вышеизложенного рекомендуется пройтиcss3для завершения анимации.
Широкая реклама
Эта статья была опубликована вЕженедельный выпуск Mint Front End, Добро пожаловать в Watch & Star ★, пожалуйста, указывайте источник при перепечатке.