当前位置：首页 > news >正文

鸿蒙App开发--心愿池的动画特效：投币动画与进度条

news 2026/6/10 2:15:04

心愿池的动画特效：投币动画与进度条

如果你有心愿目标想攒钱实现，推荐去鸿蒙应用市场搜一下**「心愿池」**，下载体验体验。创建心愿、投币储蓄、追踪进度，一套走下来对攒钱目标会有更清晰的把控。体验完再回来看这篇文章，你会更清楚投币动画和进度条背后是怎么实现的。

写在前面

大家好，我是一名写了十多年Web前端的老兵。从jQuery时代一路走到React/Vue，CSS3动画、requestAnimationFrame、Web Animation API这些都算是看家本领。去年开始转战鸿蒙生态，用ArkTS开发App，这一路踩了不少坑，也积累了不少心得。

很多人觉得"前端转鸿蒙"应该很容易——都是写UI嘛，组件化、状态管理、生命周期，概念都差不多。但真正上手之后你会发现，相似的地方让你觉得亲切，不同的地方让你抓狂。

比如：

动画实现：Web用CSS@keyframes或requestAnimationFrame，鸿蒙用animator模块。
数据存储：Web的localStorage到了ArkTS变成了@ohos.data.preferences。
状态管理：React的useState变成了@State。

接下来这篇文章，我会用"心愿池"的实际开发经历，带你看看投币动画、进度条动画、成就系统的实现。

这篇文章聊什么

心愿池的动画特效功能，核心要解决三个问题：

投币动画：投币时的视觉反馈
进度条动画：储蓄进度的平滑动画
成就系统：激励用户坚持储蓄

第一步：心愿数据结构

interfaceWish{id:string;name:string;category:string;// 8种分类priority:string;// high/medium/lowtargetAmount:number;savedAmount:number;progress:number;// 0-1records:SavingsRecord[];createdAt:number;}interfaceSavingsRecord{id:string;amount:number;note:string;timestamp:number;}// 8种心愿分类constWISH_CATEGORIES=[{id:'travel',name:'旅行',icon:'✈️'},{id:'tech',name:'数码',icon:'📱'},{id:'education',name:'学习',icon:'📚'},{id:'home',name:'家居',icon:'🏠'},{id:'fashion',name:'时尚',icon:'👗'},{id:'health',name:'健康',icon:'💪'},{id:'hobby',name:'爱好',icon:'🎨'},{id:'other',name:'其他',icon:'💝'}];

第二步：投币动画

@Entry@Componentstruct WishDetailPage{@Statewish:Wish|null=null@StatecoinAnimation:boolean=false@StateprogressValue:number=0privateanim:AnimatorResult|null=nullaboutToDisappear(){if(this.anim){this.anim.cancel()}}// 投币动画playCoinAnimation(){this.coinAnimation=true;this.anim=animator.create({duration:800,iterations:1,curve:'EaseOut'});this.anim.onFrame=(value:number)=>{// 0-0.5: 硬币下落// 0.5-1: 进度条更新if(value<0.5){// 硬币下落阶段}else{// 进度条更新阶段this.progressValue=this.wish?this.wish.progress:0;}};this.anim.onFinish=()=>{this.coinAnimation=false;};this.anim.play()}// 快速投币asyncquickSave(amount:number){if(!this.wish)return;constrecord:SavingsRecord={id:`save_${Date.now()}`,amount,note:'',timestamp:Date.now()};this.wish.records.push(record);this.wish.savedAmount+=amount;this.wish.progress=Math.min(this.wish.savedAmount/this.wish.targetAmount,1);awaitthis.saveWish();this.playCoinAnimation();}asyncsaveWish(){if(!this.wish)return;conststore=awaitpreferences.getPreferences(getContext(),'xinyuanchi_data');letwishes:Wish[]=JSON.parse(awaitstore.get('wishes','[]')asstring);constindex=wishes.findIndex(w=>w.id===this.wish!.id);if(index>-1){wishes[index]=this.wish;}awaitstore.set('wishes',JSON.stringify(wishes));awaitstore.flush();}build(){Column(){if(this.wish){// 心愿名称Text(this.wish.name).fontSize(24).fontWeight(FontWeight.Bold).margin({bottom:8})// 进度环Stack(){Circle({width:160,height:160}).stroke('#374151').strokeWidth(12).fill('transparent')Circle({width:160,height:160}).stroke('#A855F7').strokeWidth(12).fill('transparent').strokeDashArray([this.progressValue*500,500])Column(){Text(`${Math.round(this.progressValue*100)}%`).fontSize(32).fontWeight(FontWeight.Bold).fontColor('#A855F7')Text(`¥${this.wish.savedAmount}/ ¥${this.wish.targetAmount}`).fontSize(12).fontColor('#9CA3AF')}}.margin({top:16,bottom:24})// 快速投币Text('快速投币').fontSize(14).fontColor('#9CA3AF').margin({bottom:8})Flex({wrap:FlexWrap.Wrap}){ForEach([10,50,100,500],(amount:number)=>{Button(`¥${amount}`).onClick(()=>this.quickSave(amount)).width(70).height(40).margin(4).backgroundColor('#A855F7').borderRadius(20)})}.justifyContent(FlexAlign.Center)}}.width('100%').height('100%').padding(16).backgroundColor('#111827')}}

第三步：成就系统

constACHIEVEMENTS=[{id:'first_wish',name:'许愿',desc:'创建第一个心愿',check:(s)=>s.wishCount>=1},{id:'first_save',name:'第一笔',desc:'完成第一次储蓄',check:(s)=>s.saveCount>=1},{id:'ten_saves',name:'坚持储蓄',desc:'累计储蓄10次',check:(s)=>s.saveCount>=10},{id:'first_complete',name:'心愿达成',desc:'完成第一个心愿',check:(s)=>s.completedWishes>=1},{id:'total_1000',name:'千元储蓄',desc:'累计储蓄1000元',check:(s)=>s.totalSaved>=1000},{id:'total_10000',name:'万元储蓄',desc:'累计储蓄10000元',check:(s)=>s.totalSaved>=10000},{id:'five_wishes',name:'多心愿',desc:'同时管理5个心愿',check:(s)=>s.wishCount>=5},{id:'streak_30',name:'连续30天',desc:'连续30天有储蓄',check:(s)=>s.consecutiveDays>=30}];