图片渐变 ImgTransition
实现图片的动画渐变效果。
基础用法
![](/component/transition/transition.gif)
点击查看源码
vue
<script lang="ts">
import {ref, defineComponent} from 'vue';
export default defineComponent({
setup() {
const images = [
'http://fitimg.fangtangtv.com/tab/tab1block1-1bg1.jpg',
'http://fitimg.fangtangtv.com/tab/tab1block1-2bg1.jpg',
'http://fitimg.fangtangtv.com/tab/tab1block1-3bg1.jpg',
'http://fitimg.fangtangtv.com/tab/tab1block1-4bg1.jpg',
];
const colors = [
'#AC78F5',
-1,
'#5AF285',
-16711681,
'#F5C94D',
-12303292,
'#1A99D9',
-65281,
'#DB5B3F',
];
let index = 0;
const imgTransitionRef = ref<ESITransitionImage>();
function transitionColor() {
imgTransitionRef.value?.setNextColor(colors[++index % colors.length]);
}
function transitionImage() {
imgTransitionRef.value?.setNextImage(images[++index % images.length]);
}
return {
imgTransitionRef,
transitionColor,
transitionImage,
};
},
});
</script>
<style lang="css">
.img-transition-start-page {
width: 1920px;
height: 1000px;
background-color: transparent;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
<template>
<img-transition
ref="imgTransitionRef"
style="width: 1920px; height: 1000px; position: absolute"
:transitionTime="500"
/>
<qt-button
text="切换图片"
@click="transitionImage"
style="background-color: green"
></qt-button>
<qt-button
text="切换颜色"
@click="transitionColor"
style="background-color: green; margin-top: 20px"
></qt-button>
</template>
属性
参数 | 描述 | 类型 |
---|---|---|
transitionTime | 过渡的时间,单位毫秒 | int |
fullQuality | 是否使用高质量图片 | boolean |
方法
setNextImage(string)
过渡到图片(Uri)setNextColor(string)
过渡到颜色(Color)