uni-app 官方能否出一个共享元素动画

共享元素动画在原生程序中很常见，现在微信小程序也出了这种动画，这种效果在用户体验上有很大提升果，而且项目设计中，很多场景都设计了这种交互动画。看了一下其他的多端框架，flutter有hero，trao直接用了微信小程序的但是只支持小程序端，希望uniapp官方出一个同时支持多端的共享元素动画

bupafengyu 1楼•19 小时前

针对您提出的关于uni-app共享元素动画的需求，虽然官方目前没有直接提供内置的共享元素动画组件或功能，但我们可以通过编程实现类似的效果。下面是一个利用Vue和uni-app框架实现简单共享元素动画的示例代码。这个示例展示了在两个页面之间共享一个元素（例如一个图片）并实现动画过渡。

页面A (pageA.vue)

<template>
  <view>
    <image :src="imageSrc" class="shared-element" @click="navigateToPageB"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  },
  methods: {
    navigateToPageB() {
      uni.navigateTo({
        url: '/pages/pageB/pageB?imageSrc=' + encodeURIComponent(this.imageSrc),
        events: {
          // 监听返回事件，用于动画同步
          finishAnimation: (res) => {
            // 动画结束后的逻辑处理
          }
        },
        success: (res) => {
          // 可以在这里触发动画开始，但通常动画在目标页面控制
        }
      });
    }
  }
};
</script>

<style>
.shared-element {
  width: 100px;
  height: 100px;
  transition: transform 0.5s ease;
}
</style>

页面B (pageB.vue)

<template>
  <view>
    <image :src="imageSrc" class="shared-element" ref="sharedElement"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: decodeURIComponent(uni.getCurrentPages()[0].options.imageSrc)
    };
  },
  onReady() {
    this.$nextTick(() => {
      const sharedElement = this.$refs.sharedElement;
      // 假设我们希望元素从屏幕右侧滑入
      sharedElement.style.transform = 'translateX(100%)';
      uni.createAnimation({
        duration: 500,
        timingFunction: 'ease',
      }).translateX(0).step().export() then((animationData) => {
        sharedElement.animation = animationData;
        // 通知页面A动画已完成
        uni.getCurrentPage().getOpenerEventChannel().emit('finishAnimation');
      });
    });
  }
};
</script>

<style>
.shared-element {
  width: 100px;
  height: 100px;
}
</style>

注意：

上述代码是简化的示例，用于展示基本的思路。
实际开发中，可能需要更复杂的动画处理和状态管理。
uni-app的动画API和事件通道机制可能需要根据实际版本进行调整。
如果需要更高级的动画效果，可以考虑使用第三方动画库或CSS动画。