uni-app 仿照soul的星球交互效果

uni-app 仿照soul的星球交互效果

项目需求

  • 可以自定义原点颜色、大小
  • 可以自定义字体颜色、大小
  • 可以自定义球体半径
  • IOS和安卓端完美适配
  • 星球可以通过触摸旋转
4 回复

可以做

更多关于uni-app 仿照soul的星球交互效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


已经上架了插件，你说的这个正在改版，插件地址：https://ext.dcloud.net.cn/plugin?id=2789

公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们： 1、1000+项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。 2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。 4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。 5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。 6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449 商务微信：fan-rising
7x24小时在线，欢迎咨询了解

在uni-app中仿照Soul星球交互效果，我们可以利用canvas和一些动画来实现星球的旋转、缩放以及点击交互效果。以下是一个简化的代码案例，展示了如何创建一个旋转的星球，并在点击时产生缩放动画。

1. 初始化项目

首先，确保你已经安装了HBuilderX并创建了一个uni-app项目。

2. 修改pages/index/index.vue

<template>
  <view class="container">
    <canvas canvas-id="planetCanvas" style="width: 100%; height: 100%;" @touchstart="onTouchStart"></canvas>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      planetImage: '/static/planet.png', // 替换为你的星球图片路径
      scale: 1,
      isAnimating: false,
      angle: 0,
    };
  },
  onLoad() {
    this.initCanvas();
    this.animate();
  },
  methods: {
    initCanvas() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#planetCanvas').fields({ node: true, size: true }).exec((res) => {
        const canvas = res[0].node;
        const ctx = canvas.getContext('2d');
        this.ctx = ctx;
        this.drawPlanet();
      });
    },
    drawPlanet() {
      const { ctx, planetImage, scale } = this;
      ctx.save();
      ctx.translate(this.canvasWidth / 2, this.canvasHeight / 2);
      ctx.scale(scale, scale);
      ctx.rotate(this.angle * Math.PI / 180);
      ctx.drawImage(planetImage, -this.planetRadius, -this.planetRadius, this.planetRadius * 2, this.planetRadius * 2);
      ctx.restore();
    },
    animate() {
      if (this.isAnimating) {
        this.angle += 2; // 旋转速度
        this.drawPlanet();
        requestAnimationFrame(this.animate.bind(this));
      }
    },
    onTouchStart(e) {
      if (!this.isAnimating) {
        this.isAnimating = true;
        this.scale = 1.2; // 缩放比例
        setTimeout(() => {
          this.scale = 1;
          this.isAnimating = false;
        }, 300); // 动画持续时间
        this.animate();
      }
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

注意事项

  1. 图片资源：确保/static/planet.png路径正确，且图片资源已存在于项目中。
  2. Canvas大小：根据实际需求调整canvas的大小和星球的半径。
  3. 动画性能：对于复杂动画，考虑使用requestAnimationFrame进行性能优化。

这个代码案例提供了一个基本的框架，你可以在此基础上添加更多交互效果，如拖拽、多点触控缩放等，以实现更丰富的星球交互体验。

回到顶部