图片渐变 ImgTransition ​

实现图片的动画渐变效果。

基础用法 ​

点击查看源码
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)