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,一经查实,立即删除!

相关文章

C语言试题二十之利用以下的简单迭代方法求方程cos(x)-x=0的一个实根。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 编写函数fu…

最新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…

lintcode二叉树的锯齿形层次遍历 (双端队列)

题目链接: http://www.lintcode.com/zh-cn/problem/binary-tree-zigzag-level-order-traversal/ 二叉树的锯齿形层次遍历 给出一棵二叉树,返回其节点值的锯齿形层次遍历(先从左往右,下一层再从右往左,层与层之间交替进…

C语言试题二十一之定义n×n的二维数组编写函数 function(int a[][n])功能是:使数组左下半三角元素中的值全部置成0。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 定义了nn的…

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

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

【专升本计算机】甘肃省2020年专升本计算机测试题

文章目录 第一部分 公共基础部分第二部分 数据库部分(文史财经类)第三部分 C语言部分(理工农医类)第四部分 综合部分第一部分 公共基础部分 一、单项选择(90题,每题1分,共90分) 世界上第一台电子计算机诞生于( )年。 A. 1956 B. 1946 C. 1944 D. 1940目前,第二代计…

Docker Eats Disk?

背景介绍下午 5:30,差不多到点打卡下班,准备好零食饮料,放松一下准备下班,然后...CI 构建失败,经典的一幕!!!无法从镜像仓库拉取镜像,docker 正常运行,为什么…

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

C语言试题二十二之定义了3×3的二维数组,并在主函数中赋值。函数的功能使求出数组周边元素的平均值并作为函数值返回给主函数中的s。

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 定义了33的…

【专升本计算机】专升本计算机期末考试复习题(A卷附答案)

文章目录 一、单选题(每空2分,共20分)。二、填空题(每空2分,共30分)。三、程序题(每小题10分,共50分)一、单选题(每空2分,共20分)。 世界上第一台电子计算机诞生于( B )年。 A.1956   B.1946   C.1944   D.1940以下不属于数字计算机特点的是 C__ 。 A.运算…

spring定时任务的配置使用

spring的定时任务配置分为三个步骤&#xff1a; 1、定义任务 2、任务执行策略配置 3、启动任务 1、定义任务 <!--要定时执行的方法--> <bean id"testTaskJob" class"org.springframework.scheduling.quartz.MethodInvokingJobDetailFactoryBean&qu…

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

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

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

微信公众号&#xff1a;趣编程ACE关注可了解更多的.NET日常实战开发技巧&#xff0c;如需源码 请公众号后台留言 源码[如果觉得本公众号对您有帮助&#xff0c;欢迎关注]前文回顾【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;会弹出一个授权…

C语言试题二十三之编写一个函数void function(int tt[m][n],int pp[n]),tt指向一个m行n列的二维函数组,求出二维函数组每列中最小元素,并依次放入pp所指定一维数组中

📃个人主页:个人主页 🔥系列专栏:C语言试题200例目录 💬推荐一款刷算法、笔试、面经、拿大公司offer神器 👉 点击跳转进入网站 ✅作者简介:大家好,我是码莎拉蒂,CSDN博客专家(全站排名Top 50),阿里云博客专家、51CTO博客专家、华为云享专家 1、题目 请编写一个…