uni-app 动画旋转

<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>

这篇好文章是转载于：学新通技术网