打造一个高颜值的来电模拟器

原创

繁依Fanyi

发布于 2024-12-06 23:28:21

15500

代码可运行

运行总次数：0

代码可运行

在文章开始之前，推荐一些很值得阅读的好文章！感兴趣的也可以去看一下哦！

今日推荐：Spring AI再更新：如何借助全局参数实现智能数据库操作与个性化待办管理

文章链接：https://cloud.tencent.com/developer/article/2464797

这篇文章详细介绍了Spring AI的新特性，特别是如何利用全局参数实现CRUD操作和个人待办管理，内容深入、实用性强，对开发者理解智能数据库交互和Spring AI的应用有很大帮助。

今天要分享的是一个超级精致的来电模拟器实现。别看是个简单的功能，但做好了真的能让人眼前一亮！这个项目完美还原了来电界面，从动效到交互细节一个都没落下。来看看这个让人惊叹的实现吧！

设计理念 - 体验至上的艺术

首先，这个来电模拟器分为三个核心场景：

设置界面 - 让用户自定义来电信息
来电界面 - 展示逼真的来电效果
通话界面 - 模拟真实的通话场景

每个场景都经过精心设计，力求还原最真实的体验。来一步步解析这个精致的作品吧！

设置界面 - 简约而不简单

设置界面看似简单，实则暗藏玄机。首先是这个渐变背景配上毛玻璃效果，简直绝了：

.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.content-wrapper {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

表单设计也是相当用心，每个输入框都有精致的图标和交互效果：

<view class="form-item">
  <text class="form-label">来电姓名</text>
  <view class="input-wrapper">
    <text class="input-icon">📱</text>
    <input 
      v-model="callName" 
      class="form-input" 
      placeholder="输入来电显示的姓名"
    />
  </view>
</view>

当用户输入时，还会有一个细腻的焦点效果：

.form-input:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

来电界面 - 视觉盛宴的巅峰

来电界面可以说是整个项目的精髓所在。首先是这个令人惊艳的背景效果：

.background {
  position: absolute;
  width: 100%;
  height: 100%;
}

.gradient-overlay {
  background: linear-gradient(135deg, 
    rgba(76, 0, 255, 0.7) 0%,
    rgba(0, 122, 255, 0.7) 50%,
    rgba(76, 0, 255, 0.7) 100%
  );
  animation: gradientMove 15s ease infinite;
  background-size: 400% 400%;
}

看到这个渐变动画了吗？简直美到窒息！背景上还有几个浮动的圆形，让整个界面充满律动感：

.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: floatCircle 20s infinite linear;
}

@keyframes floatCircle {
  0% { transform: rotate(0deg) translate(100px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(100px) rotate(-360deg); }
}

头像区域的设计也是满满的细节：

.avatar-container {
  position: relative;
}

.avatar-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  animation: ringPulse 2s ease-out infinite;
}

.avatar-glow {
  background: radial-gradient(circle, 
    rgba(255,255,255,0.2) 0%, 
    rgba(255,255,255,0) 70%
  );
  animation: glowPulse 2s ease-out infinite;
}

这个头像外圈的光环效果，配上脉冲动画，简直绝了！

通话界面 - 细节控的胜利

通话界面的交互设计堪称教科书级别。每个功能按钮都有精致的视觉反馈：

.function-circle {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.function-circle.active {
  background: #fff;
  transform: scale(0.95);
}

通话时长的显示也很讲究：

computed: {
  formattedDuration() {
    const minutes = Math.floor(this.callDuration / 60);
    const seconds = this.callDuration % 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }
}

交互逻辑 - 让体验更真实

整个模拟过程的核心逻辑其实很巧妙。首先是来电延迟的处理：

async startSimulation() {
  const callInfo = {
    time: this.callTime,
    name: this.callName.trim(),
    remark: this.callRemark.trim(),
    vibration: this.vibration,
    ringtone: this.ringtone
  };
  
  uni.setStorageSync("callInfo", callInfo);
  
  setTimeout(() => {
    uni.navigateTo({
      url: '/pages/modules/module/func/call-simulator/incoming-call/apple-income-call'
    });
  }, this.callTime * 1000);
}

震动和铃声的处理也很有意思：

startVibration() {
  const vibrate = () => {
    uni.vibrateShort({
      success: () => {
        setTimeout(vibrate, 1500);
      }
    });
  };
  vibrate();
}

playRingtone() {
  this.ringtone = uni.createInnerAudioContext();
  this.ringtone.src = '/static/ringtone.mp3';
  this.ringtone.loop = true;
  this.ringtone.play();
}

动画特效 - 锦上添花的艺术

整个项目中的动画效果可以说是点睛之笔。比如这个接听/挂断按钮的脉冲效果：

.action-ripple {
  position: absolute;
  border-radius: 50%;
  animation: ripple 1.5s ease-out infinite;
}

@keyframes ripple {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

还有这个渐变背景的流动效果：

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

性能优化 - 追求极致体验

为了保证动画的流畅性，项目中采用了很多性能优化的技巧：

使用 transform 代替位置属性实现动画
合理使用 will-change 提示浏览器优化
适时销毁音频实例释放内存

onUnload() {
  this.stopRingtone();
  if (this.ringtone) {
    this.ringtone.destroy();
  }
}

扩展性设计 - 未来可期

整个项目的结构设计得非常灵活，比如来电风格的切换：

const callStyles = ["iOS 风格", "Android 风格"];

只需要添加新的样式模板，就能轻松支持更多机型的来电界面。

但是我觉得设计两个太麻烦，被我这个懒🐕砍掉了。

小技巧分享

使用 CSS 变量管理主题色值
合理运用 transition 让交互更流畅
使用 computed 属性处理格式化显示
及时清理定时器和音频实例

总结

这个来电模拟器的实现，完美诠释了"细节成就完美"这句话。从视觉设计到交互体验，从性能优化到代码结构，每一个环节都经过精心打磨。这不仅仅是一个简单的功能模块，更是一个追求极致的作品。

记住，优秀的前端作品不仅要看起来漂亮，更要用起来舒服。期待看到更多开发者能从这个项目中获得启发，创造出更多令人惊艳的作品！

最后，如果觉得这个实现有帮助，别忘了点个赞！一起打造更多精彩的前端作品吧~ 😎

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S10

登录后参与评论

0 条评论

热度