[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-6812":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":15,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},6812,"LoginCritter","cgoldsby\u002FLoginCritter","cgoldsby","An animated avatar that responds to text field interactions","",null,"Swift",5682,372,118,3,0,5,65.72,"MIT License",false,"master",true,[24,25,26],"animation","swift","uipropertyanimator","2026-06-12 04:00:30","# Login Critter\n> An animated avatar that responds to text fields interactions 🐻\n\n![Demo gif](\u002Fassets\u002Fdemo.gif)\n\nInspired by the amazing work done by other designers and developers, specifically Darin Senneff's [amazing work](https:\u002F\u002Fdribbble.com\u002Fshots\u002F4249163-Animated-login-form-avatar?utm_campaign=iOS%2BDev%2BWeekly&utm_medium=web&utm_source=iOS%2BDev%2BWeekly%2BIssue%2B349). 🎩🌟 I wanted to try and create a similar animated \"Login avatar\" in Swift.\n\nThe Login Critter uses several `UIPropertyAnimator`. The head rotation is controlled by updating the `fractionComplete` property for an animator. As the user types, the animator's fraction complete is calculated by `text width \u002F text field width`.\n\n## Avatar Assets\nThe Login Critter assets are broken down in to \"Parts\": body, head, eyes, ears, nose, muzzle, etc. Each \"Part\" can be individually animated. They are just vector PDFs because I wanted to focus on the animations and not worry about creating shapes programmatically.\n\nI used Affinity Designer for creating the mock up and assets. (I'm falling in love with this program. 😍) I've included the [raw asset](\u002Fassets\u002Flogin-critter.afdesign) in this repo.\n\n## Avatar States\nThe Login Critter has a neutral, active, ecstatic, and shy state.\n\nFor simplicity, the neutral state is just the identity transform for all the Part layers. The neutral state can be triggered by tapping the background.\n\nThe active state has two phases a start and end. The start and end active phases corresponds to the avatar turning from left to right. The active state can be triggered by tapping the email text field.\n\nThe ecstatic state is unique because it can be used in combination with all other states, i.e. the avatar can be both ecstatic and neutral. The ecstatic state can be triggered by typing **`@`** in the email text field.\n\nThe shy state is only used in combination with the neutral state and can be triggered by tapping the password text field.\n\nThe peek state is only used in combination with the shy state and can be toggled On or Off using the \"show password\" button in the password text field.\n\nThere is also a \"saved\" state. The \"saved\" state is the current active transformation that is stored when returning to the neutral state. For example, if the active state is 50% complete, the avatar is looking straight down, and transitions to the neutral state, then when returning to the active state the avatar will animate to 50% complete instead of 0% complete.\n\n| Neutral                             | Active                            | Ecstatic                              | Shy                         | Peek                          |\n| :----------------------------------:|:---------------------------------:| :------------------------------------:| :--------------------------:| :----------------------------:|\n| ![Neutral png](\u002Fassets\u002Fneutral.png) | ![Active png](\u002Fassets\u002Factive.png) | ![Ecstatic png](\u002Fassets\u002Fecstatic.png) | ![Shy png](\u002Fassets\u002Fshy.png) | ![Peek png](\u002Fassets\u002Fpeek.png) |\n\nThe \"Parts\" transformations for each state begin with it's `identity`, the neutral state, then scale, rotate and\u002For translate is applied.\n\n## Debug Mode\nThere is a [debug mode flag](https:\u002F\u002Fgithub.com\u002Fcgoldsby\u002FLoginCritter\u002Fblob\u002F012eecbf51a07d6ba389ff865ae30074b001702e\u002FLoginCritter\u002FSources\u002FLogin\u002FLoginViewController.swift#L203) that when set to `true` it will show a debug UI. But, be wary, strange behavior might occur if you use both the text field and the debug UI. It's best to use either the text field or debug UI when testing.\n\n## Meta\nIt's rare that I get a chance to do animations and thought this might be a fun little project. Thanks for checking it out! 🙇‍\n\nChris Goldsby – [@goldsbychris](https:\u002F\u002Ftwitter.com\u002Fgoldsbychris)\n\nDistributed under the MIT license. See ``LICENSE`` for more information.\n\nQuestions? Comments? I would love to hear your feedback. :heart:\n","Login Critter 是一个响应文本框交互的动画头像。该项目使用 Swift 语言开发，核心功能是通过 `UIPropertyAnimator` 控制头像的动画效果，包括头部旋转、眼睛和耳朵等部位的独立动画。当用户在文本框中输入时，动画会根据输入内容动态变化，例如输入特定字符时触发兴奋状态。项目提供了多种状态如中立、活跃、兴奋和害羞等，适用于需要增强用户体验或增加趣味性的登录界面设计场景。简洁直观的设计让开发者能够轻松集成到自己的应用中。",2,"2026-06-11 03:09:01","top_language"]