news 2026/8/24 9:27:22

SmileToUnlock完全使用指南:6个自定义属性让App启动页更有趣

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
SmileToUnlock完全使用指南:6个自定义属性让App启动页更有趣

SmileToUnlock完全使用指南:6个自定义属性让App启动页更有趣

【免费下载链接】SmileToUnlockThis library uses ARKit Face Tracking in order to catch user's smile.项目地址: https://gitcode.com/gh_mirrors/smi/SmileToUnlock

SmileToUnlock 是一个基于 ARKit 面部追踪的 iOS 微笑解锁库:用户打开 App 后对着前置摄像头微笑,才能"解锁"进入主页面。本文带你快速上手这套面部微笑解锁方案,并详解 6 个自定义属性,几分钟就能为你的 App 启动页加入有趣的微笑门禁体验。

它是什么:让 App 启动页"因笑而开"

传统 App 打开即用,而 SmileToUnlock 把启动页变成了一场小小的互动游戏:

  • 📸 实时捕捉用户面部表情(ARKit Face Tracking)
  • 😊 屏幕上的简笔画笑脸会实时跟随用户的嘴角变化
  • ✅ 微笑幅度达标后播放提示音、弹出打勾动画,自动跳转主界面
  • 🚪 提供"跳过"按钮,保证用户随时能进入 App

核心判断逻辑只需一个静态属性,实现在 SmileToUnlock/SmileToUnlock.swift 第 38-40 行:

if SmileToUnlock.isSupported { // 设备支持面部追踪,可以启用微笑解锁 }

⚠️ 注意:面部追踪仅在真机(iPhone X 及以上机型)上可用,模拟器无法演示。

三步快速上手:给启动页加一个微笑门禁

以示例工程 SmileToUnlockExample/SmileToUnlockExample/AppDelegate.swift 为参考,一共只需三步。

第 1 步:配置相机权限

由于库要调用前置摄像头,必须在Info.plist中加入NSCameraUsageDescription并写一句用途说明(参考示例 SmileToUnlockExample/SmileToUnlockExample/Info.plist):

<key>NSCameraUsageDescription</key> <string>需要通过摄像头识别你的微笑来解锁 App</string>

第 2 步:检查设备是否支持

在启动入口处用SmileToUnlock.isSupported判断,不支持的设备直接走正常启动流程即可,避免崩溃。

第 3 步:一行代码显示微笑页

let vc = SmileToUnlock() vc.onSuccess = { // 用户微笑成功(或点击跳过)后,切换到主界面 } window?.rootViewController = vc

把这段代码放进AppDelegatedidFinishLaunchingWithOptions,微笑页就会在 App 启动时最先出现。

6 个自定义属性:让启动页变成你的风格

所有自定义属性集中在 SmileToUnlock/SmileToUnlock.swift,一览如下:

属性默认值作用
titleTextHello,页面大标题
subtitleTextBegin using our app from the smile标题下方的引导语
skipButtonTextSkip this底部"跳过"按钮文字
successTreshold0.7微笑阈值(0~1),达标才解锁
successSoundPlaying系统提示音 1075解锁成功音效,置为nil可静音
backgroundColor.blue页面背景色

配置起来非常直接:

let vc = SmileToUnlock() vc.titleText = "嗨," vc.subtitleText = "从一个微笑开始使用我们的 App" vc.skipButtonText = "跳过" vc.successTreshold = 0.8 // 0.8 已经算"很难笑"了 vc.backgroundColor = .purple vc.successSoundPlaying = nil // 不想响铃?置空即可

背景色:3 种预设 + 任意自定义

backgroundColor接受枚举SmileToUnlockBackground(SmileToUnlock/SmileToUnlock.swift):内置blueredpurple三种主题色,也能用.other(任意UIColor)配上品牌色,与你的 App 视觉风格完全统一。

微笑阈值:多"用力"才算解锁成功?

successTreshold控制解锁难度,取值 0~1:

  • 0.5左右:微微一笑即可,适合追求轻松体验
  • 默认0.7:需要明显的上扬嘴角
  • 0.8:库作者在注释里调侃"已经挺难了",适合搞怪场景

工作原理:系统如何"看懂"你的微笑?

无需担心复杂细节,库内部流程一目了然:

  1. 在页面上创建一个隐藏的ARSCNView,开启ARFaceTrackingConfiguration面部追踪(SmileToUnlock/SmileToUnlock.swift)
  2. 每帧读取面部的mouthSmileLeft/mouthSmileRight混合形状参数,取两者均值与阈值比较(SmileToUnlock/SmileToUnlock.swift)
  3. 把 0~1 的"微笑程度"传给SmileView实时绘制嘴角弧度(SmileToUnlock/SmileView.swift)
  4. 微笑达标后播放音效、淡入打勾动画(SmileToUnlock/CheckmarkView.swift),再触发onSuccess回调

也就是说,用户脸上真实的笑容,会逐帧映射到屏幕里的简笔画脸上——这正是演示动图里最打动人的效果。

三种安装方式:总有一种适合你

  • 🐼CocoaPods(推荐):在Podfile写入pod 'SmileToUnlock'后执行pod install即可
  • 📦Swift Package Manager:添加包依赖后,将SmileToUnlock加入 Target 的依赖列表,包配置见 Package.swift
  • 🛠️手动集成:克隆仓库git clone https://gitcode.com/gh_mirrors/smi/SmileToUnlock,把SmileToUnlock目录下的源码文件拖入你的工程即可

版本信息可参考 SmileToUnlock.podspec,最低支持 iOS 11。

常见问题

问:模拟器里看不到效果?面部追踪只支持 iPhone X 及以上真机,请连接实体设备运行。

问:用户不想微笑怎么办?底部有"跳过"按钮(文字可通过skipButtonText修改),点击后同样会触发onSuccess,不影响用户进入 App。

问:会存储用户的人脸数据吗?不会。库只在内存中实时读取表情参数,不保存任何图像或生物特征信息。

从权限配置到六大属性,SmileToUnlock 用极小的代码量换来了启动页的一次小惊喜。不妨把微笑阈值调高一点、换上品牌背景色——下一次用户打开你的 App 时,或许会真的会心一笑 🙂

【免费下载链接】SmileToUnlockThis library uses ARKit Face Tracking in order to catch user's smile.项目地址: https://gitcode.com/gh_mirrors/smi/SmileToUnlock

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/24 9:26:08

跨端兼容:先做特性检测,再准备回退

跨端兼容&#xff1a;先做特性检测&#xff0c;再准备回退 浏览器升级后出现的布局问题&#xff0c;常常不是“某个内核不支持”这么简单&#xff1a;属性支持了&#xff0c;组合用法也可能不同。处理兼容性时&#xff0c;先从受影响的页面和浏览器版本开始复现&#xff0c;再决…

作者头像 李华
网站建设 2026/8/24 9:21:12

智能时代缺陷报告撰写指南:从模糊描述到精准修复指令

1. 从“报个Bug”到“驱动修复”&#xff1a;一份高质量缺陷报告的价值重塑“这个功能又崩了&#xff0c;你们快看看。” 这大概是开发团队最常听到的一句话。在软件开发的日常中&#xff0c;缺陷报告&#xff08;Bug Report&#xff09;是连接用户、测试人员与开发者的核心纽带…

作者头像 李华