HarmonyOS-Switch_0

forCustomComponents了解更多开源请访问：51CTO开源基础软件社区https://ost.51cto.com前言最近发布switch组件用于时开发FA项目，switch组件是基于JS扩展的类Web开发范式组件中的一个基础组件。在使用过程中发现了一些问题，例如：1.设置宽高等样式属性不会改变switch组件本身的宽高，但是会修改switch组件的内边距。2.开关组件具有一定的缩放比例。在页面布局中使用switch组件存在上述问题，但可以通过一些技术手段（transform属性的scale）或者一些替代方案来达到预期的效果。在此基础上，通过已经掌握的FA知识，实现了一个简单的自定义switch开关组件。效果展示的实现原理是基于CSS关键帧动画animation和@keyframes。通过在开关的滑块上设置CSS属性position:absolute，并添加相应的动画类，即可实现开关切换的过渡效果。为switch设置一个固定的宽高，保证switch组件不缩放，将div组件包裹在switch组件外层，实现布局合理。css动画风格官方指导API：属性名称数据类型默认值描述transformstring-支持同时设置平移/旋转/缩放属性。animation6+string0sease0s1normalnonerunningnone格式：duration|计时功能|延迟|迭代次数|方向|填充模式|顺序分析。animation-namestring-指定@keyframes的名称。animation-fill-modestringnone指定动画开始和结束的状态：1、none：动画执行前后不会对目标应用任何样式；2、forwards：动画结束后，target会保留动画结束时的状态（定义在最后一个关键帧）；3、backwards6+：动画将在动画延迟期间应用第一个关键帧中定义的值。当动画方向为“正常”或“交替”时应用从关键帧中的值，当动画方向为“反向”或“交替反转”时应用关键帧中的值。4.both6+：动画会遵循前进和后退的规则，从而在两个方向扩展动画属性。animation-duration0定义一个动画周期。支持的单位是[s（秒）|ms（毫秒）】，默认单位为ms，格式为：1000ms或1s。（注意：必须设置animation-duration样式，否则duration为0，不播放动画。）animation-delay0定义了动画播放的延迟时间。支持的单位是[s（秒）|ms（毫秒）】，默认单位为ms，格式为：1000ms或1s。翻译X<长度>|-X轴平移动画属性。实现过程switch组件hml部分：