代码拉取完成，页面将自动刷新
基于OpenHarmony下的JavaScript UI框架，使用stack容器组件、canvas画布组件和button按钮组件，在按钮上绑定ontouchstart事件和ontouchend事件，实现一个自定义长按膨胀按钮组件，同时兼顾按钮和进度条两个功能。
<stack class="stack-parent" style="background-color : #00000000">
<canvas ref="canvas1" style="width: 300px; height: 300px; background-color: #00000000;"></canvas>
<button id="btn" disabled="{{ disabled }}" class="Animation" type="circle"
style="radius: {{ divR }}; background-color: #9D9D9D;"
ontouchstart="Show" ontouchend="Erase"></button>
</stack>
点击时画外圈，按钮逐渐变大。
Show() {
//打印按钮当前状态为“正在点击”
this.$emit('btnType', {btnstate: '点击'});
console.log("————按钮状态：点击中————");
const el = this.$refs.canvas1;
const ctx = el.getContext('2d', { antialias: true });
//画外圈，用于提示长按进度
ctx.lineWidth = 5;
ctx.strokeStyle = '#82D900';
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 6.28);
ctx.stroke();
console.log("外圈显现，按钮膨胀");
//膨胀动画
var options1 = {
duration: this.duration, //运行时间
easing: 'linear', //动画时间曲线
fill: 'forwards', //指定动画起始态或终止态
iterations: 1, //播放次数
begin: 50.0, //播放起点
end: 100.0, //播放终点
}
this.animator.update(options1);
var _this = this;
this.animator.onframe = function(value) {
_this.divR = value;
//外部色圈显现，提示启动事件准备就绪
if(100 == _this.divR) {
ctx.beginPath();
ctx.arc(150, 150, 120, 0, 6.28);
ctx.shadowBlur = 1;
ctx.shadowColor = '#FFFF37';
ctx.stroke();
console.log("准备就绪");
}
};
this.animator.play();
},
长按达到设定时间，生成外圈阴影，松开即可启动事件，若中途松开，按钮瞬间恢复到初始状态。
Erase() {
//打印按钮当前状态为“松开”
this.$emit('btnType', {btnstate: '松开'});
console.log("————按钮状态：松开————");
//重置动画
var options2 = {
duration: 0, //运行时间
easing: 'linear', //动画时间曲线
fill: 'forwards', //指定动画起始态或终止态
iterations: 1, //播放次数
end: 50.0, //播放终点为初始起点
}
this.animator.update(options2);
var _this = this;
this.animator.onframe = function(value) {
_this.divR = value;
};
//成功启动事件
if(100 == _this.divR) {
this.disabled = true; //按钮失效，不可点击
//向父组件传递事件的状态值为true
this.$emit('eventType', {eventstate: true});
console.log("启动成功");
}
//启动失败，擦除提示外圈
else {
const el = this.$refs.canvas1;
const ctx = el.getContext('2d');
ctx.clearRect(45, 45, 210, 210);
console.log("启动失败")
console.log("外圈擦除，按钮重置");
}
},
使用canvas画布组件，以坐标(150,150)为圆心，2π为弧度，画半径为100的浅绿色圆形外圈。
中途松开按钮时，使用clearRect方法擦除该外圈（以坐标(45,45)为起点，擦除边长为210的方形区域）。
导入模块
import animator from '@ohos.animator';
初始化声明
onInit() {
//膨胀动画初始化创建声明
var options = {};
this.animator = animator.createAnimator(options);
},
按钮膨胀动画，当用户持续长按达到设定时间时，膨胀动画完整播放，按钮半径达到最大值100，此时触发提示条件，生成黄色外圈阴影提示用户“长按操作已完成，松开即可启动事件”。
中途松开按钮，动画对象加载反方向的动画属性集，将按钮初始半径作为播放终点，运行时间设定为零，瞬间恢复初始状态。
<element name="btnswell" src='../../common/component/btnswell.hml'></element>
父组件 -> 子组件：父组件通过设置子组件中duration属性设定长按操作所需的时间。
子组件 -> 父组件：
文本用于显示按钮处于何种状态（点击/松开）。
当成功完成长按操作，子组件向父组件传递参数eventstate值为true，用户可结合自身项目需求使用该值触发某些事件。
该自定义组件开发项目较为简单，代码逻辑也并不复杂，比较适合刚入门的新手参考学习，希望能帮助到大家，谢谢评阅。