必威体育Betway必威体育官网
当前位置:首页 > 运营推广

Protopie教程:如何制作悬浮按钮

时间:2019-07-06 05:45:27来源:运营推广作者:seo实验室小编阅读:51次「手机版」
 

按钮制作

本篇教程将展示如何制作悬浮按钮特效,enjoy~ ^_^

一、最终效果

二、功能点介绍

单击

旋转

移动

条件

三、制作过程

1. 首先我们来看一下,本案例中用到的元素

如下图所示:

在上图中,我们已经将点击“主按钮”后,3个子按钮(账户、手机邮箱)展开时的位置排列完成,并且记录下了子按钮的位置坐标。

账户(X:115 / Y:439)、手机(X:197 / Y:409)、邮箱(X:262 / Y:439)。

由于默认状态下,子按钮时隐藏的(其实就是层位置上处于主按钮下方),我们需要将4个按钮坐标全部修改成一致X:190 / Y:475。

下一步我们创建动作,选择“主按钮”图层,创建“单击”的触发动作,然后添加“条件”的参数,这里我们条件基准选择“按钮_新增”,类型选择“旋转”,判断选择“=”,并且设置参数值为“0”。

下一步创建主按钮点击的动效,选择“按钮_新增”图层,添加“旋转”参数,设置“每次旋转”,值为“180”度,旋转方向“顺时针”,意思是每次点击主按钮时,“按钮_新增”元素,顺时针选择180度。

下一步创建点击主按钮后,子按钮的移动动效,依次选择3个子按钮,分别为3个按钮添加“移动”的参数,并且将参数值设置为:账户(X:115 / Y:439)、手机(X:197 / Y:409)、邮箱(X:262 / Y:439)。

设置完成后,我们就完成了点击主按钮后,展现子按钮的动效。

下一步,我们完成再次点击“主按钮”,子菜单收回的特效。

在“单击”的触发动作下,添加新的“条件”的参数,这里我们条件基准依然选择“按钮_新增”,类型选择“旋转”,判断选择“=”,并且设置参数值为“180”。

这里设置180的意思表示:当“按钮_新增”这个元素当前旋转值为180时,调用下方的动作。

接着我们选择“按钮_新增”图层,添加“旋转”参数,设置“每次旋转”,值为“180”度,旋转方向“逆时针”,意思是每次点击主按钮时,“按钮_新增”元素,逆时针选择180度。

然后依次对3个子菜单添加“移动”的参数,并且将移动后的值设置为X:190 / Y:475。

完成上述设置,我们看一下最终的效果。

2. 源文件下载

HTTPs://pan.baidu.com/s/11IuP2aez8VmyyCXGA_Moag

相关阅读

Ubuntu 16.04 制作U盘镜像

为以后使用记录一下。参考以下链接:https://blog.csdn.net/fu6543210/article/details/79722615一、准备文件:1. Ubuntu16.04 安装

按钮都设计不好,你还指望用户点击?

Call to action(行为召唤)按钮以其易于识别和理解的特性,能对你客户产品的用户转化率产生极大影响。当你在设计这些按钮时,有必要考虑

分享一款好用的图表制作软件,简单、美观又高效!

换新工作后,老板给我一个任务,让我每周制作数据报告,辛苦做了半天,谁知道老板是一个“颜值即正义"人,嫌弃我的图表不好看,好惆怅。然后

使用UltraISO制作ubuntu安装u盘启动盘图文教程(转)

原文地址 https://blog.csdn.net/zjx2014430/article/details/49303785Ubuntu(乌班图)是一个以桌面应用为主的Linux操作系统,其名称

使用高德开放平台制作个性地图(一)

偶然间,使用高德开放平台看看有什么接口;发现还可以自己diy地图的样式,很赞,遂分享一下~【ps:这章讲的是初步制作】 1.首先,你得注册一

分享到:

栏目导航

推荐阅读

热门阅读