Skip to content

创意效果

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

引入

WARNING

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

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

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

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

const modules = ref([EffectCreative])
</script>
vue
<script lang="ts" setup>
import { EffectCreative } from '@/uni_modules/zebra-swiper/modules'

const modules = ref([EffectCreative])
</script>
css
<style lang="scss">
    @use "@zebra-ui/swiper/modules/effect-creative/effect-creative.scss";
</style>
css
<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 轴上的位移。
  • 作用:控制幻灯片在三维空间中的位置。

rotate

类型
number[]
默认值
-
  • 描述:幻灯片在 X、Y、Z 轴上的旋转角度。
  • 作用:控制幻灯片的旋转效果。

scale

类型
number
默认值
-
  • 描述:幻灯片的缩放比例。
  • 作用:调整幻灯片的大小。

opacity

类型
number
默认值
-
  • 描述:幻灯片的透明度。
  • 作用:控制幻灯片的可见性。

origin

类型
string
默认值
-
  • 描述:旋转和缩放的原点。
  • 作用:指定动画的中心点。

shadow

类型
boolean
默认值
-
  • 描述:幻灯片item的阴影。
  • 作用:控制是否显示幻灯片阴影。
html
<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

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

Released under the MIT License.