ShineButton

简介

ShineButton是一个带有闪光动画效果的按钮组件库，支持自定义形状、颜色、动画参数等。本库基于 ShineButton 原库进行适配，使其可以运行在 OpenHarmony，并沿用其现有用法和特性。

效果展示：

下载安装

ohpm install @ohos/shinebutton

使用说明

导入并使用

import { ShineButton, ShineButtonController } from '@ohos/shinebutton';

// 创建控制器
private controller: ShineButtonController | null = null

// 使用组件
ShineButton({
 siShape: $r('app.media.star'),
 btnColor: '#808080',
 btnFillColor: '#FF6666',
 shineCount: 7,
 shineTurnAngle: 30,
 smallShineOffsetAngle: 30,
 smallShineColor: '#666666',
 bigShineColor: '#FF6666',
 shineSize: 1,
 allowRandomColor: false,
 enableFlashing: false,
 shineAnimationDuration: 1500,
 clickAnimationDuration: 200,
 shineDistanceMultiple: 1.5,
 onClickListener: () => {
   console.log('The button was clicked');
 },
 onCheckStateChangeListener: (checked: boolean) => {
   console.log(`The selected state of the button is ${checked}`);
 },
 onControllerReady: (controller: ShineButtonController) => {
   this.controller = controller
 }
})

控制器方法调用

// 设置按钮颜色
this.controller?.setBtnColor('#FF3366')

// 设置闪光数量
this.controller?.setShineCount(10)

// 显示动画
this.controller?.showAnim()

// 获取当前状态
const isChecked = this.controller?.isChecked()

// 设置选中状态（有动画）
this.controller?.setChecked(true, true)

接口说明

参数名	类型	必填	说明
siShape	Resource	是	按钮形状资源
btnColor	string	否	按钮未选中时的颜色，默认'#808080'，颜色范围 #000000-#FFFFFF
btnFillColor	string	否	按钮选中时的填充颜色，默认'#FF6666'，颜色范围 #000000-#FFFFFF
shineCount	number	否	闪光数量，默认7，建议在1-20范围内
shineTurnAngle	number	否	闪光旋转角度，默认0，建议在0-360度范围内
smallShineOffsetAngle	number	否	小闪光偏移角度，默认30，建议在0-90度范围内
allowRandomColor	boolean	否	是否允许随机颜色，默认false
enableFlashing	boolean	否	是否启用闪烁效果，默认false
smallShineColor	string	否	小闪光颜色，默认'#666666'，颜色范围 #000000-#FFFFFF
bigShineColor	string	否	大闪光颜色，默认'#FF6666'，颜色范围 #000000-#FFFFFF
shineAnimationDuration	number	否	闪光动画持续时间(ms)，默认1500，建议在1500-3000毫秒范围内
clickAnimationDuration	number	否	点击动画持续时间(ms)，默认200，建议在200-500毫秒范围内
shineDistanceMultiple	number	否	闪光距离倍数，默认1.5，建议在1.0-3.0范围内
shineSize	number	否	闪光大小，默认0（自动计算），建议在1-100范围内
onClickListener	() => void	否	点击事件监听器
onCheckStateChangeListener	(checked: boolean) => void	否	选中状态改变监听器
onControllerReady	(controller: ShineButtonController) => void	否	控制器就绪回调

ShineButtonController 控制器方法

名称	功能描述
isChecked(): boolean	获取当前选中状态
setChecked(checked: boolean, anim?: boolean)	设置选中状态，可选是否显示动画
setBtnColor(btnColor: string)	设置按钮颜色
setBtnFillColor(btnFillColor: string)	设置按钮填充颜色
setShineCount(count: number)	设置闪光数量
setShineDistanceMultiple(multiple: number)	设置闪光距离倍数
setShineTurnAngle(angle: number)	设置闪光旋转角度
setSmallShineColor(color: string)	设置小闪光颜色
setSmallShineOffAngle(angle: number)	设置小闪光偏移角度
setShineSize(size: number)	设置闪光大小
setEnableFlashing(enable: boolean)	设置是否启用闪烁效果
setAnimDuration(duration: number)	设置动画持续时间
setClickAnimDuration(duration: number)	设置点击动画持续时间
setBigShineColor(color: string)	设置大闪光颜色
setAllowRandomColor(allow: boolean)	设置是否允许随机颜色
showAnim()	显示闪光动画
setCancel()	取消动画效果
setOnClickListener(listener: () => void)	设置点击监听器
setOnCheckStateChangeListener(listener: (checked: boolean) => void)	设置选中状态改变监听器
setShapeResource(raw: string)	设置形状资源
getBottomHeight(): number	获取底部高度
getColor(): string	获取颜色值

注意事项

控制器需要在onControllerReady回调中获取后才能使用
闪光大小设置为0时会根据按钮尺寸自动计算

约束与限制

在下述版本验证通过：

DevEco Studio: 6.0.1 Release（6.0.1.260）, SDK: API20(6.0.0.47)

目录结构

|---- ohos_ShineButton  
|     |---- entry  # 示例代码文件夹
|     |---- library  # ohos_ShineButton 库文件夹
|     |     |   └─src
|     |     |   │---└─main  
|     |     |   |----   └─ets
|     |     |   │----      └──components
|     |     |                 │----ShapeImageView.ets #形状渲染器
|     |     |                 │----ShineButton.ets #组件核心入口
|     |     |                 │----ShineButtonController.ets #参数控制器
|     |     |                 │----ShineRotationAnimator.ets #粒子光点动画器
|     |     |                 │----ShineView.ets #参数模型
|     |     |                 │----ShineViewComponent.ets #发光层容器
|     |     |   │----      └──utils
|     |     |                 │----ColorUtils.ets #颜色工具类
|     |     |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法    
|     |---- README_zh.md  # 安装使用方法

贡献代码

使用过程中发现任何问题都可以提 Issue ，当然，也非常欢迎发 PR 共建。

开源协议

本项目基于 MIT ，请自由地享受和参与开源。