单词卡片翻转——从旋转动画到用户交互一、卡片翻转的应用场景在英语学习 App 中单词卡片是核心的学习交互方式。用户看到单词正面英文思考释义后翻转卡片看到背面中文释义 例句这是一个自然的学习流程。本项目中CourseHomePage实现了完整的单词卡片翻转功能包含 3D 旋转动画、正反面交叉淡入淡出、分类筛选、发音播放、掌握程度标记等交互。二、核心翻转动画2.1 状态变量LocalisFlipped:booleanfalse;// 翻转状态LocalrotateY:number0;// Y 轴旋转角度LocalfrontOpacity:number1;// 正面透明度LocalbackOpacity:number0;// 背面透明度四个变量共同控制卡片的视觉效果isFlipped用作文本状态标志rotateY控制 3D 旋转角度frontOpacity/backOpacity控制两面淡入淡出2.2 flipCard 方法privateflipCard():void{animateTo({duration:400,curve:Curve.EaseInOut},(){if(this.isFlipped){// 翻回正面this.rotateY0;this.frontOpacity1;this.backOpacity0;}else{// 翻到背面this.rotateY180;this.frontOpacity0;this.backOpacity1;}this.isFlipped!this.isFlipped;});}animateTo API这是 ArkUI 的显式动画接口。第一个参数是动画配置400ms 时长、EaseInOut 缓动曲线第二个参数是状态变更闭包。框架自动插值计算中间帧的rotateY值产生平滑的过渡效果。2.3 正反面 UI 结构Stack(){// 正面 - 显示单词Column(){Text(currentWord().word)// 英文单词.fontSize(34).fontWeight(FontWeight.Bold);Text(currentWord().phonetic)// 音标Text(currentWord().translation)// 中文释义Text(currentWord().example)// 例句}.rotate({x:0,y:this.rotateY,z:0,centerX:50%,centerY:50%,perspective:1200}).opacity(this.frontOpacity).onClick(()this.flipCard());// 背面 - 显示详细释义Column(){Text(详细释义)Text(currentWord().translation)Text(currentWord().example)Text(currentWord().exampleTranslation)// 分类标签}.rotate({x:0,y:this.rotateY-180,z:0,centerX:50%,centerY:50%,perspective:1200}).opacity(this.backOpacity).onClick(()this.flipCard());}正反两面通过Stack堆叠在一起。翻转到背面时rotateY变为 180 度同时背面的 rotation 为rotateY - 180即 -180→0 度这样在视觉上始终以正面朝向用户。perspective透视perspective: 1200设置了 3D 透视的视距。值越小3D 效果越明显值越大效果越平缓。1200 是一个较为自然的数值。三、前后翻页导航3.1 上一张 / 下一张privatenextCard():void{if(this.currentIndexthis.totalCount-1){// 翻页时重置翻转状态到正面this.isFlippedfalse;this.rotateY0;this.frontOpacity1;this.backOpacity0;this.isFavoritefalse;this.currentIndex;}}privateprevCard():void{if(this.currentIndex0){this.isFlippedfalse;this.rotateY0;this.frontOpacity1;this.backOpacity0;this.isFavoritefalse;this.currentIndex--;}}每次切换卡片时都重置翻转状态为正面未翻转。这确保了用户每次看到新卡片时都是熟悉的正面朝上状态。四、掌握程度标记4.1 用户交互Row({space:10}){Button(左滑 待复习).backgroundColor(#FFc000).onClick(()this.markUnfamiliar());Button(右滑 已掌握).backgroundColor(#165DFF).onClick(()this.markMastered());}4.2 标记逻辑privatemarkMastered():void{constwordthis.currentWord();GlobalContextUtils.showToast({message:已掌握:${word.word}});this.masteredCount;this.learnedCount;this.nextCard();}privatemarkUnfamiliar():void{constwordthis.currentWord();GlobalContextUtils.showToast({message:已加入生词本:${word.word}});this.learnedCount;this.nextCard();}两个按钮的共同点都通过showToast给用户即时反馈都增加learnedCount今日学习计数都自动跳到下一张卡片不同点markMastered增加masteredCount已掌握计数markUnfamiliar实际调用NewWordManager将单词加入生词本后续复习使用五、分类筛选卡片页支持按词汇分类筛选Tabs({barPosition:BarPosition.Start}){TabContent(){this.cardArea();}.tabBar(this.tabBuilder(全部,all));ForEach(WORD_CATEGORIES,(cat:WordCategory){TabContent(){this.cardArea();}.tabBar(this.tabBuilder(cat.label,cat.key));});}.barMode(BarMode.Scrollable).onTabBarClick((index:number){if(index0){this.currentCategoryall;}else{this.currentCategoryWORD_CATEGORIES[index-1].key;}this.currentIndex0;this.resetCardState();});BarMode.Scrollable使 Tab 在分类较多时可滚动通过onTabBarClick切换分类时重置卡片状态。分类筛选通过getFilteredWords()方法实现privategetFilteredWords():WordCard[]{if(this.currentCategoryall){returnDEFAULT_WORD_CARDS;// 500 词全量}returnDEFAULT_WORD_CARDS.filter(ww.categorythis.currentCategory);}六、发音功能privateplayPronunciation():void{constwordthis.currentWord();if(word.audioUrlword.audioUrl!){this.audioPlayer.play(word.audioUrl);}else{this.audioPlayer.play();// 播放系统默认提示音}}用户点击单词或音标旁的播放按钮时触发使用 AudioPlayer 单例播放当前单词的音频。七、动画性能优化卡片翻转动画涉及每一帧的旋转和透明度变化以下要点有助于保证动画流畅避免重复计算currentWord()在模板中多次调用ArkTS 的响应式系统会缓存结果使用 GPU 加速属性rotate和opacity是 GPU 加速属性不会触发 Layout 重排合理时长400ms 的动画时长经过实践验证既不会太快看不清也不会慢到让人等EaseInOut 缓动缓动曲线让动画在开始和结束时减速更加自然八、总结CourseHomePage 的卡片翻转实现是 ArkTS 动画系统的一个典型应用。通过animateTo驱动状态变更配合rotate和opacity实现立体的翻转效果。再加上分类筛选、发音播放、掌握标记等功能构成了一个完整的单词学习交互闭环。这个模式可以扩展到其他需要查看详情的场景——例如闪卡学习、选择题的答案解析等。
