HTML炫彩按钮,Button - 动画按钮

炫彩界面库-帮助文档   v1.8.6.1

- [首页](#)

- [相关页面](#)

- [模块](#)

- [数据结构](#)

- [文档首页](#)

Button - 动画按钮

### 说明

Button 动画按钮.

### 示例代码

struct my_image_info

{

HIMAGE hImage1;

HIMAGE hImage2;

HIMAGE hImage3;

HIMAGE hImage4;

HIMAGE hImage5;

HIMAGE hImage6;

};

void CreateButton(int left,int top,my_image_info *pInfo,HWINDOW hWindow)

{

HELE hButton=XBtn_Create(left,top,37,42,L"A",hWindow);

XBtn_AddAnimationFrame(hButton,pInfo->hImage1,100); //添加动画帧

XBtn_AddAnimationFrame(hButton,pInfo->hImage2,100);

XBtn_AddAnimationFrame(hButton,pInfo->hImage3,100);

XBtn_AddAnimationFrame(hButton,pInfo->hImage4,100);

XBtn_AddAnimationFrame(hButton,pInfo->hImage5,100);

XBtn_AddAnimationFrame(hButton,pInfo->hImage6,100);

XBtn_EnableAnimation(hButton,TRUE); //启动动画

}

void CreateButtonLoop(int left,int top,my_image_info *pInfo,HWINDOW hWindow)

{

HELE hButton=XBtn_Create(left,top,37,42,L"B",hWindow);

XBtn_AddAnimationFrame(hButton,pInfo->hImage1,100); //添加动画帧

XBtn_AddAnimationFrame(hButton,pInfo->hImage2,100);

XBtn_AddAnimationFrame(hButton,pInfo->hImage3,100);

XBtn_AddAnimationFrame(hButton,pInfo->hImage4,100);

XBtn_AddAnimationFrame(hButton,pInfo->hImage5,100);

XBtn_AddAnimationFrame(hButton,pInfo->hImage6,100);

XBtn_EnableAnimation(hButton,TRUE,TRUE); //启动动画,循环播放

}

int WINAPI wWinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPTSTR lpCmdLine, int nCmdShow)

{

XInitXCGUI();

HWINDOW hWindow = XWnd_Create(0, 0, 300, 200, L"炫彩界面库窗口",NULL, XC_SY_DEFAULT);

XBtn_SetType(XBtn_Create(10, 5, 60, 20,L"close",hWindow),XC_BUTTON_TYPE_CLOSE);

my_image_info info;

info.hImage1=XImage_LoadFile(L"animation\\1.png");

info.hImage2=XImage_LoadFile(L"animation\\2.png");

info.hImage3=XImage_LoadFile(L"animation\\3.png");

info.hImage4=XImage_LoadFile(L"animation\\4.png");

info.hImage5=XImage_LoadFile(L"animation\\5.png");

info.hImage6=XImage_LoadFile(L"animation\\6.png");

int left=20;

int top=50;

CreateButton(left,top,&info,hWindow); left+=50;

CreateButton(left,top,&info,hWindow); left+=50;

CreateButton(left,top,&info,hWindow); left+=50;

CreateButton(left,top,&info,hWindow); left+=50;

CreateButton(left,top,&info,hWindow); left+=50;

left=20; top=100;

CreateButtonLoop(left,top,&info,hWindow); left+=50;

CreateButtonLoop(left,top,&info,hWindow); left+=50;

CreateButtonLoop(left,top,&info,hWindow); left+=50;

CreateButtonLoop(left,top,&info,hWindow); left+=50;

CreateButtonLoop(left,top,&info,hWindow); left+=50;

XWnd_ShowWindow(hWindow,SW_SHOW);

XRunXCGUI();

XExitXCGUI();

return 0;

}

### 程序截图

![](https://box.kancloud.cn/2015-07-13_55a34305aec0d.gif)

Generated at 2015年七月9日 星期四 11:40:05 for 炫彩界面库-帮助文档 by  [![doxygen](https://box.kancloud.cn/2015-07-13_55a343062ab38.png)](http://www.doxygen.org/index.html) 1.7.6.1

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个HTML炫彩粒子的代码示例: ```html <!DOCTYPE html> <html> <head> <title>Colorful Particles</title> <style> html, body { height: 100%; padding: 0; margin: 0; background: #000; } canvas { position: absolute; width: 100%; height: 100%; } </style> </head> <body> <canvas id="colorfulParticles"></canvas> <script> var settings = { particles: { length: 500, // maximum amount of particles duration: 2, // particle duration in sec velocity: 100, // particle velocity in pixels/sec effect: -0.75, // play with this for a nice effect size: 30, // particle size in pixels }, }; var canvas = document.getElementById("colorfulParticles"); var ctx = canvas.getContext("2d"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 绘制粒子的代码 </script> </body> </html> ``` 这段代码使用了HTML5的canvas标签来绘制炫彩粒子效果。通过设置CSS样式,将canvas元素的宽度和高度设置为100%以适应整个窗口。然后,在JavaScript中,我们可以使用getContext("2d")方法获取绘图上下文,然后使用绘图上下文来绘制粒子效果。具体的粒子绘制代码在注释中,你可以根据自己的需求进行修改和扩展。 #### 引用[.reference_title] - *1* *3* [html爱心特效代码](https://blog.csdn.net/qq_48396625/article/details/109296650)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [html5canvas实现动态粒子背景](https://blog.csdn.net/CodeDoge/article/details/108341835)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值