代码拉取完成，页面将自动刷新
基于OpenHarmony下的JavaScript UI框架，使用stack容器组件、canvas画布组件和button按钮组件，在按钮上绑定ontouchstart事件和ontouchend事件，实现一个自定义长按膨胀按钮组件，同时兼顾按钮和进度条两个功能。
| 参数名 | 描述 | 默认值 |
|---|---|---|
| duration | 用户可通过该参数设置长按启动事件所需时间 | 2000(ms) |
在index.hml中引用自定义组件，为自定义组件命名。
<element name="btnswell" src='../../common/component/btnswell.hml'></element>
通过该组件的duration参数，设置启动事件所需长按的时间。
<btnswell duration="1500" @btn-type="btnClicked" @event-type="eventState"></btnswell>
父组件根据自定义组件传回的Boolean类型的eventstate值，判断是否执行绑定的事件。
其中为了演示效果更加直观，设置了btnClicked属性，用于显示按钮状态（点击中/松开）。
长按操作：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>
点击按钮，生成绿色外圈显示长按进度，按钮半径radius的值divR随着动画播放变大，按钮膨胀的同时实时判断该值是否达到最大，当按钮半径达到最大值时显示黄色外圈，提示用户“长按操作完成，松开即可启动事件”，松开后自定义组件向父组件返回eventstate值为true，父组件根据该值判断启动相应的绑定事件。若在按钮膨胀到最大前松开，执行ontouchend事件Erase，擦除用于提示的绿色外圈，并播放重置动画使按钮瞬间恢复为初始状态。
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("外圈擦除，按钮重置");
}
},
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。