企业官网建设流程全解析

网站后台问题,安卓 wordpress 源码分析,网站定制哪家安全,启东住房和城乡建设局网站#x1f3a2; 前言#xff1a;为什么你的动画看起来很“假”#xff1f; 很多开发者写动画喜欢用默认的 EaseInOut。 但在真实物理世界中#xff0c;物体运动是有惯性的。 假的动画#xff1a;A 点匀速移动到 B 点#xff0c;像个机器人。真的动画#xff1a;启动有加速… 前言为什么你的动画看起来很“假”很多开发者写动画喜欢用默认的EaseInOut。但在真实物理世界中物体运动是有惯性的。假的动画A 点匀速移动到 B 点像个机器人。真的动画启动有加速停止有减速撞击有回弹Overshoot。鸿蒙的 ArkUI 提供了curves.interpolatingSpring(插值弹簧)它模拟了真实的物理弹簧系统。我们不需要算复杂的微积分只需要调节“硬度”和“阻尼”。️ 一、 核心概念属性动画 vs 转场动画在写代码前必须分清这两个概念否则你的动画要么不跑要么乱跑。动画原理对比 (Mermaid):转场动画 (.transition)修改变量 this.show true播放 Opacity/Scale 变化组件不存在 (if false)触发入场动画组件存在 (UI树中)用于: 组件的出现 (Insert) 和消失 (Remove)属性动画 (.animation)修改变量 this.w 200自动生成中间帧状态 A (宽 100)触发补间计算状态 B (宽 200)用于: 已经在屏幕上的组件发生变化 二、 实战 1制作“果冻”按钮 (属性动画)我们要实现的效果按压时按钮缩小到 90%有点“紧绷”的感觉。松开时按钮恢复到 100%并带有“Duang Duang”的回弹。1. 核心代码ArkUI 的核心是“状态驱动 UI”。我们只需要改变scaleOptions的数值配合.animation()属性剩下的交给系统。import{curves}fromkit.ArkUI;EntryComponentstruct JellyButton{// 1. 定义状态缩放比例StatescaleValue:number1;build(){Column(){// 一个看起来很好吃的按钮Button(按我体验果冻效果).width(200).height(60).backgroundColor(#FF6B6B).fontSize(20).borderRadius(30)// 2. 绑定状态UI 随状态变化.scale({x:this.scaleValue,y:this.scaleValue})// 3. 【关键】添加属性动画// 只要上面的 scale 发生变化这个动画就会触发.animation({// 使用插值弹簧曲线// velocity: 初始速度// mass: 质量 (越重回弹越慢)// stiffness: 刚度 (越硬回弹越快像强力弹簧)// damping: 阻尼 (越小回弹次数越多像果冻越大越不弹)curve:curves.interpolatingSpring(10,1,228,15)})// 4. 交互逻辑.onTouch((event:TouchEvent){if(event.typeTouchType.Down){// 按下缩小模拟受力this.scaleValue0.9;}elseif(event.typeTouchType.Up){// 松开恢复触发弹簧回弹this.scaleValue1;}})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}} 调参秘籍想让果冻更软、晃动更久减小damping(阻尼)比如设为 8。想让按键反应更灵敏增加stiffness(刚度)比如设为 300。 三、 实战 2丝滑的入场 (转场动画)当你点击果冻按钮后弹出一张卡片。这时候就要用转场动画 (transition)。在鸿蒙 Next 中推荐使用TransitionEffect组合链式语法。StateshowCard:booleanfalse;// ... 在 build 中if(this.showCard){Text(我是弹出的卡片).width(300).height(200).backgroundColor(#4ECDC4).borderRadius(20).textAlign(TextAlign.Center).fontSize(24).fontColor(Color.White)// 【关键】定义入场和出场效果// 1. 初始状态透明度为0缩放为0.5且向下偏移 50vp.transition(TransitionEffect.OPACITY.combine(TransitionEffect.scale({x:0.5,y:0.5})).combine(TransitionEffect.translate({y:50}))// 2. 动画参数同样可以使用弹簧曲线.animation({curve:curves.springMotion(0.6,0.8)}))}Button(切换显示).onClick((){// animateTo 是为了让 if/else 的渲染过程也有动画animateTo({curve:curves.springMotion()},(){this.showCard!this.showCard;})}) 四、 显式动画 (animateTo) vs 属性动画 (.animation)很多新手会晕到底该用哪个场景推荐方式代码特征单个组件的简单交互属性动画 (.animation)写在组件链式调用的末尾随 State 变化自动触发。多个组件联动 / 复杂逻辑显式动画 (animateTo)animateTo({ duration: 1000 }, () { this.w 200 })组件的出现/消失转场动画 (.transition)必须配合if/else或Visibility控制。 总结鸿蒙的动画系统并不神秘它其实比 Android 原生的ObjectAnimator更直观。你不需要去计算每一帧的坐标你只需要告诉系统开始是什么样State A。结束是什么样State B。中间怎么走Curve 曲线。只要你用好了curves.interpolatingSpring你的 App 瞬间就能拥有“果冻般”的高级质感。Next Step:把上面的代码复制到 DevEco Studio 中。尝试修改interpolatingSpring的第 4 个参数阻尼将其从15改为5看看按钮会不会像疯狂的果冻一样弹个不停