个人代码库の迅雷7动态图标按钮模拟
引言:
迅雷7 发布以来,就对它的“动态图标按钮”特效垂涎很久了,现在终于有机会和心情来模拟这个效果。
我坚信在编程的世界,没有做不到,只有想不到!
特效一览:
鼠标只要移动到上面任意图标上,就会有一个动态的转换图标效果。鼠标离开的时候,也有一个动态的恢复初始图标的动态转换图标的过程。
这样的一个效果,使得整个操作过程中的动作反馈非常的明显,并且显得整个程序生动得多。
原理思考:
首先,从操作上可以将这个效果分为两个阶段:
阶段1,对应鼠标的接触事件(MouseEnter);
阶段2,对应鼠标的离开事件(MouseLeave)。
然后,从图标显示看,初步可以分为四个状态:
状态1,静态图标A;
状态2,动态图标B;
状态3,动态图标C;
状态4,静态图标D。
最后,就是将事件和图标状态联系起来,就可以实现动态的转换效果了。
结果,在实际代码的实现中,还增加了一个计时器,才得以实现。
控件选择:
既然显示的是动态图标,第一想法就是选用 PictureBox控件。
当然,还有上面的说的“计时器”控件,目的是为了控制图标的转换。
在这里留个思考:
假如不用计时器,是否也能实现同样效果。
突破点:在使用EASY GIF Animator制作GIF图片的时候,发现有一个“动画属性”,可以设置动画的循环次数。当我选择只循环一次的时候,唯有选择用IE浏览器显示图片,才有效果。而假如使用软件浏览图片的话,就会“一直无限循环”!
图标制作:
原理分析显示,此效果需要用到两张动态图标,因此必须制作四张合格的图标素材。
制作要点:动态图标的效果最好是两张静态图标的动态转换的效果,即给人一种慢慢过渡的感觉。
在这里再次引发一个思考:
可否将两张动态图标合并为一张。
出发点:在观察迅雷7的效果转换的时候,发现,它使用到的动态效果似乎都是一样的,即鼠标进入,和鼠标离开,动态转换的是一个效果。
制作软件:EASY GIF Animator V5.1.0.44
素材原图:百度搜索得来的 首先,在这里将素材原图用软件打开之后,就可以得到每一帧的分解图。我就选择了以图标中小人的提包的高度为两个静态图标。
然后,动态图标的转换就是两个静态图标的过渡转换效果。即小人的提包从最低处,慢慢摆到最高处;再从最高处慢慢摆到最低处。
最后,制作了出四张不同合格的图标。
![]() |
![]() |
![]() |
![]() |
说明:两张动态图标的时间延迟应该都是一样的。我这里使用了6帧的画面,循环一次要0.6秒。记住这个时间,一下实际编写代码的时候要用到。
实际编码:
1.新建一个“window窗体应用程序”项目。
2.添加一个PictureBox控件,Image属性设置为:静态图标1
3.添加一个Timer控件,Interval属性设置为:动态图标循环一次时间的一半,在这里我设置的是0.3秒,即300毫秒。
4.添加PictureBox的MouseEnter事件。
5.添加PictureBox的MouseLeave事件。
6.添加TimerTick事件。
全部代码如下:
using System;
using System.Drawing;
using System.Windows.Forms;namespace WindowsFormsApplication1
{public partial class Form1 : Form{public Form1(){InitializeComponent();}int IconState = 0;//标记图标状态。private void pictureBox1_MouseEnter(object sender, EventArgs e){timer1.Stop();this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.动态1;//this.pictureBox1.Image = Image.FromFile("动态1.gif");IconState = 1;timer1.Start();}private void pictureBox1_MouseLeave(object sender, EventArgs e){timer1.Stop();this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.动态2;//this.pictureBox1.Image = Image.FromFile("动态2.gif");IconState = 2;timer1.Start();}private void timer1_Tick(object sender, EventArgs e){timer1.Stop();switch (IconState){case 1://图标状态1,将显示变为静态2图标this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.静态2;//this.pictureBox1.Image = Image.FromFile("静态2.gif");break;case 2://图标状态2,将显示变为静态1图标this.pictureBox1.Image = global::WindowsFormsApplication1.Properties.Resources.静态1;//this.pictureBox1.Image = Image.FromFile("静态1.gif");break;default:break;}IconState = 0;}}
}
界面显示效果如下:
源代码下载:
迅雷7动态图标按钮模拟.zip
[By:Asion Tang]
2011年3月12日 14:24:48
转载于:https://www.cnblogs.com/AsionTang/archive/2011/03/12/1982212.html
个人代码库の迅雷7动态图标按钮模拟相关推荐
- 猿创征文|Android 11.0 12.0Launcher3 时钟动态图标的定制化
目录 1.概述 2.Launcher3 时钟动态图标的定制化的核心代码 3.Launcher3 时钟动态图标的定制化的代码功能分析
- ABAP 屏幕上动态修改按钮的图标
对于屏幕上画出来的按钮,有时候需要根据用户动作修改图标.这个功能可以通过设置多个按钮,然后根据需要显示只想要看到的按钮,也可以只画一个按钮,通过修改图标码动态修改 第一种比较直接,但是比较麻烦,这里介 ...
- html5 怎么写动态图形设计,如何用SVG制作酷炫动态图标?(代码实例)
本章给大家介绍在html5中如何用SVG制作酷炫动态图标?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.基本图形元素 svg有一些预定义的形状元素:矩形,圆形,椭圆 ...
- html动态图标代码,SVG动态图标是如何实现的
这篇文章给大家分享的内容是SVG动态图标是如何实现的,有需要的朋友可以参考一下. 在 loading.io 上能看到好多效果惊艳的loading图标.它们都是用svg写成的,寥寥几行代码,比img图片 ...
- 【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
- HTML-iconfont动态图标SVG效果--阿里巴巴图标矢量库
给北大打工,实现官网首页动态图标效果_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Ys4y1c7oh/?spm_id_from=333.1007.to ...
- java图书信息添加代码_图书 - java代码库 - 云代码
[java]代码库package com.mahe; import java.awt.BorderLayout; import java.awt.Dimension; import java.awt. ...
- 从Google代码库找到的好东西
Google 代码库是一个类似 SourceForge 的开源社区,大量开发者在那里上传自己的代码或素材同他人分享,Google 代码库于 2006 年启动,至今已积累了大量的好东西,本文从 Goog ...
- 酷炫的SVG 动态图标
酷炫的SVG 动态图标 在 loading.io 上能看到好多效果惊艳的loading图标.它们都 ...
最新文章
- 「人工智能训练师」国家职业技能标准发布:共有五级,您是第几级?
- PHP利用jpgraph类画折线图
- XCTF(攻防世界)—进阶web题Write Up(二)
- [收藏]61条面向对象设计的经验原则
- Windows11 发布更新 Insider Preview Build 22000.100
- File指定过滤器得到需要的文件
- 不用加好友,查看对方校内照片
- presto执行一条查询分为七步
- Unity开发手游的实用插件
- Python语言的起源与发展
- GPT-3的最强落地方式?陈丹琦提出小样本微调方法,比普通微调提升11%
- 集合点 java协议_LR插入集合点rendezvous
- 泛微OA 任意文件上传漏洞
- PCIe Receiver内部恢复时钟与本地时钟
- T00ls技术文章.rar
- 立体感css播放按钮样式
- 基于微信小程序的校园二手图书设计与开发
- Airbnb短租数据分析报告
- 怎么让鼠标带黄色光圈?
- Integer127==127结果为true为什么Integer128==128结果为false?
热门文章
- YTU 2775: 字母的争论
- 《白蛇:缘起》非专业影评
- xbs2009,2010不支持远古2009播放器 解决方案
- 远古盗链教程及盗链HTML源码和盗链工具
- 电脑技巧:Microsoft Edge浏览器技巧介绍
- 3dmax to UE4 模型制作流程与规范
- html5 网页课程设计(二)
- java flash 开发_web开发相关技术概述(JavaScript, Flash, Java, Silverlight and ActiveX)
- 老男孩-Python之路,Day3 - Python基础3
- 自定义百度地图style样式