Апплет WeChat - реализация анимационного эффекта постепенного появления и исчезновения

Апплет WeChat

предисловие

При отображении мини-списка программ я получил запрос. Вам нужно добавить анимационные эффекты при отображении списка. Видеоэффект дизайна выглядит следующим образом:

При входе на страницу списка каждую карту нужно отображать по очереди, а после завершения отображения карты до дня нужно скрыть.

Реализовать идеи

Чтобы добиться этого эффекта анимации, вам сначала нужно добавить анимацию CSS к каждой карточке. Поскольку отображение каждой карты имеет временной интервал, и учитывая скрытый эффект после завершения отображения, эффект анимации необходимо динамически добавлять с помощью js. Прочитав документы по разработке WeChat, я обнаружил, что апплет WeChat предоставляет анимационный объект Animation, Посмотрев на параметры в нем, я обнаружил, что он может достичь желаемого эффекта. В частности, используются следующие API:

wx.createAnimation(Object object) 创建一个animation对象。最后通过动画实例的export方法导出动画数据传递给组件的 animation 属性。里面有如下参数：duration（动画持续时间，单位 ms）,timingFunction（动画的国度效果）,delay（动画延迟）

Созданный объект анимации нуждается в следующих свойствах в этом процессе реализации:

Animation.export() 可以导出动画队列，export 方法每次调用后会清掉之前的动画操作。

Animation.step(Object object) 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。比如一组动画结束了，就以step()结尾

Animation.translateY(number translation) 在 Y 轴平移的距离，单位为 px

Animation.opacity(number value) 透明度 0-1的取值范围

Учитывая вышеуказанные свойства, если они используются разумно, то в требованиях к реализации упоминается, что эффект анимации стабилен.

Этапы реализации

Инкапсулируйте метод для создания анимаций и легкого их вызова

 /**
 * 动画实现
 * @method animationShow
 * @param {that} 当前卡片
 * @param {opacity} 透明度
 * @param {delay} 延迟
 * @param {isUp} 移动方向
 */
  animationShow: function (that,opacity, delay, isUp) {
    let animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
      delay: delay
    });
    <!--考虑到还需要隐藏掉当天之前的卡片，做如下判断来赋予不同的动画效果-->
    if (isUp == 'down') {
      animation.translateY(0).opacity(opacity).step().translateY(-80).step();
    } else if (isUp == 'up') {
      animation.translateY(0).opacity(opacity).step().translateY(-140).opacity(0).step()
    } else {
      animation.translateY(0).opacity(opacity).step()
    }
    let params = ''
    params = animation.export()
    return params
  },

Инициализировать стиль каждой карты

首先每个卡片的位置相对于自身往Y轴平移80像素，并且把透明度设置为0。这样就可以进入页面的时候再往下平移并且让卡片逐渐显示。
.init{
  opacity: 0;
  transform: translateY(-80px)
}

Обработка данных

Повторное использование каждых данных путем вызова метода пакета, атрибута анимации, который должен иметь карта.

  for (let i = 0; i < transData.length; i++) {
    if (i == 0) {
      transData[i].animation = that.app.slideupshow(that, 1, 0, 'up')
    } else {
      transData[i].animation = that.app.slideupshow(that, 1, (i + 1) * 10, 'down')
    }
  }

Добавить свойство анимации к каждой карточке

<view class="init" animation="{{item.animation}}">

добиться эффекта

Это в основном то же самое, что и стиль анимации в дизайнерском видео, который прекрасен.

Категории