让动画更灵动easy-loading-cj 缩放、旋转、平移四类入场退场动画配置实战【免费下载链接】easy-loading-cjeasy-loading提供多种 loading/Toast 动画加载效果项目地址: https://gitcode.com/Cangjie-TPC/easy-loading-cjeasy-loading-cj 是一款面向仓颉HarmonyOS的开源组件库内置 27 种 loading 加载动画和 Toast 提示。本文带你用 4 组一行式配置方法轻松为 loading 弹层和 Toast 添加缩放、旋转、平移、透明度四类入场退场动画让界面交互瞬间更有质感。为什么 loading 动画需要入场退场设计想象一下点击按钮后加载弹层啪地一下出现消失时又啪地一下不见——功能没问题但体验略显生硬。而加入动画后缩放弹层像气球一样长出来消失时缩回消失反馈感强旋转整层旋转入场适合转场感强的等待场景平移Toast 从屏幕顶部滑入位置明确、不遮挡操作️透明度遮罩与组件渐显渐隐柔和不刺眼好消息是easy-loading-cj 的这四类动画全部在模型上链式配置show/hide 时自动播放无需手写任何动画逻辑。快速上手引入 easy-loading-cj 的 3 个步骤将easyloading模块拷贝到你的工程根目录下在entry的oh-package.json5中添加依赖dependencies: { easyloading: file:../easyloading }在cjpm.toml中声明路径依赖后一句import即可使用import easyloading.*完整步骤可参考 README.md 的使用说明章节。四类入场退场动画配置实战一、缩放动画让弹层长出来的效果this.loadingModel .setScaleAnimator(1.0)一行搞定setScaleAnimator(1.0)表示入场时从 0 倍放大到 1 倍即正常大小退出时再缩回 0。它内部会自动开启isScale开关配置见 easy_loading_model.cj。 想要更夸张的效果可以试试setScaleAnimator(1.2)入场瞬间会有一点过冲感。二、旋转动画整层 360° 转场入场this.loadingModel .setRotateAnimator(360.0)入场时组件从起始角度旋转到rotateTo如 360.0退场时反向旋转内部取负角度形成完整的转场闭环。搭配缩放使用旋转 放大的入场非常吸睛。三、平移动画Toast 从顶部滑入this.loadingModel3 .setText(Toast) .setIsOffset(true) .setOffsetDirection(Alignment.Top) .setOffsetY(70.0)这是四类动画里参数最多的一组三个参数各管一件事方法作用setIsOffset(true)开启平移动画setOffsetDirection(Alignment.Top)指定贴靠方向顶部/居中/底部setOffsetY(70.0)距离方向边的偏移量值越大离边缘越远退场时组件会自动平移回原点配合遮罩淡出就是标准的顶部滑入式 Toast。四、透明度动画柔和渐显渐隐this.loadingModel .setMaskDisplayAnimator(0.5)setMaskDisplayAnimator(0.5)让遮罩透明度从 0 渐变到 0.5比瞬间出现的半透明蒙层柔和得多。此外还可以用setAnimatorOpacity单独控制组件自身的淡入淡出与前三类自由组合。show 与 hide入场退场自动配对配置好之后触发时机非常简单调用show()遮罩、缩放、旋转、平移、透明度按配置自动正放调用hide()所有动画自动反放——缩放归零、角度取反、偏移归位、透明度归零完成后才隐藏组件动画默认时长 200ms、EaseInOut缓动曲线节奏干脆利落。实现逻辑集中在 easy_loading_model.cj 的showAnimator/hideAnimator中渲染侧则在 easy_loading.cj 中读取这些状态值。实战配方速查表想要效果一行配置弹窗弹出感.setScaleAnimator(1.0)旋转转场入场.setRotateAnimator(360.0)顶部下滑式 Toast.setIsOffset(true).setOffsetDirection(Alignment.Top).setOffsetY(70.0)遮罩柔和渐显.setMaskDisplayAnimator(0.5)全部拉满推荐组合缩放 旋转 遮罩渐显同时配置更完整的可运行案例可直接翻阅示例工程 test_all_indicator.cj里面有缩放、旋转、平移的开关按钮方便对照效果。文档与源码导览完整接口说明doc/feature_api.md动画模型含四类动画状态与 show/hide 动画逻辑easy_loading_model.cj组件渲染实现easy_loading.cj各动画效果源码目录easyloading/src/main/cangjie/src/小结easy-loading-cj 把入场退场动画从手写动画简化成了配置参数缩放、旋转、平移、透明度四类效果各一行配置show/hide 自动正放反放。无论做加载弹层还是 Toast 提示都能用最小成本让动画更灵动 。【免费下载链接】easy-loading-cjeasy-loading提供多种 loading/Toast 动画加载效果项目地址: https://gitcode.com/Cangjie-TPC/easy-loading-cj创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
