HarmonyOS鸿蒙Next中【快应用】swiper组件内容切换动画实现

HarmonyOS鸿蒙Next中【快应用】swiper组件内容切换动画实现 【问题背景】

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

【问题分析】

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

【实现方案】

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

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

<div class="item-container">
  <div class="swiper-container">
    <swiper class="swiper sampleAnimation" autoplay>
      <image src="/Common/a.jpg" style="width: 100%; height: 250px">
      <image src="/Common/b.jpg" style="width: 100%; height: 250px">
      <image src="/Common/c.jpg" style="width: 100%; height: 250px">
      <image src="/Common/h.jpg" style="width: 100%; height: 250px">
    </swiper>
  </div>
</div>

截图

cke_1522.png

Tips：

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

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


更多关于HarmonyOS鸿蒙Next中【快应用】swiper组件内容切换动画实现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中【快应用】swiper组件内容切换动画实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用Swiper组件实现内容切换动画可以通过animation属性进行配置。你可以在Swiper组件中设置animation为true来启用默认的滑动动画，或者通过animation-duration和animation-timing-function自定义动画时长和缓动效果。此外，还可以结合transition属性实现更复杂的切换效果。例如：

<swiper animation="true" animation-duration="300" animation-timing-function="ease-in-out">
  <swiper-item>内容1</swiper-item>
  <swiper-item>内容2</swiper-item>
</swiper>
回到顶部