创意效果

结合各种旋转、缩放、透明度和位置变化，创造出丰富的动画效果。

引入

WARNING

v3版本不再默认引入所有modules，这意味着在使用modules中的模块时，都需要手动引入。

同时部分modules的css也需手动引入。需要注意的是，将style设置为scoped会导致样式失效。推荐全局引入所需要的模块样式。参考：引入样式

具体可查看模块化按需引入

npm

<script lang="ts" setup>
import { EffectCreative } from '@zebra-ui/swiper/modules'

const modules = ref([EffectCreative])
</script>

uni_modules

<script lang="ts" setup>
import { EffectCreative } from '@/uni_modules/zebra-swiper/modules'

const modules = ref([EffectCreative])
</script>

npm

<style lang="scss">
    @use "@zebra-ui/swiper/modules/effect-creative/effect-creative.scss";
</style>

uni_modules

<style lang="scss">
    @use "@/uni_modules/zebra-swiper/modules/effect-creative/effect-creative.scss";
</style>

配置

prev && next

前一张和后一张轮播item的动画效果

类型

Object

默认值

-

translate

类型

(string | number)[]

默认值

-

• 描述：幻灯片在 X、Y、Z 轴上的位移。
• 作用：控制幻灯片在三维空间中的位置。

<z-swiper
  grabCursor
  effect="creative"
  :modules="modules"
  :creativeEffect="{
    prev:{
        translate:['-100%',50,-100]
    },
    next:{
        translate:['100%',150,100]
    }
  }"
  :custom-style="{width:'200px'}"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

rotate

类型

number[]

默认值

-

• 描述：幻灯片在 X、Y、Z 轴上的旋转角度。
• 作用：控制幻灯片的旋转效果。

<z-swiper
  grabCursor
  effect="creative"
  :modules="modules"
  :creativeEffect="{
    prev:{
        translate:['-100%',0,0],
        rotate:[0,0,100]
    },
    next:{
        translate:['100%',0,0],
        rotate:[0,0,100]
    }
  }"
  :custom-style="{width:'200px'}"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

scale

类型

number

默认值

-

• 描述：幻灯片的缩放比例。
• 作用：调整幻灯片的大小。

<z-swiper
  grabCursor
  effect="creative"
  :modules="modules"
  :creativeEffect="{
    prev:{
        translate:['-100%',0,0],
        scale:0.5
    },
    next:{
        translate:['100%',0,0],
        scale:10
    }
  }"
  :custom-style="{width:'200px'}"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

opacity

类型

number

默认值

-

• 描述：幻灯片的透明度。
• 作用：控制幻灯片的可见性。

<z-swiper
  grabCursor
  effect="creative"
  :modules="modules"
  :creativeEffect="{
    prev:{
        translate:['-100%',0,0],
        opacity:0.1
    },
    next:{
        translate:['100%',0,0],
        opacity:0.1
    }
  }"
  :custom-style="{width:'200px'}"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

origin

类型

string

默认值

-

• 描述：旋转和缩放的原点。
• 作用：指定动画的中心点。

<z-swiper
  grabCursor
  effect="creative"
  :modules="modules"
  :creativeEffect="{
    prev:{
        translate:['-100%',0,0],
        scale:0,
        origin:'left top'
    },
    next:{
        translate:['100%',0,0],
        scale:0,
        origin:'right bottom'
    }
  }"
  :custom-style="{width:'200px'}"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

shadow

类型

boolean

默认值

-

• 描述：幻灯片item的阴影。
• 作用：控制是否显示幻灯片阴影。

<z-swiper
  grabCursor
  effect="creative"
  :modules="modules"
  :creativeEffect="{
    prev:{
        translate:['-100%',0,0],
        shadow:true
    },
    next:{
        translate:['100%',0,0],
        shadow:true
    }
  }"
  :custom-style="{width:'200px'}"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

limitProgress

将进度/偏移量限制为侧幻灯片的数量。

如果为 1，则上一张/下一张幻灯片之后的所有幻灯片都将具有相同的状态。

如果为 2，则第二张前/后活动幻灯片之后的所有幻灯片都将具有相同的状态

类型

number

默认值

1

<z-swiper
  grabCursor
  effect="creative"
  :slidesPerView="3"
  :modules="modules"
  :creativeEffect="{
    prev:{
        translate:['-100%',0,100]
    },
    next:{
        translate:['100%',0,-100]
    },
    limitProgress:2
  }"
  :custom-style="{width:'300px'}"
>
  <z-swiper-item v-for="item in list" :key="item.id">
    <DemoItem :text="item.text"></DemoItem>
  </z-swiper-item>
</z-swiper>

perspective

如果你的自定义变换需要 3D 变换（translateZ、rotateX、rotateY），则需要启用此参数。

TIP

默认启用。

类型

boolean

默认值

true

progressMultiplier

变形强度。设置的其他参数将会以此值为基准，进行倍数增长。

类型

number

默认值

1

shadowPerProgress

是否开启阴影跟随progress。此功能需要和limitProgress一起使用。

默认false，所有阴影透明度都是1。如果开启并设置limitProgress为4，那么每个Slide的阴影的透明度将变成0.25、0.5、0.75、1，颜色逐渐加深。

类型

boolean

默认值

false