【充电动效Axure教程】 获赏8金币 基础教程

진수 普通用户 2020-8-24 1650

引言

      这是小编第一篇基础教程,对于文字排版,内容结构都不太熟,所以请读者见谅。

      本篇基础教程是实现一个模拟充电的动效Axure教程,废话不多说,直接看效果:

      

教程开始

1、元件准备

         

         动态面板help与help2中没有任何元素,分别都有两个state。作用是利用面板本身具有的循环状态来实现循环的效果。

         动态面板外:有一个动态面板-四个小圆、两个圆形,一个矩形。其中两个圆形和矩形的大小是一样的。一个圆叫做边缘(填充为空,边框颜色#2894FD,边框宽度为1)。另外一个圆叫做大圆(填充颜色#2894FD,边框设置与边缘圆一样)。矩形命名为遮盖(填充白色,边框宽度为0)。

         动态面板help与help2中没有任何元素,分别都有两个state。作用是利用面板本身具有的循环状态来实现循环的效果。

        

         最后,图层关系如图所示:

         

2、第一步

(1)为“开始”按钮的【点击】事件添加case:设置动作为【设置面板状态】“help” 为【Next】,同时勾选【向后循环】,【循环间隔】为500毫秒,勾选【首个状态延时500毫秒后切换】。


(2)继续上一步,设置动作为【旋转】“四个小圆”  【经过】「角度」“[[Speed_rotate]]”度,「方向」为默认的【顺时针】,「锚点」为默认的【中心】,「动画」为【线性】,时间为100毫秒。其中,Speed_rotate为全局变量,初始值为26。


(3)继续上一步,设置动作为【设置面板状态】“help2”为【Next】,同事勾选【向后循环】,【循环间隔】为100毫秒,勾选【首个状态延时100毫秒后切换】。


3、第二步

(1)为“help”动态面板的【面板状态改变时】事件添加case1,case1中添加条件,判断 【值】“[[g.y]]” 【>=】【值】“[[-f,height]]”。其中“g”是【局部变量】【元件】“遮盖”;“f”是【局部变量】【元件】“遮盖”。


(2)继续上一步,在case1下添加动作【移动】“遮盖”【经过】【x】“0”,【y】“-2”,【动画】为「线性」“100”毫秒。设置边界为【顶部】【>=】“[[-g.height]]”,其中“g”是【局部变量】【元件】“遮盖”。

(3)继续上一步,添加动作【设置变量】“speed_rotate” = “26”。

4、第三步

(1)为“help2”动态面板的【面板状态改变时】事件添加动作【设置变量】“speed_rotate” = “[[speed_rotate-4]]”。


5、第四步

(1)为“四个小圆”动态面板的【旋转时】事件添加case1,case1中添加条件,判断【值】“ [[g.y]]”【>=】【值】“[[-f.height]]”。其中“g”是【局部变量】【元件】“遮盖”;“f”是【局部变量】【元件】“遮盖”。

(2)继续上一步,在case1下添加动作【旋转】“This” 【经过】「角度」“[[speed_rotate]]”,「方向」为默认的顺时针,「锚点」为中心。【动作】为「线性」“100”毫秒。


到此为止,就可以实现我们的充电动效了。


axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 8金币
最新回复 (6)
  • zixuehanxiao 普通用户 3月前
    0 引用 7
    步骤讲解很详细,感谢分享
  • wowo 普通用户 3月前
    0 引用 6
    感谢
  • PMcurry 普通用户 5月前
    0 引用 5
    thx
  • ylLee 普通用户 5月前
    0 引用 4
    感谢分享,可是看不到图片
  • 沈十三 管理员 2020-9-6
    0 引用 3
    感谢分享,已获得8金币奖励!教程图片未正常显示,请调整下。
  • HeiHei_1596696186 普通用户 2020-9-3
    0 引用 2
    看不到图片,下载附件学习学习
返回
发新帖
作者最近主题:
AxureShop
axure商城