ivx动效按钮 基础按钮制作 02

本节示例:
请添加图片描述

一、特效块的制作

在上一节中制作了一个可以增加动效的自定义按钮后,这一节通过这个行按钮对其进行特效制作。

在行按钮中的绝对定位中,我们创建一个行,命名为移入,接下来我们做一个移入动效:
在这里插入图片描述
此时这个行会覆盖掉文本区域,我们将按钮文本移动至行之上:
在这里插入图片描述
此时这个行就不会盖掉之前的文本:
在这里插入图片描述
接着更改这个行为我们喜欢的颜色:
在这里插入图片描述
接着我们先把行的坐标置于原点:
在这里插入图片描述

二、给动效块添加动画

此时我们需要将这个动效块行放置于这个按钮之外,那么此时可以给予指责格行的 x 值为负,并且由于该行还需要向上移动一段距离,所以该行的 y 值也需要为负一段距离:
在这里插入图片描述
接着,咱们需要给这个动效块添加动画,点击行,添加轨迹:
在这里插入图片描述
在轨迹中设置动画长度为 0.5:
在这里插入图片描述
随后我们在关键帧区平均打上 3 个关键帧,时间位置分别是 0、0.25 、0.5 秒:
在这里插入图片描述
接着我们选中中间的关键帧,更改该关键帧使其移动到自定义按钮区域,并且完全覆盖掉整个区域:
在这里插入图片描述
此时理应再设置第三个关键帧使其返回到原来的位置,但时在这里默认状态是本来位置所以不再设置。

三、设置鼠标移入事件

接着咱们给自定义行设置鼠标移入事件,移入时播放这个轨迹动画到下一个关键帧:
在这里插入图片描述
如果选择播放动画将会播放完动画效果,这个效果并不是我们所需要的,所以在这里只需要选择播放至下一个关键帧即可。

设置完毕后再设置一个鼠标移出事件,设置其轨迹播放至上一个关键帧,为什么不直接设置播放至下一个关键帧是因为这样做会使动画无限生效,否则播放完了再调用关键帧播放则会无效,并且之前设置3个关键帧是为了使这个帧动画完备,方便更改:

在这里插入图片描述

此时页面效果如下:
请添加图片描述

但是此时你会发现,这只是一个块的动画特效,并不能说是按钮的,那如何解决呢?

此时只需要设置自定义按钮的是否裁剪为 是 即可,这样就会使这个按钮中超过按钮的区域将不会显示:

在这里插入图片描述
此时我们重命名轨迹为移入动画、重命名行1为移入块:
在这里插入图片描述
此时预览即可完成一个动效按钮:

若想设置其对应的圆角边框,只需要设置自定义按钮行即可,他将会裁剪掉显示区域外部的内容:
在这里插入图片描述
后续将会有更多特效按钮制作教程。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286303.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最新Modis影像数据下载完整流程---以MOD13Q1 NDVI数据下载为例(2020年12月2日更新)

本文详细讲解Modis数据的下载流程,以MOD13Q1影像为例,该数据为16天合成的空间分辨率为250m的NDVI产品,原始数据的投影为正弦曲线投影。 Modis数据MRT和ArcGIS处理方法集锦: 1.《ArcGIS10.8完美实现MODIS NDVI数据格式转换和投影变换》 2.《重磅!ArcGIS10.8 Python代码批量…

解决夜神模拟器无法联机调试 adb server version (**) doesn't match this client (**); killing...

前言 最新下了个最新版的夜神模拟器,然后adb devices发现连不上模拟器了,报adb server version (**) doesnt match this client (##); killing... 从报错信息看是adb版本不匹配导致的,接下来讲如何解决这个问题 环境: 夜神模拟器…

WCF分布式开发常见错误(25):The certificate 'CN=WCFHTTPS' must have a private key

在准备WCF安全开发实践编程系列文章的时候,制作证书出现这个问题。The certificate CNWCFHTTPS must have a private key that is capable of key exchange. The process must have access rights for the private key.证书必须有一个可以交换密钥的私钥&#xff0c…

【前端就业课 第二阶段】CSS 零基础到实战(02)列表

整个前端学习路线 以下路线为 CSDN C认提供: 如果想 快点搞完 并且 就业 可以选择C认证,C认证还可以 内推、招聘会 ,所以如果在校生想要稳一点,就可以选择C认证或者超级实习生计划,贼稳! 链接在这PC端&…

C#网络编程(订立协议和发送文件) - Part.4

转载自:http://www.tracefact.net/CSharp-Programming/Network-Programming-Part4.aspx 文件传输 前面两篇文章所使用的范例都是传输字符串,有的时候我们可能会想在服务端和客户端之间传递文件。比如,考虑这样一种情况,假如客户端…

Android Studio怎么设置悬浮提示文字框显示函数

[摘要]AndroidStudio函数悬浮提示文字框设置方法一:AndroidStudio在默认情况下是不会和Eclipse那样,鼠标移动到一个类或... Android Studio函数悬浮提示文字框设置方法一: Android Studio在默认情况下是不会和Eclipse那样,鼠标移…

消息队列入门(三)JMS标准及实现

消息中间件 消息中间件即Message-oriented middleware(MOM),消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集成。 通过提供消息传递和消息排队模型,消息中间件可以在分布式环境下扩展进程间…

【前端就业课 第二阶段】CSS 零基础到实战(02)标签类型、字体与图片

整个前端学习路线 以下路线为 CSDN C认提供: 如果想 快点搞完 并且 就业 可以选择超级实习生计划 如果有技术想稳定点找工作,可以C认证,C认证还可以 内推、招聘会 ,所以如果在校生想要稳一点,就可以选择C认证或者超…

【SignalR全套系列】之在.Net6中实SignalR通信

微信公众号:趣编程ACE关注可了解更多的.NET日常实战开发技巧,如需源码 请公众号后台留言 源码[如果觉得本公众号对您有帮助,欢迎关注]前文回顾【SignalR全套系列】之在.NetCore中实现WebSocket双工通信【SignalR全套系列】之在.Net Core 中实…

实践1-qq邮箱主页

纯html的网页 采用table分割板块进行布局<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"> <head>…

解决adb调试显示 Connected Device ************** [null]

或者有时候直接提示[UNAUTHORIZED……] 上边的提示 Connected Device 中设备编号 后边加了个[null]&#xff0c;意思是未授权&#xff0c;看下设备是否提示授权&#xff0c;如果没看到提示&#xff0c;可以重新拔掉设备&#xff0c;重新连接接数据线&#xff0c;会弹出一个授权…

Java 解析XML的几种方法

XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便。 XML在不同的语言里解析方式都是一样的,只不过实现的语法不同而已。 基本的解析方式有两种,一种叫SAX&#xff0c;另一种叫DOM。 SAX是基于事件流的解析,DOM是…

【前端就业课 第二阶段】CSS 零基础到实战(03)前端 CSS 动效 transition transform

本系列文章持续更新&#xff0c;点击专栏就可以看其他文章&#xff1a;点击进入专栏 整个前端学习路线 以下路线为 CSDN C认提供&#xff1a; 如果想 快点搞完 并且 就业 可以选择超级实习生计划 如果有技术想稳定点找工作&#xff0c;可以C认证&#xff0c;C认证还可以 内…

C#基于.Net-HtmlAgilityPack库的爬虫初体验

讲故事前几天有点空闲时间&#xff0c;在github上看一些.Net的开源库&#xff0c;看到了关于爬虫相关的库&#xff0c;于是加入了一个QQ群&#xff0c;看到里面各位大佬讨论的是爬的越好&#xff0c;进去越快&#xff0c;于是我自己也想做一个爬虫相关的东西&#xff0c;但是爬…

Android中文图混排时文图的居中对齐 FontMetrics以及自定义ImageSpan实现

文章转自&#xff1a;http://www.sohu.com/a/150059234_611601 本文作者CnPeng的博客地址&#xff1a; http://www.jianshu.com/p/2650357f7547 这个标题有点长&#xff0c;乍一看这么个标题你可能没明白啥意思&#xff0c;且听我慢慢道来。 公司的项目中新增了一个“心动”…

关于事件监听机制的总结(Listener和Adapter)

记得以前看过事件监听机制背后也是有一种设计模式的.(设计模式的名字记不清了,只记得背后实现的数据结构是数组.) 附上事件监听机制的分析图: 一个事件源可以承载多个事件(只要这个事件源支持这个事件就可以,男人就不支持生孩子的事件) 事件和监听器有对应关系的. 下面用awt中…

一、首页、详情页、文章编辑页制作《iVX低代码/无代码个人博客制作》

注&#xff1a;iVX也有免费直播课《第八期直播课》 一、首页制作 首页预览如下&#xff1a; 首先在博客页创建一个相对应项目&#xff1a; 接着选择前台&#xff0c;创建一个页面&#xff0c;命名为首页&#xff1a; 接着更改当前屏幕为小屏尺寸&#xff1a; 接着我们分…

Saga体系结构模式:微服务架构下跨服务事务的实现

在服务端应用程序中&#xff0c;我们往往会通过事务处理来保证数据一致性&#xff08;Data Consistency&#xff09;&#xff0c;例如&#xff1a;当用户从库存中取走了一定数量的物品&#xff0c;这些物品会体现在用户的提货单上&#xff0c;与此同时&#xff0c;库存中物品的…

GPhone、OPhone、UPhone、APhone、IPhone:满城尽带XPhone

本文为原创&#xff0c;如需转载&#xff0c;请注明作者和出处&#xff0c;谢谢&#xff01; 最近一段时间智能手机市场是翻天覆地。各大厂商纷纷推出自己的手机操作系统和手机。Google、Apple、中国移动、中国联通纷纷推出或即将推出自已 的智能手机操作系统&#xff08;虽…

二、文章发布页制作及后台实现《iVX低代码/无代码个人博客制作》

注&#xff1a;iVX也有免费直播课《第八期直播课》 一、文章编辑页制作 当首页制作完毕后&#xff0c;需要显示内容就需要有文章数据&#xff0c;此时我们创建一个文章编辑页增加对应的数据。 那么我们创建一个页面&#xff0c;命名为文章发布页&#xff1a; 接着我们查看标…