<template>
<view class="page">
<view class="comtainer">
<view class="item_box" :animation="animationData">
<image
v-show="positive"
class="image"
src="https://cdn.lianlianlvyou.com/agent/common/ac75225471234398ab470992d011bd64.jpg"
mode=""
/>
<image
v-show="!positive"
class="image"
src="https://cdn.lianlianlvyou.com/agent/common/bb0b812d6eae4e318f099da9fa2e57e0.png"
mode=""
/>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
timer: null,
timeNum: 0,
animation: null,
positive: false,
animationData: {},
};
},
onShow() {
this.initAnimation();
},
onHide() {
clearTimeout(this.timer);
this.timer = null;
},
methods: {
initAnimation() {
var animation = uni.createAnimation({
duration: 300,
timingFunction: "linear",
});
this.animation = animation;
this.timer = setInterval(() => {
const rotateX = animation.currentTransform.rotateX;
if (rotateX) {
this.timeNum -= 180;
animation.rotateX(this.timeNum).step();
} else {
this.timeNum -= 180;
animation.rotateX(this.timeNum).step();
}
this.animationData = animation.export();
setTimeout(() => {
this.positive = !this.positive;
}, 150);
}, 2000);
},
},
};
</script>
<style lang="scss" scoped>
.page {
.comtainer {
padding: 200px 0 0 50px;
height: 200px;
width: 100px;
overflow: hidden;
transform-style: preserve-3d;
perspective: 2000px;
.item_box {
position: relative;
display: flex;
flex-direction: column;
.image {
width: 100px;
height: 200px;
transform: rotateX(180deg);
&:last-child {
transform: rotateX(360deg);
}
}
}
}
}
</style>
uniapp 动画旋转
于 2022-11-24 22:28:52 首次发布
这是一个关于如何在Vue和uni-app中创建图片旋转动画的示例。代码展示了如何利用uni.createAnimation API和定时器实现动画效果,通过切换图片的旋转角度实现连续翻转。同时,CSS样式用于设置3D转换和透视效果,增强视觉体验。
摘要由CSDN通过智能技术生成