【快应用】swiper组件内容切换动画实现

​

 【问题背景】

Swiper组件内的items切换时，滑动的效果比较单调，是否可以在滑动时加入一个切换的动画效果呢？

 

【问题分析】

Swiper组件在1080版本之后推出了页面切换动画的样式，支持在swiper组件轮播时展示动画效果，比如缩小或者旋转之类的。

 

【实现方案】

可以通过设置样式page-transform-origin、tranform、page-animation-name和animation-timing-function属性来设置想要的动画效果。

下面代码就对swiper组件内的内容切换时实现了一个缩放的动画效果。

<template>
  <div class="item-container">
    <div class="swiper-container">
      <swiper class="swiper sampleAnimation" autoplay="true">
        <image src="/Common/a.jpg" style="width: 100%; height: 250px"></image>
        <image src="/Common/b.jpg" style="width: 100%; height: 250px"></image>
        <image src="/Common/c.jpg" style="width: 100%; height: 250px"></image>
        <image src="/Common/h.jpg" style="width: 100%; height: 250px"></image>
      </swiper>
    </div>
  </div>
</template>
<style>
  .item-container {
    margin-bottom: 50px;
    margin-right: 60px;
    margin-left: 60px;
    flex-direction: column;
  }
  .input {
    width: 100%;
    height: 100px;
    border: 1px solid #000000;
    font-size: 80px;
  }
  .swiper-container {
    flex-direction: column;
  }
  .swiper {
    flex-direction: column;
    indicator-color: #800080;
    indicator-selected-color: #000000;
    height: 250px;
  }
  .sampleAnimation {
    page-animation-name: Scale;
    page-transform-origin: 100px 100px;
    animation-timing-function: linear;
  }
  @keyframes Scale {
    from {
      transform: scale(0.1);
    }
    to {
      transform: scale(1);
    }
  }
</style>

截图

​

Tips：

@keyframes属性目前支持transform，background-color和opacity。

其中transform支持的属性有translate，translateX/Y，Scale，scaleX/Y，rotate，rotateX/Y

​

 

 欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh