分段器控制动画

初级版 - 开关控制

<template>
	<view>
		<view class="SCanimation">
			<h1>分段器控制动画</h1>
		</view>
		<view class="switch">
			<view class="switchWrap">
				<text class="textBtn" @click="switchBtn('open')" id="open">打开吧</text><text class="textBtn"
					@click="switchBtn('close')" id="close">关闭吧</text>
				<view :animation="animationBox1" class="animationBox1"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				animationBox1: {},
				current: 0,
				moveWidth: 0,
			}
		},
		onShow() {
			var animation = uni.createAnimation({
				duration: 500,
				timingFunction: "ease-in",
			})
			this.animation = animation
		},
		onReady() {
			this.initAnimation()
		},
		methods: {
			initAnimation() {
				console.log(this.animation);
				let openDom = uni.createSelectorQuery().in(this);
				openDom.select('#open').boundingClientRect(res => {
					this.moveWidth = res.width
					this.animation.width(res.width).step()
					this.animation.height(res.height).step()
					this.animationBox1 = this.animation.export()
				}).exec()
			},
			switchBtn(state) {
				let current = this.current
				let moveX = 0
				let moveY = 0
				let openDom = uni.createSelectorQuery().in(this);
				openDom.select('#' + state).boundingClientRect(data => {
					moveY = data.height / 2
					moveX = this.moveWidth
					this.moveWidth = data.width
					if (state == 'open' && current != 0) {
						this.animation.translate(0, -moveY).width(data.width).step()
						this.current = 0
					} else if (state == 'close' && current != 1) {
						this.animation.translate(moveX, -moveY).width(data.width).step()
						this.current = 1
					}
					this.animationBox1 = this.animation.export()
				}).exec();
			}
		}
	}
</script>

<style scoped>
	.SCanimation {
		font-size: 16px;
		font-weight: 700;
		text-align: center;
	}

	/* 开关 */
	.switch {
		display: flex;
		justify-content: center;
	}

	.switchWrap {
		background-color: rgba(0, 0, 0, .1);
		display: inline-block;
		padding: 4rpx;
		border-radius: 20px;
		position: relative;
	}

	.switchWrap>text {
		display: inline-block;
		padding: 6rpx 20rpx;
		border-radius: 20px;
	}

	.textBtn {
		position: relative;
		z-index: 1;
	}

	.animationBox1 {
		position: absolute;
		border-radius: 20px;
		left: 4rpx;
		top: 50%;
		transform: translateY(-50%);
		background-color: #fff;
	}
</style>